2694 lines
No EOL
119 KiB
JavaScript
2694 lines
No EOL
119 KiB
JavaScript
Language = 'en' // "en", "es", "fr", "de", "pt", "it", "pl", "nl", "ru", "tr", "hu", "ro", "cs", "sv", "ar"
|
|
|
|
CurrentPage = "properties"
|
|
PropertyCreationPanelType = 'house'
|
|
PropertyCreationType = 'SHELL'
|
|
PropertyCreationKey = null
|
|
PropertyInfos = ['','','']
|
|
CurrentPropertySelectionPage = 1
|
|
CurrentCameraSelectionPage = 1
|
|
CurrentProperty = null
|
|
PurchaseType = 'purchase'
|
|
AdminPropertyType = 'house_admin'
|
|
QuestionPanel = []
|
|
RealEstate = false
|
|
InSoldProperties = false
|
|
SellType = 'instant'
|
|
ChoosedPropertyForSell = ''
|
|
ChoosedPaint = 0
|
|
ChosedFurnitureType = 'all'
|
|
InsideOrOutside = ''
|
|
Loader = false
|
|
IsDUIDotOpened = false
|
|
LastProperty = null
|
|
ControlSectionState = 'house'
|
|
ChosedMovingFurnitureType = null
|
|
OpenedTutoralFrom = ''
|
|
CurrentTutorialPage = 0
|
|
Myproperties = null
|
|
BGBlur = true
|
|
|
|
BackgroundBlurFunction(BGBlur)
|
|
|
|
let translations = {};
|
|
|
|
async function loadTranslations(lang) {
|
|
try {
|
|
const response = await fetch(`../locales/${lang}.json`);
|
|
translations = await response.json();
|
|
updateText()
|
|
} catch (error) {
|
|
console.error("Error loading translation:", error);
|
|
}
|
|
}
|
|
|
|
function updateText() {
|
|
document.querySelectorAll("[data-i18n]").forEach(element => {
|
|
const key = element.getAttribute("data-i18n");
|
|
|
|
if (element.hasAttribute("placeholder")) {
|
|
element.setAttribute("placeholder", translations[key]);
|
|
} else {
|
|
element.innerHTML = translations[key];
|
|
}
|
|
});
|
|
}
|
|
|
|
loadTranslations(Language)
|
|
|
|
function t(key) {
|
|
return translations[key] || key;
|
|
}
|
|
|
|
window.addEventListener('message', function(event) {
|
|
let data = event.data
|
|
|
|
if (data.action === "OpenDuiMenu") {
|
|
|
|
let DoorStatus = data.dooropen
|
|
let PropertyType = data.ptype
|
|
let DuiActionTable = data.table
|
|
|
|
document.querySelector(".button_option_panel .property_type img").src = PropertyType=='house'?"assets/house.png":"assets/garage.png"
|
|
if (DoorStatus){
|
|
document.querySelector(".button_option_panel .small_icon").classList.remove("red")
|
|
document.querySelector(".button_option_panel .state").classList.remove("red")
|
|
document.querySelector(".button_option_panel .small_icon").classList.add("green")
|
|
document.querySelector(".button_option_panel .state").classList.add("green")
|
|
setTimeout(() => {
|
|
$('.button_option_panel .state').html(t('open'))
|
|
}, 10);
|
|
$('.button_option_panel .top_section').css('box-shadow', 'inset -200px 0px 100px -100px rgba(121, 215, 190, 0.8)')
|
|
}
|
|
else{
|
|
document.querySelector(".button_option_panel .small_icon").classList.remove("green")
|
|
document.querySelector(".button_option_panel .state").classList.remove("green")
|
|
document.querySelector(".button_option_panel .small_icon").classList.add("red")
|
|
document.querySelector(".button_option_panel .state").classList.add("red")
|
|
setTimeout(() => {
|
|
$('.button_option_panel .state').html(t('closed'))
|
|
}, 10);
|
|
$('.button_option_panel .top_section').css('box-shadow', 'inset -200px 0px 100px -100px rgba(249, 84, 84, 0.8)')
|
|
}
|
|
|
|
$(".action_container").html("")
|
|
for (let i = 0; i < DuiActionTable.length; i++) {
|
|
$(".action_container").append(`
|
|
<div class="action_part popup_anim">
|
|
<div class="key_btn"><div class="btn_text">${DuiActionTable[i][0]}</div></div>
|
|
<div class="text">${DuiActionTable[i][1]}</div>
|
|
</div>
|
|
`)
|
|
}
|
|
|
|
$(".dui_section").css("display", "block")
|
|
document.getElementById('dot_signal').style.animation = "reverse_popup_anim 0.35s ease, dot_animation2 2s infinite";
|
|
setTimeout(() => {
|
|
$(".dot_signal").css("display", "none")
|
|
setTimeout(() => {
|
|
$(".button_option_panel").css("display", "block")
|
|
if (IsDUIDotOpened){
|
|
let elements = document.getElementsByClassName('popup_anim');
|
|
for (let i = 0; i < elements.length; i++) {
|
|
elements[i].style.animation = "popup_anim 0.35s ease";
|
|
}
|
|
IsDUIDotOpened = false
|
|
}
|
|
}, 20);
|
|
}, 300);
|
|
|
|
}
|
|
else if (data.action === "OpenDuiDot") {
|
|
|
|
IsDUIDotOpened = true
|
|
$(".dui_section").css("display", "block")
|
|
let elements = document.getElementsByClassName('popup_anim');
|
|
for (let i = 0; i < elements.length; i++) {
|
|
elements[i].style.animation = "reverse_popup_anim 0.35s ease";
|
|
}
|
|
setTimeout(() => {
|
|
$(".button_option_panel").css("display", "none")
|
|
setTimeout(() => {
|
|
$(".dot_signal").css("display", "flex")
|
|
document.getElementById('dot_signal').style.animation = "popup_anim 0.35s ease, dot_animation2 2s infinite";
|
|
}, 20);
|
|
}, 300);
|
|
}
|
|
else if (data.action === "OpenVehicleMenu") {
|
|
VehicleData = data.vehicledata
|
|
VehicleRepairing = data.repairing
|
|
$(".dui_section").css("display", "block")
|
|
$(".vehicle_info").css("display", "block")
|
|
$(".first_layer").css("display", "block")
|
|
CreateVehicleMenu()
|
|
$(".second_layer").css("display", "none")
|
|
}
|
|
else if (data.action === "OpenVehicleMenu2") {
|
|
VehicleData = data.vehicledata
|
|
VehicleRepairing = data.repairing
|
|
$(".dui_section").css("display", "block")
|
|
$(".vehicle_info").css("display", "block")
|
|
$(".second_layer").css("display", "block")
|
|
CreateVehicleMenu()
|
|
$(".first_layer").css("display", "none")
|
|
}
|
|
else if (data.action === "OpenApartmentMenu") {
|
|
ApartmentTable = data.table
|
|
SelectedApartment = data.selectedapartment - 1
|
|
Currency = data.currencyform
|
|
CreateApartmenteMenu()
|
|
$(".dui_section").css("display", "block")
|
|
$(".apartment_selector").css("display", "block")
|
|
document.querySelector(".selected").style.opacity = "0";
|
|
}
|
|
else if (data.action === "OpenApartmentMenu2") {
|
|
ApartmentTable = data.table
|
|
SelectedApartment = data.selectedapartment - 1
|
|
Currency = data.currencyform
|
|
CreateApartmenteMenu()
|
|
$(".dui_section").css("display", "block")
|
|
$(".apartment_selector").css("display", "block")
|
|
$(".apartment_selector").css("background-color", "transparent")
|
|
document.querySelectorAll(".apartment_selector *").forEach(el => {
|
|
el.style.opacity = "0";
|
|
});
|
|
|
|
document.querySelectorAll(".upper_layer").forEach(el => {
|
|
el.style.opacity = "1";
|
|
});
|
|
document.querySelectorAll(".upper_layer *").forEach(el => {
|
|
el.style.opacity = "0";
|
|
});
|
|
|
|
document.querySelector(".selected").style.opacity = "1";
|
|
|
|
document.querySelectorAll(".selected *").forEach(el => {
|
|
el.style.opacity = "1";
|
|
});
|
|
}
|
|
else if (data.action === "CloseDui") {
|
|
$(".dui_section").css("display", "none")
|
|
}
|
|
|
|
if (data.action === "OpenPropertyMenu") {
|
|
Myproperties = data.table
|
|
WifiUnlockPrice = data.wifiunlockprice
|
|
Currency = data.currencyform
|
|
OsTime = data.ostime
|
|
SellToGameMultiplier = data.fastsalepurchaseprice
|
|
MaxDelayedPriceMultiplier = data.delayedsalepurchaseprice
|
|
GarageUpgrade = data.garageupgrade
|
|
Furnitures = data.furnitures
|
|
KeyPrices = data.keyprices
|
|
ClosestProperty = data.selectedproperty
|
|
SecurityObjects = data.securityobjects
|
|
BrutalKeys = data.brutalkey
|
|
BackgroundBlurFunction(BGBlur)
|
|
|
|
show('properties_menu')
|
|
if (CurrentPage == 'furnitures'){
|
|
CurrentPage = 'properties'
|
|
}
|
|
BackgroundBlur("plugin_1", 'properties_panel')
|
|
|
|
if (data.type == 'open'){
|
|
SwitchPage(CurrentPage)
|
|
}
|
|
else{
|
|
SwitchPage(CurrentPage, true)
|
|
}
|
|
}
|
|
else if (data.action === "OpenHouseCreationMenu") {
|
|
show('property_creation_menu')
|
|
PropertyTypes = data.types
|
|
GarageIDs = data.allgarageid
|
|
CreatePropertyCreation('house')
|
|
PropertyCreationPanelType = 'house'
|
|
BackgroundBlur("plugin_2", 'panel_creation')
|
|
}
|
|
else if (data.action === "OpenGarageCreationMenu") {
|
|
PropertyTypes = data.types
|
|
GarageIDs = data.allgarageid
|
|
BackgroundBlurFunction(BGBlur)
|
|
CreatePropertyCreation('garage')
|
|
PropertyCreationPanelType = 'garage'
|
|
show('property_creation_menu')
|
|
BackgroundBlur("plugin_2", 'panel_creation')
|
|
}
|
|
else if (data.action === "OpenControlHelp") {
|
|
HintTable = data.table
|
|
ScreenTitle = data.text
|
|
BackgroundBlurFunction(BGBlur)
|
|
CreateHintMenu(data.furniture)
|
|
show('hint_menu')
|
|
show('screen_title')
|
|
}
|
|
else if (data.action === "HideControlHelp") {
|
|
hide('hint_menu')
|
|
hide('screen_title')
|
|
}
|
|
else if (data.action === "HideFurnitureInfos") {
|
|
BackgroundBlurFunction(BGBlur)
|
|
if (data.updatedfurnitures != undefined){
|
|
Myproperties[CurrentProperty].furnitures = data.updatedfurnitures
|
|
}
|
|
$('#panel_chosed_furniture').css('animation', 'none')
|
|
$('#panel_chosed_furniture').css('animation', 'reverse_Basic_popup 0.3s ease both')
|
|
setTimeout(() => {
|
|
BackgroundBlur("plugin_4", 'panel_chosed_furniture')
|
|
$('.chosed_furniture').css('display', 'none')
|
|
}, 300);
|
|
CreateFurnitureMenu()
|
|
}
|
|
else if (data.action === "BringFurnituresUp") {
|
|
$('#panel_furniture').css('animation', 'Basic_popup 0.3s ease both')
|
|
$('#panel_chosed_furniture').css('animation', 'Basic_popup 0.3s ease both')
|
|
$('.preferences_con').css('animation', 'Basic_popup 0.3s ease both')
|
|
BackgroundBlurFunction(BGBlur)
|
|
|
|
let interval = setInterval(() => {
|
|
BackgroundBlur("plugin_4", 'panel_chosed_furniture')
|
|
BackgroundBlur("plugin_3", 'panel_furniture')
|
|
}, 1);
|
|
|
|
setTimeout(() => {
|
|
clearInterval(interval)
|
|
}, 600);
|
|
}
|
|
else if (data.action === "OpenPurchaseMenu") {
|
|
Currency = data.currencyform
|
|
PurchasePropertyData = data.propertydata
|
|
PropertyDebt = data.debt
|
|
PurchaseData = data.purchasedata
|
|
BillingCycle = data.billingcycle
|
|
BackgroundBlurFunction(BGBlur)
|
|
CreatePurchaseMenu()
|
|
show('property_purchase_menu')
|
|
BackgroundBlur("plugin_5", 'panel_purchase')
|
|
}
|
|
else if (data.action === "OpenAdminPropertiesMenu") {
|
|
AdminTable = data.housingdata
|
|
Currency = data.currencyform
|
|
RealEstate = false
|
|
BackgroundBlurFunction(BGBlur)
|
|
show('admin_menu')
|
|
CreateAdminMenu(document.getElementById('admin_search_input').value)
|
|
BackgroundBlur("plugin_admin", 'panel_admin')
|
|
}
|
|
else if (data.action === "OpenRealEstatePropertiesMenu") {
|
|
Balance = data.realestate.balance
|
|
SoldProperties = data.realestate.soldProperties
|
|
AdminTable = data.housingdata
|
|
Currency = data.currencyform
|
|
CanOpenBalance = data.balancemenu
|
|
RealEstate = true
|
|
BackgroundBlurFunction(BGBlur)
|
|
show('admin_menu')
|
|
CreateRealEstateMenu(document.getElementById('admin_search_input').value)
|
|
BackgroundBlur("plugin_admin", 'panel_admin')
|
|
}
|
|
else if (data.action === "successCreation") {
|
|
document.getElementById('rentable_input').checked = false
|
|
document.getElementById('property_name').value = ''
|
|
document.getElementById('property_price').value = ''
|
|
document.getElementById('property_img').value = ''
|
|
document.getElementById('street_number').value = ''
|
|
document.getElementById('garage_id_input').value = ''
|
|
document.getElementById('vehicle_exit').value = ''
|
|
document.getElementById('entry_door').value = ''
|
|
document.getElementById('street_input').value = ''
|
|
if (document.getElementById('exit_door')){
|
|
document.getElementById('exit_door').value = ''
|
|
}
|
|
}
|
|
else if (data.action === "OpenCloakroomMenu") {
|
|
show('clothe_menu')
|
|
$(".clothe_conatiner").html("")
|
|
Clothe = data.table
|
|
if (Clothe.length > 0) {
|
|
for (let index = 0; index < Clothe.length; index++) {
|
|
$(".clothe_conatiner").append(`
|
|
<button class="clothe_element" onclick="SendClothe(${index})">
|
|
<div class="name">${Clothe[index].label}</div>
|
|
<div class="arrows"></div>
|
|
</button>
|
|
`)
|
|
}
|
|
} else {
|
|
$(".clothe_conatiner").html("There are no available clothes")
|
|
}
|
|
BackgroundBlurFunction(BGBlur)
|
|
BackgroundBlur("plugin3", 'panel_clothe')
|
|
}
|
|
else if (data.action === "FadeOut") {
|
|
$('.loading_screen').css('display', 'block')
|
|
$('.top_box').css('animation', 'box 0.7s ease both')
|
|
$('.bottom_box').css('animation', 'bottom_box 0.7s ease both')
|
|
$('.appear_con').css('animation', 'logo_container 0.7s ease both 0.6s')
|
|
}
|
|
else if (data.action === "FadeIn") {
|
|
$('.top_box').css('animation', 'reverse_box 0.7s ease both 0.6s')
|
|
$('.bottom_box').css('animation', 'reverse_bottom_box 0.7s ease both 0.6s')
|
|
$('.appear_con').css('animation', 'reverse_logo_container 0.7s ease both')
|
|
if (Loader){
|
|
clearTimeout(Loader)
|
|
}
|
|
Loader = setTimeout(() => {
|
|
$('.loading_screen').css('display', 'none')
|
|
Loader = false
|
|
}, 1200);
|
|
}
|
|
else if (data.action === "close") {
|
|
Close()
|
|
}
|
|
})
|
|
|
|
document.onkeydown = function(data) {
|
|
if (event.key == 'Escape') {
|
|
Close()
|
|
}
|
|
|
|
if (event.key == 'Backspace') {
|
|
UnselectFurniture()
|
|
}
|
|
}
|
|
|
|
function Close() {
|
|
hide('properties_menu')
|
|
hide('property_creation_menu')
|
|
hide('property_purchase_menu')
|
|
hide('admin_menu')
|
|
hide('question_panel')
|
|
hide('data_entry_panel')
|
|
hide('property_sell_menu')
|
|
hide('balance_panel')
|
|
hide('furniture_menu')
|
|
hide('tutorial_menu')
|
|
hide('property_purchase_menu_from_rent')
|
|
hide('clothe_menu')
|
|
ResetFurniturePanel()
|
|
$('.property_sell_menu').css('display', 'none')
|
|
$('.property_purchase_menu_from_rent').css('display', 'none')
|
|
$('.admin_menu .panel').css("filter", "brightness(100%)")
|
|
$('.properties_menu .panel').css("filter", "brightness(100%)")
|
|
document.removeEventListener("click", handleClick)
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "close"}))
|
|
}
|
|
|
|
function BackgroundBlurFunction(data){
|
|
BGBlur = data
|
|
if (!BGBlur){
|
|
document.querySelectorAll('*').forEach(el => {
|
|
el.style.backdropFilter = 'none';
|
|
});
|
|
$('.panel').css('background-color', 'background-color: rgba(61, 65, 70, 1);')
|
|
}
|
|
}
|
|
|
|
function UnselectFurniture(){
|
|
window.postMessage({ action: 'HideFurnitureInfos' }, '*');
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "unselectFurniture"}))
|
|
}
|
|
|
|
function SendClothe(skin) {
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({
|
|
action: "cloakroom",
|
|
skin
|
|
}))
|
|
}
|
|
|
|
function OpenTutorialPanel(OpenedFrom){
|
|
TutorialImages = {
|
|
properties: [
|
|
['https://i.ibb.co/XZN7KTDZ/tutorial-properties.png', t('properties_1')],
|
|
['https://i.ibb.co/d4PkN2By/tutorial-messages.png', t('properties_2')],
|
|
['https://i.ibb.co/7JFP5xyd/tutorial-rename.png', t('properties_3')],
|
|
['https://i.ibb.co/JWGCpZ7j/tutorial-keys.png', t('properties_4')]
|
|
],
|
|
controls: [
|
|
['https://i.ibb.co/93gc4nzP/tutorial-bills.png', t('controls_1')],
|
|
['https://i.ibb.co/TDRzV3Zm/tutorial-rent.png', t('controls_2')],
|
|
['https://i.ibb.co/60CPZ274/tutorial-security.png', t('controls_3')],
|
|
['https://i.ibb.co/FkJxZFj4/tutorial-paints.png', t('controls_4')]
|
|
],
|
|
cameras: [
|
|
['https://i.ibb.co/qLB19T8G/tutorial-cameras.png', t('cameras_1')]
|
|
],
|
|
furnitures: [
|
|
['https://i.ibb.co/CpYnhRh7/tutorial-furniture-1.png', t('furnitures_1')],
|
|
['https://i.ibb.co/DfRfdxwQ/tutorial-furniture-2.png', t('furnitures_2')]
|
|
],
|
|
}
|
|
|
|
OpenedTutoralFrom = OpenedFrom
|
|
TutorialTable = []
|
|
CurrentTutorialPage = 0
|
|
if (OpenedFrom == 'properties_menu'){
|
|
if (CurrentPage == 'garage'){
|
|
return
|
|
}
|
|
TutorialTable = TutorialImages[CurrentPage]
|
|
hide('properties_menu')
|
|
}
|
|
else if(OpenedFrom == 'furniture'){
|
|
TutorialTable = TutorialImages['furnitures']
|
|
}
|
|
|
|
$(".page_chooser#tutorial_chooser").html('')
|
|
for (let i = 0; i < TutorialTable.length; i++) {
|
|
$(".page_chooser#tutorial_chooser").append(`
|
|
<button class="page_element" id='page_${i}_' onclick='ChooseTutorialPage(${i})'></button>
|
|
`)
|
|
}
|
|
|
|
$('.image_previewer').css('background-image', 'url("'+TutorialTable[CurrentTutorialPage][0]+'")')
|
|
$('.image_previewer .text').html(TutorialTable[CurrentTutorialPage][1])
|
|
document.getElementById('page_'+CurrentTutorialPage+'_').classList.add('choosed')
|
|
|
|
show('tutorial_menu')
|
|
BackgroundBlur("plugin_tutorial", 'image_container')
|
|
}
|
|
|
|
function SwitchTutorialPage(id){
|
|
if (id == 'left_arrow'){
|
|
if (CurrentTutorialPage > 0){
|
|
CurrentTutorialPage = CurrentTutorialPage - 1
|
|
}
|
|
}
|
|
else{
|
|
if (TutorialTable.length > CurrentTutorialPage+1){
|
|
CurrentTutorialPage = CurrentTutorialPage + 1
|
|
}
|
|
}
|
|
|
|
$('.image_previewer').css('background-image', 'url("'+TutorialTable[CurrentTutorialPage][0]+'")')
|
|
$('.image_previewer .text').html(TutorialTable[CurrentTutorialPage][1])
|
|
|
|
for (let i = 0; i < TutorialTable.length; i++) {
|
|
document.getElementById('page_'+i+'_').classList.remove('choosed')
|
|
}
|
|
document.getElementById('page_'+CurrentTutorialPage+'_').classList.add('choosed')
|
|
}
|
|
|
|
function ChooseTutorialPage(id){
|
|
for (let i = 0; i < TutorialTable.length; i++) {
|
|
document.getElementById('page_'+i+'_').classList.remove('choosed')
|
|
}
|
|
document.getElementById('page_'+id+'_').classList.add('choosed')
|
|
CurrentTutorialPage = id
|
|
|
|
$('.image_previewer').css('background-image', 'url("'+TutorialTable[CurrentTutorialPage][0]+'")')
|
|
$('.image_previewer .text').html(TutorialTable[CurrentTutorialPage][1])
|
|
}
|
|
|
|
function CreateApartmenteMenu(){
|
|
$('.apartments_container').html('')
|
|
for (let i = 0; i < ApartmentTable.length; i++) {
|
|
let status_txt
|
|
let status_color
|
|
if (ApartmentTable[i].owner == 'owned' || ApartmentTable[i].owner == 'rented'){
|
|
status_txt = t('owned_status')
|
|
if (ApartmentTable[i].owner == 'owned'){ApartmentTable[i].owner = t('owned'); status_color = '#79CFE0'}else{ApartmentTable[i].owner = t('rented'); status_color = '#2B8AC5'}
|
|
}
|
|
else{
|
|
status_txt = t('price')
|
|
ApartmentTable[i].owner = ApartmentTable[i].owner+' '+Currency
|
|
status_color = '#79D7BE'
|
|
}
|
|
$('.apartments_container').append(`
|
|
<div class="apartment_element ${i == SelectedApartment?'selected':''}" id='apartment_${i}'>
|
|
${i == SelectedApartment?'<div class="selector"></div>':''}
|
|
<div class="label">${ApartmentTable[i].label}</div>
|
|
<div class="id">${ApartmentTable[i].propertyid}</div>
|
|
<div class="status_text">${status_txt}</div>
|
|
<div class="status" style='color: ${status_color}'>${ApartmentTable[i].owner}</div>
|
|
</div>
|
|
`)
|
|
}
|
|
|
|
document.getElementById("apartment_"+SelectedApartment).scrollIntoView({ behavior: "smooth", block: "center" });
|
|
}
|
|
|
|
function CreateVehicleMenu(){
|
|
$('.vehicle_name').html(VehicleData.name)
|
|
$('.vehicle_plate').html(VehicleData.plate)
|
|
|
|
$(".vehicle_info img").attr("src", "assets/"+VehicleData.type+".png");
|
|
|
|
if (VehicleRepairing){
|
|
$('.progress_line').css('width', (VehicleData.ostime-VehicleData.stored)/VehicleData.repairtime*100+"%")
|
|
if (0 > VehicleData.repairtime-(VehicleData.ostime-VehicleData.stored)){
|
|
$('.time').html(t('done'))
|
|
}
|
|
else{
|
|
$('.time').html(fancyTimeFormat3(VehicleData.repairtime-(VehicleData.ostime-VehicleData.stored)))
|
|
}
|
|
$('.vehicle_info .lock').css('display', "none")
|
|
$('.lockable').css('opacity', "1")
|
|
}
|
|
else{
|
|
$('.progress_line').css('width', "0%")
|
|
$('.time').html(t('locked'))
|
|
$('.vehicle_info .lock').css('display', "block")
|
|
$('.lockable').css('opacity', "0.3")
|
|
}
|
|
}
|
|
|
|
function ShowQuestionPanel(parentEl, type, data1, question){
|
|
show('question_panel')
|
|
$('.question_panel .title').html(question)
|
|
$(parentEl).css("filter", "brightness(70%)")
|
|
QuestionPanel = [parentEl, type, data1]
|
|
}
|
|
|
|
function CloseQuestionPanel(id){
|
|
$(QuestionPanel[0]).css("filter", "brightness(100%)")
|
|
hide('question_panel')
|
|
if (id == 'yes'){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: QuestionPanel[1], propertyID: QuestionPanel[2]}))
|
|
CurrentProperty = (CurrentPropertySelectionPage*6)-6
|
|
if (Myproperties){
|
|
SelectProperty(CurrentProperty)
|
|
}
|
|
if (document.getElementById('select_'+CurrentProperty)){
|
|
document.getElementById('select_'+CurrentProperty).disabled = true
|
|
}
|
|
}
|
|
}
|
|
|
|
function OpenDataEntryPanel(propertyID, title, type, data1){
|
|
DataEntryPropertyId = propertyID
|
|
DataEntryType = type
|
|
DataEntryData1 = data1
|
|
show('data_entry_panel')
|
|
$('.data_entry_panel .title').html(t(title))
|
|
$('.admin_menu .panel').css("filter", "brightness(70%)")
|
|
$('.properties_menu .panel').css("filter", "brightness(70%)")
|
|
}
|
|
|
|
function SendDataEntryBack(value){
|
|
$('.admin_menu .panel').css("filter", "brightness(100%)")
|
|
$('.properties_menu .panel').css("filter", "brightness(100%)")
|
|
hide('data_entry_panel')
|
|
if (value){
|
|
if (DataEntryType == 'switch'){
|
|
newOwner = document.getElementById('data_in_1').value
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'switchOwnerOfProperty', propertyID: DataEntryPropertyId, newOwner}))
|
|
}
|
|
else if (DataEntryType == 'attach'){
|
|
attachedPropertyID = document.getElementById('data_in_1').value.toUpperCase()
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'attachProperty', propertyID: DataEntryPropertyId, attachedPropertyID}))
|
|
}
|
|
else if (DataEntryType == 'setCameraURL'){
|
|
url = document.getElementById('data_in_1').value
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'setupCamURL', propertyID: DataEntryPropertyId, url, objectid:DataEntryData1}))
|
|
}
|
|
else if (DataEntryType == 'setPropertyURL'){
|
|
url = document.getElementById('data_in_1').value
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'setupPropertyURL', propertyID: DataEntryPropertyId, url}))
|
|
}
|
|
}
|
|
document.getElementById('data_in_1').value = ''
|
|
}
|
|
|
|
function OpenSellMenu(ChoosedProperty){
|
|
ChoosedPropertyForSell = ChoosedProperty
|
|
setTimeout(() => {
|
|
show('property_sell_menu')
|
|
ChangeSellType('instant')
|
|
}, 100);
|
|
$('.properties_menu .panel').css("filter", "brightness(70%)")
|
|
}
|
|
|
|
function OpenPurchaseMenuFromProperties(ChoosedProperty){
|
|
ChosedPropertyForPurchase = ChoosedProperty
|
|
$('.property_purchase_menu_from_rent .number_container').html(Myproperties[ChosedPropertyForPurchase].purchasePrice.toLocaleString('hu-HU')+' '+Currency)
|
|
setTimeout(() => {
|
|
show('property_purchase_menu_from_rent')
|
|
}, 100);
|
|
$('.properties_menu .panel').css("filter", "brightness(70%)")
|
|
}
|
|
|
|
function SendPurchaseRentedProperty(){
|
|
hide('property_purchase_menu_from_rent')
|
|
$('.properties_menu .panel').css("filter", "brightness(100%)")
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'purchaseFromRent', propertyID:Myproperties[ChosedPropertyForPurchase].id}))
|
|
}
|
|
|
|
function SendChangePaint(){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'changePaint', propertyID:Myproperties[CurrentProperty].id, newPaint:ChoosedPaint}))
|
|
}
|
|
|
|
function OpenBalanceMenu(){
|
|
show('balance_panel')
|
|
$('.balance_panel .balance').html(Balance.toLocaleString('hu-HU')+' '+Currency)
|
|
$('.admin_menu .panel').css("filter", "brightness(70%)")
|
|
}
|
|
|
|
function CloseBalanceMenu(){
|
|
hide('balance_panel')
|
|
$('.admin_menu .panel').css("filter", "brightness(100%)")
|
|
}
|
|
|
|
function SendChangeBalance(id){
|
|
let amount = document.getElementById('balance_in').value
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: id, amount}))
|
|
document.getElementById('balance_in').value = ''
|
|
}
|
|
|
|
function CreateAdminMenu(filter){
|
|
$('.sold_btn').css("display", "none")
|
|
if (RealEstate){
|
|
CreateRealEstateMenu(filter)
|
|
}
|
|
else{
|
|
if (filter != null){
|
|
filter = filter.toUpperCase()
|
|
}
|
|
else{
|
|
filter = ''
|
|
}
|
|
$('.properties_container').html('')
|
|
if (AdminTable.length > 0){
|
|
for (const i in AdminTable) {
|
|
if (((AdminPropertyType == 'house_admin') && (AdminTable[i].ptype == 'house')) || ((AdminPropertyType == 'garage_admin') && (AdminTable[i].ptype == 'garage'))){
|
|
if (AdminTable[i].label.toUpperCase().indexOf(filter) > -1){
|
|
let AttachedProperty = ''
|
|
let IdButton = ``
|
|
if (AdminTable[i].ptype == 'garage' && AdminTable[i].house != 0){
|
|
AttachedProperty = '<span>H'+AdminTable[i].house +'</span> <i class="fa-solid fa-link"></i> '
|
|
}
|
|
else if (AdminTable[i].ptype == 'house' && AdminTable[i].garage != 0){
|
|
AttachedProperty = '<span>G'+AdminTable[i].garage +'</span> <i class="fa-solid fa-link"></i> '
|
|
}
|
|
|
|
if (AttachedProperty != ''){
|
|
IdButton = `<button class="id" onclick='ShowQuestionPanel(".admin_menu .panel", "detachProterty", "${AdminTable[i].id}", "${t('detaching_property_question')}")'>${AttachedProperty}${AdminTable[i].id}</button>`
|
|
}
|
|
else{
|
|
if (AdminTable[i].type == 'APARTMENT'){
|
|
IdButton = `<div class="id">${AdminTable[i].id}</div>`
|
|
}
|
|
else{
|
|
IdButton = `<button class="id" onclick='OpenDataEntryPanel("${AdminTable[i].id}", "attach_property", "attach")'><i class="fa-solid fa-link text-white"></i> ${AdminTable[i].id}</button>`
|
|
}
|
|
}
|
|
|
|
$('.properties_container').append(`
|
|
<div class="property_element ${AdminTable[i].type == 'APARTMENT'?'blue':''}">
|
|
<div class="preview" style='background-image: url("${AdminTable[i].url}")'></div>
|
|
<button class="teleport_btn" onclick='TeleportToProperty("${AdminTable[i].id}")'><i class="fa-solid fa-eye"></i></button>
|
|
${AdminTable[i].type == 'APARTMENT'?'':`<button class="delete_btn" onclick='ShowQuestionPanel(".admin_menu .panel", "deleteProperty", "${AdminTable[i].id}", "${t('delete_property_question')}")'><i class="fa-solid fa-trash"></i></button>`}
|
|
<div class="label">${AdminTable[i].label}</div>
|
|
${IdButton}
|
|
<div class="price">${AdminTable[i].salePrice.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
<div class="middle_title">${t('owner')}</div>
|
|
<div class="middle_data">${AdminTable[i].owner}</div>
|
|
<div class="row p-0 m-0" style="position: absolute; bottom: 0px; left: 0px; width: 100%;">
|
|
<div class="col p-2 d-flex flex-column align-items-center justify-content-center">
|
|
<button class="admin_btn" onclick='ShowQuestionPanel(".admin_menu .panel", "deleteOwnerOfProperty", "${AdminTable[i].id}", "${t('delete_property_owner_question')}")'>${t("remove")}</button>
|
|
</div>
|
|
<div class="col p-2 d-flex flex-column align-items-center justify-content-center">
|
|
<button class="admin_btn blue" onclick='OpenDataEntryPanel("${AdminTable[i].id}", "switch_owner", "switch")'>${t('switch')}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else{
|
|
$('.properties_container').html(`<div class="text">${t('no_properties_to_show')} <br> <i class="fa-solid fa-face-sad-tear"></i></div>`)
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
function CreateRealEstateMenu(filter){
|
|
if (InSoldProperties){
|
|
ChangeSoldProperties(filter)
|
|
}
|
|
$('.balance_panel .balance').html(Balance.toLocaleString('hu-HU')+' '+Currency)
|
|
$('.sold_btn').css("display", "block")
|
|
if (!CanOpenBalance){
|
|
$('#balance_btn').css("display", "none")
|
|
}
|
|
if (filter != null){
|
|
filter = filter.toUpperCase()
|
|
}
|
|
else{
|
|
filter = ''
|
|
}
|
|
$('.properties_container').html('')
|
|
if (AdminTable.length > 0){
|
|
for (const i in AdminTable) {
|
|
if (((AdminPropertyType == 'house_admin') && (AdminTable[i].ptype == 'house')) || ((AdminPropertyType == 'garage_admin') && (AdminTable[i].ptype == 'garage'))){
|
|
if (AdminTable[i].label.toUpperCase().indexOf(filter) > -1){
|
|
$('.properties_container').append(`
|
|
<div class="property_element">
|
|
<div class="preview" style='background-image: url("${AdminTable[i].url}")'></div>
|
|
<div class="label">${AdminTable[i].label}</div>
|
|
<div class="id">${AdminTable[i].id}</div>
|
|
<div class="price">${AdminTable[i].salePrice.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
<div class="middle_title">${t('type')}</div>
|
|
<div class="middle_data">${AdminTable[i].type}</div>
|
|
<div class=" p-2 d-flex flex-column align-items-center justify-content-center" style="position: absolute; bottom: 0px; left: 0px; width: 100%;">
|
|
<button class="admin_btn red" onclick='ShowQuestionPanel(".admin_menu .panel", "deleteProperty", "${AdminTable[i].id}", "${t('delete_property_question')}")'>${t('delete')}</button>
|
|
</div>
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else{
|
|
$('.properties_container').html(`<div class="text">${t('no_properties_to_show')} <br> <i class="fa-solid fa-face-sad-tear"></i></div>`)
|
|
}
|
|
}
|
|
|
|
function ChangeSoldProperties(filter){
|
|
if (!InSoldProperties){
|
|
InSoldProperties = true
|
|
document.getElementById("sold_btn").classList.add("active")
|
|
document.querySelector(".slider#admin").style.display = 'none'
|
|
|
|
if (filter != null){
|
|
filter = filter.toUpperCase()
|
|
}
|
|
else{
|
|
filter = ''
|
|
}
|
|
|
|
$('.properties_container').html('')
|
|
for (const i in SoldProperties) {
|
|
if (SoldProperties[i].label.toUpperCase().indexOf(filter) > -1){
|
|
$('.properties_container').append(`
|
|
<div class="property_element">
|
|
<div class="preview" style='background-image: url("${SoldProperties[i].url}")'></div>
|
|
<div class="label">${SoldProperties[i].label}</div>
|
|
<div class="id">${SoldProperties[i].id}</div>
|
|
<div class="row p-0" style='margin-top: 120px; margin-inline: 7px;'>
|
|
<div class="col p-0">
|
|
<div class="title">${t('sale_price')}</div>
|
|
</div>
|
|
<div class="col p-0">
|
|
<div class="number_container gray float-end">${SoldProperties[i].price.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style='margin-top: 10px; margin-inline: 7px;'>
|
|
<div class="col p-0">
|
|
<div class="title">${t('profit')}</div>
|
|
</div>
|
|
<div class="col-9 p-0">
|
|
<div class="row p-0 m-0">
|
|
<div class="col p-0">
|
|
<div class="number_container me-1 float-end">${Math.round((SoldProperties[i].profit/SoldProperties[i].price*100) * 10) / 10}%</div>
|
|
</div>
|
|
<div class="col p-0">
|
|
<div class="number_container float-end">${SoldProperties[i].profit.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
|
|
}
|
|
else{
|
|
InSoldProperties = false
|
|
document.getElementById("sold_btn").classList.remove("active")
|
|
document.querySelector(".slider#admin").style.display = 'block'
|
|
CreateRealEstateMenu(document.getElementById('admin_search_input').value)
|
|
}
|
|
}
|
|
|
|
function TeleportToProperty(propertyID){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "teleportToProperty", propertyID}))
|
|
}
|
|
|
|
function ChangeAdminPropertyType(id){
|
|
AdminPropertyType = id
|
|
let rect = document.getElementById(id).getBoundingClientRect();
|
|
let parentRect = document.querySelector(".slider_container#admin").getBoundingClientRect();
|
|
let elementCenterY = rect.left - parentRect.left;
|
|
document.querySelector(".slider#admin").style.left = `${elementCenterY-3}px`;
|
|
CreateAdminMenu(document.getElementById('admin_search_input').value)
|
|
}
|
|
|
|
function CreateHintMenu(value){
|
|
if (value){
|
|
$('.hint_menu .right_side').css('display', 'flex')
|
|
}
|
|
else{
|
|
$('.hint_menu .right_side').css('display', 'none')
|
|
}
|
|
|
|
$('.screen_title .text').html('<hr>'+ScreenTitle.toUpperCase())
|
|
$('.hint_menu .left_side').html('')
|
|
let HintCount = 0
|
|
HintTable.forEach(item => {
|
|
HintCount++
|
|
if (Array.isArray(item[0])) {
|
|
$('.hint_menu .left_side').append(`<div class="hint_element" id="hint${HintCount}"></div>`)
|
|
for (let i = 0; i < item[0].length; i++) {
|
|
$('.hint_menu .left_side #hint'+HintCount).append(`<div class="button_container">${item[0][i]}</div>`)
|
|
}
|
|
$('.hint_menu .left_side #hint'+HintCount).append(`<div class="text_container">${item[1]}</div>`)
|
|
|
|
} else {
|
|
$('.hint_menu .left_side').append(`<div class="hint_element"><div class="button_container">${item[0]}</div><div class="text_container">${item[1]}</div></div>`)
|
|
}
|
|
});
|
|
}
|
|
|
|
function PurchaseProperty(){
|
|
if (PurchaseType == 'purchase'){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "purchaseProperty"}))
|
|
}
|
|
else{
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "rentProperty"}))
|
|
}
|
|
}
|
|
|
|
function GiveBid(){
|
|
let amount = document.getElementById('bid_input').value.replace(/\s/g, "")
|
|
TriggerCallback('giveBid', {amount}).done((cb) => {
|
|
PurchaseData = cb
|
|
RefreshBid(false)
|
|
document.getElementById('bid_input').value = ''
|
|
});
|
|
}
|
|
|
|
function SendViewProperty(){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "viewProperty"}))
|
|
}
|
|
|
|
function CreatePurchaseMenu(){
|
|
if (PurchasePropertyData.ptype == 'house'){
|
|
if (PurchasePropertyData.type == 'APARTMENT'){
|
|
$('.property_purchase_menu .title').html(t('aparment_purchase'))
|
|
}
|
|
else{
|
|
$('.property_purchase_menu .title').html(t('house_purchase'))
|
|
}
|
|
|
|
document.querySelector(".property_purchase_menu .big_icon img").src = "assets/house.png"
|
|
|
|
$("#garage_section_con").css("display", "flex")
|
|
|
|
if (PurchasePropertyData.garage == 0){
|
|
document.getElementById("property_garage").classList.add("gray")
|
|
$(".property_purchase_menu #property_garage").html('<i class="fa-solid fa-xmark"></i>')
|
|
}
|
|
else{
|
|
document.getElementById("property_garage").classList.remove("gray")
|
|
$(".property_purchase_menu #property_garage").html('<i class="fa-solid fa-check"></i>')
|
|
}
|
|
}
|
|
else{
|
|
$("#garage_section_con").css("display", "none")
|
|
$('.property_purchase_menu .title').html(t('garage_purchase'))
|
|
document.querySelector(".property_purchase_menu .big_icon img").src = "assets/garage.png"
|
|
}
|
|
|
|
if (PurchasePropertyData.type == 'MLO'){
|
|
$('.view_btn').css('display', 'none')
|
|
}
|
|
else{
|
|
$('.view_btn').css('display', 'block')
|
|
}
|
|
|
|
if (PurchasePropertyData.rentable){
|
|
document.getElementById('rent').disabled = false
|
|
}
|
|
else{
|
|
document.getElementById('rent').disabled = true
|
|
}
|
|
|
|
$(".property_purchase_menu .property_name").html(PurchasePropertyData.label)
|
|
$(".property_purchase_menu .property_street").html(PurchasePropertyData.address)
|
|
$(".property_purchase_menu .property_image_con").css('background-image', "url("+PurchasePropertyData.url+")")
|
|
$(".property_purchase_menu #property_debt").html(PropertyDebt.toLocaleString('hu-HU')+' '+Currency)
|
|
$(".property_purchase_menu #cost_of_utilities").html(PurchaseData.utilities.toLocaleString('hu-HU')+' '+Currency+' / '+BillingCycle+' '+t('days'))
|
|
|
|
if (PropertyDebt > 0){
|
|
document.getElementById("property_debt").classList.add("red")
|
|
}
|
|
else{
|
|
document.getElementById("property_debt").classList.remove("red")
|
|
}
|
|
|
|
RefreshBid(true)
|
|
ChangePurchaseType('purchase')
|
|
}
|
|
|
|
function RefreshBid(first){
|
|
if (first){
|
|
$('#property_price_container').html('<div class="number_container float-end" id="property_price"></div>')
|
|
}
|
|
else{
|
|
$('#property_price_container').html(`
|
|
<div class="row p-0 m-0">
|
|
<div class="col p-0">
|
|
<div class="number_container small float-end" id="property_deal_percentage"></div>
|
|
</div>
|
|
<div class="col p-0">
|
|
<div class="number_container float-end" id="property_price"></div>
|
|
</div>
|
|
</div>
|
|
`)
|
|
let Percentage = Math.round((100-(PurchaseData.price/PurchaseData.originalPrice)*100) * 10) / 10
|
|
if (Percentage > 0){
|
|
$(".property_purchase_menu #property_deal_percentage").html('<i class="fa-solid fa-caret-down"></i> '+Percentage+'%')
|
|
}
|
|
}
|
|
|
|
$(".property_purchase_menu #property_price").html(PurchaseData.price.toLocaleString('hu-HU')+' '+Currency)
|
|
$(".patience_line").css("width", PurchaseData.patience+"%")
|
|
|
|
if (PurchaseData.patience >= 75){
|
|
$(".patience_line").css("background-color", "#79D7BE")
|
|
}
|
|
else if (PurchaseData.patience >= 25){
|
|
$(".patience_line").css("background-color", "#D7CF79")
|
|
}
|
|
else {
|
|
$(".patience_line").css("background-color", "#F95454")
|
|
}
|
|
}
|
|
|
|
function ChangeSellType(id){
|
|
let rect = document.getElementById(id).getBoundingClientRect();
|
|
let parentRect = document.querySelector(".slider_container#sell").getBoundingClientRect();
|
|
let elementCenterY = rect.left - parentRect.left;
|
|
if (elementCenterY < 7){elementCenterY = 7}
|
|
document.querySelector(".slider#sell").style.left = `${elementCenterY}px`;
|
|
|
|
let SellPrice = (Myproperties[ChoosedPropertyForSell].purchasePrice*SellToGameMultiplier).toLocaleString('hu-HU')+' '+Currency
|
|
let BuyPrice = Myproperties[ChoosedPropertyForSell].purchasePrice.toLocaleString('hu-HU')+' '+Currency
|
|
let MaxPrice = (Myproperties[ChoosedPropertyForSell].purchasePrice*MaxDelayedPriceMultiplier).toLocaleString('hu-HU')+' '+Currency
|
|
if (Myproperties[ChoosedPropertyForSell].garage != 0){
|
|
for (let i = 0; i < Myproperties.length; i++) {
|
|
if (Myproperties[i].id == 'G'+Myproperties[ChoosedPropertyForSell].garage){
|
|
SellPrice = ((Myproperties[i].purchasePrice+Myproperties[ChoosedPropertyForSell].purchasePrice)*SellToGameMultiplier).toLocaleString('hu-HU')+' '+Currency
|
|
BuyPrice = (Myproperties[i].purchasePrice+Myproperties[ChoosedPropertyForSell].purchasePrice).toLocaleString('hu-HU')+' '+Currency
|
|
MaxPrice = ((Myproperties[i].purchasePrice+Myproperties[ChoosedPropertyForSell].purchasePrice)*MaxDelayedPriceMultiplier).toLocaleString('hu-HU')+' '+Currency
|
|
}
|
|
}
|
|
}
|
|
|
|
if (SellType != id){
|
|
let container = document.getElementById('sell_container')
|
|
container.style.animation = 'none'
|
|
container.offsetHeight
|
|
container.style.animation = "Basic_popup 0.3s ease both"
|
|
}
|
|
|
|
SellType = id
|
|
if (SellType == 'instant'){
|
|
$('.property_sell_menu .container').html(`
|
|
<div class="row mt-3 mb-1" style="width: 420px; margin-left: 15px;">
|
|
<div class="col">
|
|
<div class="big_option_label">${t('buying_price')}<br><span>${t('amount_you_bought_the_property')}</span></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="number_container red float-end text-decoration-line-through">${BuyPrice}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3 mb-1" style="width: 420px; margin-left: 15px;">
|
|
<div class="col">
|
|
<div class="big_option_label">${t('price')}<br><span>${t('amount_you_get_instant')}</span></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="number_container float-end">${SellPrice}</div>
|
|
</div>
|
|
</div>
|
|
<button class="sell_property_btn" onclick="SellProperty()">${t('sell')}</button>
|
|
`)
|
|
}
|
|
else{
|
|
$('.property_sell_menu .container').html(`
|
|
<div class="description">${t('sell_property_to_player')}</div>
|
|
<div class="row mt-3 mb-1" style="width: 420px; margin-left: 15px;">
|
|
<div class="col">
|
|
<div class="big_option_label">${t('max_price')}<br><span>${t('max_you_can_sell')}</span></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="number_container float-end">${MaxPrice}</div>
|
|
</div>
|
|
</div>
|
|
<div class="option_label">${t('price')}</div>
|
|
<div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="sell_price" class="form-control" placeholder="${t('amount')}" style="height: 45px;" onkeypress="return isNumber(event)" oninput="formatMoney(this)">
|
|
</div>
|
|
<div class="option_label">${t('phone_number')}</div>
|
|
<div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="sell_phone" class="form-control" placeholder="012345678" style="height: 45px;">
|
|
</div>
|
|
<button class="sell_property_btn" onclick="SellProperty()">${t('sell')}</button>
|
|
`)
|
|
}
|
|
}
|
|
|
|
function SellProperty(){
|
|
let salePrice
|
|
let phoneNumber
|
|
if (document.getElementById('sell_price') != undefined){
|
|
salePrice = document.getElementById('sell_price').value.replace(/\s/g, "")
|
|
phoneNumber = document.getElementById('sell_phone').value
|
|
}
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "saleProperty", propertyID:Myproperties[ChoosedPropertyForSell].id, sellType:SellType, salePrice, phoneNumber}))
|
|
hide('property_sell_menu')
|
|
$('.properties_menu .panel').css("filter", "brightness(100%)")
|
|
CurrentProperty = (CurrentPropertySelectionPage*6)-6
|
|
SelectProperty(CurrentProperty)
|
|
if (document.getElementById('select_'+CurrentProperty)){
|
|
document.getElementById('select_'+CurrentProperty).disabled = true
|
|
}
|
|
}
|
|
|
|
function CancelSaleProperty(ChoosedProperty){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "cancelSale", propertyID:Myproperties[ChoosedProperty].id}))
|
|
}
|
|
|
|
function ChangePurchaseType(id){
|
|
let rect = document.getElementById(id).getBoundingClientRect();
|
|
let parentRect = document.querySelector(".slider_container#purchase").getBoundingClientRect();
|
|
let elementCenterY = rect.left - parentRect.left;
|
|
if (elementCenterY == 0){elementCenterY = 7}
|
|
document.querySelector(".slider#purchase").style.left = `${elementCenterY}px`;
|
|
PurchaseType = id
|
|
|
|
if (id == 'purchase'){
|
|
$('.property_rent_part').css('display', 'none')
|
|
$('.property_purchase_part').css('display', 'flex')
|
|
|
|
if (PurchasePropertyData.ptype == 'house'){
|
|
$('.property_purchase_menu .title').html(t('house_purchase'))
|
|
}
|
|
else{
|
|
$('.property_purchase_menu .title').html(t('garage_purchase'))
|
|
}
|
|
|
|
if (PurchasePropertyData.phone != '' && PurchasePropertyData.phone != null){
|
|
$('.offer_part').css('display', 'none')
|
|
$(".property_phone").css('display', 'flex')
|
|
$("#property_phone").html(PurchasePropertyData.phone)
|
|
}
|
|
else{
|
|
$('.offer_part').css('display', 'flex')
|
|
$(".property_phone").css('display', 'none')
|
|
}
|
|
|
|
$("#purchase_property_btn").html(t('purchase'))
|
|
}
|
|
else{
|
|
$('.property_purchase_part').css('display', 'none')
|
|
$('.property_rent_part').css('display', 'flex')
|
|
|
|
if (PurchasePropertyData.ptype == 'house'){
|
|
$('.property_purchase_menu .title').html(t('house_rent'))
|
|
}
|
|
else{
|
|
$('.property_purchase_menu .title').html(t('garage_rent'))
|
|
}
|
|
|
|
$("#purchase_property_btn").html(t('rent'))
|
|
$(".property_purchase_menu #property_price").html(PurchaseData.price.toLocaleString('hu-HU')+' '+Currency)
|
|
$(".property_purchase_menu #property_rent").html(PurchaseData.rent.toLocaleString('hu-HU')+' '+Currency)
|
|
}
|
|
}
|
|
|
|
function CreatePropertyCreation(Type){
|
|
$('.dropdown_container .dropdown-menu').html('')
|
|
for (const key in PropertyTypes['SHELL']) {
|
|
$('.dropdown_container .dropdown-menu').append(`
|
|
<li><button class="dropdown-item" id="type_${key}" onclick="ChangeDropdownText('${PropertyTypes['SHELL'][key].label}', '${key}')">${PropertyTypes['SHELL'][key].label}</button></li>
|
|
`)
|
|
}
|
|
|
|
if (PropertyCreationPanelType != Type){
|
|
document.getElementById('rentable_input').checked = false
|
|
document.getElementById('property_name').value = ''
|
|
document.getElementById('property_price').value = ''
|
|
document.getElementById('property_img').value = ''
|
|
document.getElementById('street_number').value = ''
|
|
document.getElementById('garage_id_input').value = ''
|
|
document.getElementById('vehicle_exit').value = ''
|
|
$('.option_dropdown_btn').html(t('choose'))
|
|
}
|
|
|
|
if (Type == 'house'){
|
|
$('.property_creation_menu .title').html(t('house_creation'))
|
|
$('.house_con').css("display", "block")
|
|
$('.garage_con').css("display", "none")
|
|
document.querySelector(".big_icon.gray img").src = "assets/house.png"
|
|
|
|
$('.option_container .row').html(`
|
|
<div class="col d-flex flex-column align-items-center justify-content-center">
|
|
<div class="check_option">SHELL</div>
|
|
<div class="form-check custom-checkbox">
|
|
<input class="form-check-input" type="radio" name="hTypeRadio" id="SHELL" checked onclick="ChangeProperyInType(id)">
|
|
</div>
|
|
</div>
|
|
<div class="col d-flex flex-column align-items-center justify-content-center">
|
|
<div class="check_option">IPL</div>
|
|
<div class="form-check custom-checkbox">
|
|
<input class="form-check-input" type="radio" name="hTypeRadio" id="IPL" onclick="ChangeProperyInType(id)">
|
|
</div>
|
|
</div>
|
|
<div class="col d-flex flex-column align-items-center justify-content-center">
|
|
<div class="check_option">MLO</div>
|
|
<div class="form-check custom-checkbox">
|
|
<input class="form-check-input" type="radio" name="hTypeRadio" id="MLO" onclick="ChangeProperyInType(id)">
|
|
</div>
|
|
</div>
|
|
`)
|
|
}
|
|
else{
|
|
$('.property_creation_menu .title').html(t('garage_creation'))
|
|
$('.house_con').css("display", "none")
|
|
$('.garage_con').css("display", "block")
|
|
document.querySelector(".big_icon.gray img").src = "assets/garage.png"
|
|
|
|
$('.option_container .row').html(`
|
|
<div class="col d-flex flex-column align-items-center justify-content-center">
|
|
<div class="check_option">SHELL</div>
|
|
<div class="form-check custom-checkbox">
|
|
<input class="form-check-input" type="radio" name="hTypeRadio" id="SHELL" checked onclick="ChangeProperyInType(id)">
|
|
</div>
|
|
</div>
|
|
<div class="col d-flex flex-column align-items-center justify-content-center">
|
|
<div class="check_option">IPL</div>
|
|
<div class="form-check custom-checkbox">
|
|
<input class="form-check-input" type="radio" name="hTypeRadio" id="IPL" onclick="ChangeProperyInType(id)">
|
|
</div>
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
|
|
/////////////////////////////////////////////////////////////////////[CAMERA PAGE]/////////////////////////////////////////////////////////////////
|
|
|
|
function ChooseCameraPage(element, number){
|
|
CurrentCameraSelectionPage = number+1
|
|
NumberOfPages = (Myproperties[CurrentProperty].cams.length-(Myproperties[CurrentProperty].cams.length%6))/6+1
|
|
for (let i = 0; i < NumberOfPages; i++) {
|
|
document.getElementById("page_"+i).classList.remove("choosed")
|
|
}
|
|
element.classList.add("choosed")
|
|
LoadCamerasForPage()
|
|
}
|
|
|
|
function CreateCameraPage(){
|
|
NumberOfPages = (Myproperties[CurrentProperty].cams.length-(Myproperties[CurrentProperty].cams.length%6))/6+1
|
|
|
|
$(".page_chooser#camera_chooser").html('')
|
|
if (Myproperties[CurrentProperty].cams.length > 0){
|
|
for (let i = 0; i < NumberOfPages; i++) {
|
|
if (CurrentCameraSelectionPage-1 == i){
|
|
$(".page_chooser#camera_chooser").append(`
|
|
<button class="page_element choosed" id='page_${i}' onclick='ChooseCameraPage(this, ${i})'></button>
|
|
`)
|
|
}
|
|
else{
|
|
$(".page_chooser#camera_chooser").append(`
|
|
<button class="page_element" id='page_${i}' onclick='ChooseCameraPage(this, ${i})'></button>
|
|
`)
|
|
}
|
|
}
|
|
|
|
LoadCamerasForPage()
|
|
}
|
|
else{
|
|
$(".list_container#cam_list").html("<div class='text'>You don't have any cameras. Buy one from the electronics category to use it.</div>")
|
|
}
|
|
|
|
}
|
|
|
|
function LoadCamerasForPage(){
|
|
$(".list_container#cam_list").html('')
|
|
for (let i = (CurrentCameraSelectionPage*6)-6; i < CurrentCameraSelectionPage*6; i++) {
|
|
if (Myproperties[CurrentProperty].cams[i] != undefined){
|
|
if (Myproperties[CurrentProperty].cams[i].camdata != undefined){
|
|
$(".list_container#cam_list").append(`
|
|
<div class="list_element home_con">
|
|
<div class="preview" style='background-image: url("${Myproperties[CurrentProperty].cams[i].camdata.url}");'></div>
|
|
<button class="small_icon gray house_icon" onclick='OpenDataEntryPanel("${Myproperties[CurrentProperty].id}", "set_camera_url", "setCameraURL", "${Myproperties[CurrentProperty].cams[i].id}")'><img src="assets/camera.png"></button>
|
|
<div class="type">CAM #${i+1}</div>
|
|
<div class="title">${t('state')}</div>
|
|
${Myproperties[CurrentProperty].cams[i].status?`
|
|
<div class="relation">${t('online')}</div>
|
|
<button class="select_btn" onclick='SendCameraSelect(${Myproperties[CurrentProperty].cams[i].id})'>${t('select')}</button>
|
|
`:`
|
|
<div class="relation red">${t('offline')}</div>
|
|
<button class="select_btn" disabled onclick='SendCameraSelect(${Myproperties[CurrentProperty].cams[i].id})'>${t('select')}</button>
|
|
`}
|
|
|
|
</div>
|
|
`)
|
|
}
|
|
else{
|
|
$(".list_container#cam_list").append(`
|
|
<div class="list_element home_con">
|
|
<div class="preview" style='background-image: url("assets/camera_preview.png");'></div>
|
|
<button class="small_icon gray house_icon" onclick='OpenDataEntryPanel("${Myproperties[CurrentProperty].id}", "set_camera_url", "setCameraURL", "${Myproperties[CurrentProperty].cams[i].id}")'><img src="assets/camera.png"></button>
|
|
<div class="type">CAM #${i+1}</div>
|
|
<div class="title">${t('state')}</div>
|
|
${Myproperties[CurrentProperty].cams[i].status?`
|
|
<div class="relation">${t('online')}</div>
|
|
<button class="select_btn green" onclick='SendCameraSetup(${Myproperties[CurrentProperty].cams[i].id})'>${t('setup')}</button>
|
|
`:`
|
|
<div class="relation red">${t('offline')}</div>
|
|
<button class="select_btn" disabled onclick='SendCameraSetup(${Myproperties[CurrentProperty].cams[i].id})'>${t('setup')}</button>
|
|
`}
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
else{
|
|
$(".list_container#cam_list").append(`
|
|
<div class="list_element empty home_con">
|
|
<div class="preview">X</div>
|
|
<div class="title"></div>
|
|
<div class="relation"></div>
|
|
<div class="select_btn"></div>
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
}
|
|
|
|
function SendCameraSetup(objectid){
|
|
Close()
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "cameraSetup", propertyID:Myproperties[CurrentProperty].id, objectid}))
|
|
}
|
|
|
|
function SendCameraSelect(objectid){
|
|
Close()
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "cameraSelect", propertyID:Myproperties[CurrentProperty].id, objectid}))
|
|
}
|
|
|
|
/////////////////////////////////////////////////////////////////////[PROPERTY PAGE]/////////////////////////////////////////////////////////////////
|
|
|
|
function ChoosePropertyPage(element, number){
|
|
CurrentPropertySelectionPage = number+1
|
|
for (let i = 0; i < NumberOfPages; i++) {
|
|
document.getElementById("page_"+i).classList.remove("choosed")
|
|
}
|
|
element.classList.add("choosed")
|
|
LoadPropertiesForPage()
|
|
}
|
|
|
|
function CreatePropertyPage(){
|
|
NumberOfPages = (Myproperties.length-(Myproperties.length%7))/7+1
|
|
|
|
$(".page_chooser#property_chooser").html('')
|
|
for (let i = 0; i < NumberOfPages; i++) {
|
|
if (CurrentPropertySelectionPage-1 == i){
|
|
$(".page_chooser#property_chooser").append(`
|
|
<button class="page_element choosed" id='page_${i}' onclick='ChoosePropertyPage(this, ${i})'></button>
|
|
`)
|
|
}
|
|
else{
|
|
$(".page_chooser#property_chooser").append(`
|
|
<button class="page_element" id='page_${i}' onclick='ChoosePropertyPage(this, ${i})'></button>
|
|
`)
|
|
}
|
|
}
|
|
|
|
LoadPropertiesForPage()
|
|
CreateMessages()
|
|
|
|
document.addEventListener("click", handleClick);
|
|
}
|
|
|
|
function LoadPropertiesForPage(){
|
|
$(".list_container#property_list").html('')
|
|
for (let i = (CurrentPropertySelectionPage*6)-6; i < CurrentPropertySelectionPage*6; i++) {
|
|
if (Myproperties[i] != undefined){
|
|
let AttachedProperty = ''
|
|
if (Myproperties[i].ptype == 'garage' && Myproperties[i].house != 0){
|
|
AttachedProperty = '<span>H'+Myproperties[i].house +'</span> <i class="fa-solid fa-link"></i> '
|
|
}
|
|
else if (Myproperties[i].ptype == 'house' && Myproperties[i].garage != 0){
|
|
AttachedProperty = '<span>G'+Myproperties[i].garage +'</span> <i class="fa-solid fa-link"></i> '
|
|
}
|
|
|
|
let PropertyButton
|
|
if (!Myproperties[i].isRented){
|
|
if (Myproperties[i].forSale && (AttachedProperty == '' ||(AttachedProperty != '' && Myproperties[i].ptype != 'garage'))){
|
|
PropertyButton = `<button class="sell_btn gray" onclick="CancelSaleProperty('${i}')"><i class="fa-solid fa-xmark"></i></button>`
|
|
}
|
|
else if(AttachedProperty != '' && Myproperties[i].ptype == 'garage'){
|
|
PropertyButton = ''
|
|
}
|
|
else{
|
|
PropertyButton = `<button class="sell_btn" onclick="OpenSellMenu('${i}')"><i class="fa-solid fa-tags"></i></button>`
|
|
}
|
|
}
|
|
else{
|
|
if (AttachedProperty == '' ||(AttachedProperty != '' && Myproperties[i].ptype != 'garage')){
|
|
PropertyButton = `
|
|
<button class="sell_btn gray" onclick="ShowQuestionPanel('.properties_menu .panel', 'stopRent', '${Myproperties[i].id}', '${t('stop_renting_property_question')}')"><i class="fa-solid fa-pause"></i></button>
|
|
<button class="sell_btn green" onclick="OpenPurchaseMenuFromProperties('${i}')" style='margin-left:45px;'><i class="fa-solid fa-money-bill-1-wave"></i></button>`
|
|
}
|
|
else if(AttachedProperty != '' && Myproperties[i].ptype == 'garage'){
|
|
PropertyButton = ''
|
|
}
|
|
}
|
|
|
|
|
|
$(".list_container#property_list").append(`
|
|
<div class="list_element home_con">
|
|
<div class="preview" style='background-image: url("${Myproperties[i].url}");'></div>
|
|
${PropertyButton}
|
|
<button class="small_icon gray house_icon" onclick='OpenDataEntryPanel("${Myproperties[i].id}", "set_property_url", "setPropertyURL", "")'><img src="assets/${Myproperties[i].ptype}.png"></button>
|
|
<div class="label">${Myproperties[i].label}</div>
|
|
<div class="id">${AttachedProperty}${Myproperties[i].id}</div>
|
|
<div class="title">${t('tenure')}</div>
|
|
<div class="relation ${Myproperties[i].isRented?"blue":""}">${Myproperties[i].isRented?t('renter'):t('owner')}</div>
|
|
<button class="select_btn" id="select_${i}" onclick='SelectProperty(${i})' ${i==CurrentProperty?'disabled':''}>${t('select')}</button>
|
|
</div>
|
|
`)
|
|
}
|
|
else{
|
|
$(".list_container#property_list").append(`
|
|
<div class="list_element empty home_con">
|
|
<div class="preview">X</div>
|
|
<div class="title"></div>
|
|
<div class="relation"></div>
|
|
<div class="select_btn"></div>
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
|
|
if (CurrentProperty == null || ClosestProperty != null){
|
|
// Selects the closest of your properties from the menu
|
|
if (ClosestProperty != null){
|
|
for (let i = 0; i < Myproperties.length; i++) {
|
|
if (Myproperties[i].id == ClosestProperty){
|
|
if (document.getElementById('select_'+CurrentProperty)){
|
|
document.getElementById('select_'+CurrentProperty).disabled = false
|
|
}
|
|
if (document.getElementById('select_'+i)){
|
|
document.getElementById('select_'+i).disabled = true
|
|
}
|
|
if (CurrentProperty == null || ControlSectionState != Myproperties[i].ptype){
|
|
CurrentProperty = i
|
|
LoadControlSection()
|
|
}
|
|
CurrentProperty = i
|
|
LoadBasicPropertyDatas()
|
|
CreateMessages()
|
|
ClosestProperty = null
|
|
|
|
if (Myproperties[CurrentProperty].type != 'MLO'){
|
|
$('.door_lock_btn').css('display', 'none')
|
|
}
|
|
else{
|
|
$('.door_lock_btn').css('display', 'block')
|
|
}
|
|
$('.key_count').html(Myproperties[CurrentProperty].keysquantity)
|
|
return
|
|
}
|
|
}
|
|
CurrentProperty = (CurrentPropertySelectionPage*6)-6
|
|
SelectProperty(CurrentProperty)
|
|
document.getElementById('select_'+CurrentProperty).disabled = true
|
|
ClosestProperty = null
|
|
}
|
|
else{
|
|
CurrentProperty = (CurrentPropertySelectionPage*6)-6
|
|
SelectProperty(CurrentProperty)
|
|
document.getElementById('select_'+CurrentProperty).disabled = true
|
|
}
|
|
}
|
|
else if (CurrentProperty != null){
|
|
if (Myproperties[CurrentProperty].type != 'MLO'){
|
|
$('.door_lock_btn').css('display', 'none')
|
|
}
|
|
else{
|
|
$('.door_lock_btn').css('display', 'block')
|
|
}
|
|
$('.key_count').html(Myproperties[CurrentProperty].keysquantity)
|
|
}
|
|
|
|
}
|
|
|
|
function SelectProperty(number){
|
|
AllElements = document.getElementsByClassName('select_btn')
|
|
for (const key in AllElements) {
|
|
AllElements[key].disabled = false
|
|
}
|
|
|
|
if (document.getElementById('select_'+number)){
|
|
document.getElementById('select_'+number).disabled = true
|
|
}
|
|
|
|
CurrentProperty = number
|
|
LoadBasicPropertyDatas()
|
|
LoadControlSection()
|
|
CreateMessages()
|
|
|
|
if (Myproperties[CurrentProperty].type != 'MLO'){
|
|
$('.door_lock_btn').css('display', 'none')
|
|
}
|
|
else{
|
|
$('.door_lock_btn').css('display', 'block')
|
|
}
|
|
$('.key_count').html(Myproperties[CurrentProperty].keysquantity)
|
|
}
|
|
|
|
function LoadBasicPropertyDatas(){
|
|
document.getElementById('property_name_in').value = Myproperties[CurrentProperty].label
|
|
$(".properties_menu .street").html(Myproperties[CurrentProperty].address)
|
|
if (Myproperties[CurrentProperty].doorOpen){
|
|
$(".properties_menu .state#property_menu").html(t('open'))
|
|
$(".properties_menu .state#property_menu").css("color", '#79D7BE')
|
|
document.getElementById("header_door").classList.remove("red")
|
|
document.getElementById("header_door").classList.add("green")
|
|
}
|
|
else{
|
|
$(".properties_menu .state#property_menu").html(t('closed'))
|
|
$(".properties_menu .state#property_menu").css("color", '#F95454')
|
|
document.getElementById("header_door").classList.remove("green")
|
|
document.getElementById("header_door").classList.add("red")
|
|
}
|
|
|
|
}
|
|
|
|
function CreateMessages(){
|
|
$('.notifications').html("")
|
|
if (Myproperties[CurrentProperty].messages.length > 0){
|
|
for (let i = 0; i < Myproperties[CurrentProperty].messages.length; i++) {
|
|
let notify_icon
|
|
if (Myproperties[CurrentProperty].messages[i].type == 'check'){
|
|
notify_icon = '<i class="fa-solid fa-check"></i>'
|
|
}
|
|
else if(Myproperties[CurrentProperty].messages[i].type == 'alert'){
|
|
notify_icon = '<i class="fa-solid fa-exclamation"></i>'
|
|
}
|
|
else if(Myproperties[CurrentProperty].messages[i].type == 'info'){
|
|
notify_icon = '<i class="fa-solid fa-info"></i>'
|
|
}
|
|
else{
|
|
notify_icon = '<i class="fa-solid fa-dollar-sign"></i>'
|
|
}
|
|
|
|
let options = {year: "numeric", month: "2-digit", day: "2-digit"};
|
|
let date = new Date(Myproperties[CurrentProperty].messages[i].time * 1000);
|
|
|
|
$('.notifications').append(`
|
|
<div class="notify_element ${Myproperties[CurrentProperty].messages[i].type}">
|
|
<div class="type">${notify_icon}</div>
|
|
<div class="title">${Myproperties[CurrentProperty].messages[i].title}</div>
|
|
<div class="date">${date.toLocaleString("hu-HU", options)}</div>
|
|
<div class="message">${Myproperties[CurrentProperty].messages[i].message}</div>
|
|
</div>
|
|
`)
|
|
}
|
|
|
|
if (LastProperty == undefined || LastProperty != CurrentProperty){
|
|
let Notifies = document.getElementsByClassName("notify_element")
|
|
for (let index = 0; index < Notifies.length; index++) {
|
|
Notifies[index].style.animation = 'none'
|
|
Notifies[index].offsetHeight
|
|
Notifies[index].style.animation = "notify_element 0.4s ease both " + (index / 60) + "s"
|
|
}
|
|
}
|
|
}
|
|
else{
|
|
$('.notifications').html("<div class='text'>You don't have any messages!</div>")
|
|
}
|
|
|
|
LastProperty = CurrentProperty
|
|
|
|
const element = document.getElementById("notifications");
|
|
element.scrollTop = element.scrollHeight;
|
|
}
|
|
|
|
function LoadControlSection(){
|
|
ControlSectionState = Myproperties[CurrentProperty].ptype
|
|
if (Myproperties[CurrentProperty].ptype == 'house'){
|
|
$('.hidden_logo').css('opacity', '0')
|
|
$('.control_section#property_control').css('height', '275px')
|
|
$('.control_section#property_control').html(`
|
|
<div class="selector" id="property"></div>
|
|
<div class="control_btn" id="properties" onclick="SwitchPage(id)" style="background-image: url('assets/properties.png');"></div>
|
|
<div class="control_btn" id="controls" onclick="SwitchPage(id)" style="background-image: url('assets/layout.png');"></div>
|
|
<div class="control_btn" id="cameras" onclick="SwitchPage(id)" style="background-image: url('assets/camera.png');"></div>
|
|
<div class="control_btn" id="furnitures" onclick="SwitchPage(id)" style="background-image: url('assets/3d.png');"></div>
|
|
`)
|
|
}
|
|
else{
|
|
$('.hidden_logo').css('opacity', '1')
|
|
$('.control_section#property_control').css('height', '140px')
|
|
$('.control_section#property_control').html(`
|
|
<div class="selector" id="property"></div>
|
|
<div class="control_btn" id="properties" onclick="SwitchPage(id)" style="background-image: url('assets/properties.png');"></div>
|
|
<div class="control_btn" id="garage" onclick="SwitchPage(id)" style="background-image: url('assets/garage.png');"></div>
|
|
`)
|
|
}
|
|
}
|
|
|
|
function ChangePaint(id){
|
|
let PaintsLength = 0
|
|
for (const key in Myproperties[CurrentProperty].paints) {
|
|
PaintsLength = PaintsLength + 1
|
|
}
|
|
if (id == 'left_arrow'){
|
|
if (0 > ChoosedPaint - 1){
|
|
ChoosedPaint = PaintsLength - 1
|
|
}
|
|
else{
|
|
ChoosedPaint = ChoosedPaint - 1
|
|
}
|
|
}
|
|
else{
|
|
if (ChoosedPaint + 1 >= PaintsLength){
|
|
ChoosedPaint = 0
|
|
}
|
|
else{
|
|
ChoosedPaint = ChoosedPaint + 1
|
|
}
|
|
}
|
|
$('.paint_viewer').css('background-image', `url('${Myproperties[CurrentProperty].paints[ChoosedPaint].link}')`)
|
|
if (Myproperties[CurrentProperty].theme == ChoosedPaint){
|
|
$('#change_paint').css('display', 'none')
|
|
}
|
|
else{
|
|
$('#change_paint').css('display', 'block')
|
|
$('#change_paint').html(Myproperties[CurrentProperty].paints[ChoosedPaint].price.toLocaleString('hu-HU')+' '+Currency)
|
|
}
|
|
}
|
|
|
|
function SwitchPage(id, noanim){
|
|
CurrentPage = id
|
|
let rect = document.getElementById(id).getBoundingClientRect();
|
|
let parentRect = document.querySelector("#property_control").getBoundingClientRect();
|
|
let elementCenterY = rect.top - parentRect.top;
|
|
document.querySelector(".selector#property").style.top = `${elementCenterY}px`;
|
|
|
|
if (id == 'properties'){
|
|
if (BrutalKeys){
|
|
$('.right_container').html(`
|
|
<div class="key_section float-end home_con">
|
|
<div class="small_icon gold"><img src="assets/key.png"></div>
|
|
<div class="title">${t('remained')}</div>
|
|
<div class="key_count"></div>
|
|
<button class="door_lock_btn" onclick='SendOpenDoorLock()'><i class="fa-solid fa-lock"></i></button>
|
|
<div class="d-flex flex-wrap" style='margin-top:85px; margin-inline:9px;'>
|
|
<button class="key_btn" onclick='SendBuyKey()'><i class="fa-solid fa-cart-shopping"></i> ${t('key')}</button>
|
|
<div class="key_price" style='margin-left: auto;'>${KeyPrices.newkey .toLocaleString('hu-HU')+' '+Currency}</div>
|
|
</div>
|
|
<div class="d-flex flex-wrap" style='margin-top:12px; margin-inline:9px;'>
|
|
<button class="key_btn float-end" onclick='SendChangeLock()'><i class="fa-solid fa-unlock"></i> ${t('change')}</button>
|
|
<div class="key_price" style='margin-left: auto;'>${KeyPrices.lockreplacement.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
</div>
|
|
</div>
|
|
`)
|
|
}
|
|
else{
|
|
$('.right_container').html(`
|
|
<div class="key_section float-end home_con">
|
|
<div class="key_hider"></div>
|
|
<div class="lock"><i class="fa-solid fa-lock"></i></div>
|
|
<div class="key_text">Key System Locked<br><a onclick="window.invokeNative('openUrl', 'https://store.brutalscripts.com')" href="https://store.brutalscripts.com" rel="noopener noreferrer" target="_blank">store.brutalscripts.com</a></div>
|
|
<div class="small_icon gold"><img src="assets/key.png"></div>
|
|
<div class="title">${t('remained')}</div>
|
|
<div class="key_count"></div>
|
|
<button class="door_lock_btn" onclick='SendOpenDoorLock()'><i class="fa-solid fa-lock"></i></button>
|
|
<div class="d-flex flex-wrap" style='margin-top:85px; margin-inline:9px;'>
|
|
<button class="key_btn" disabled onclick='SendBuyKey()'><i class="fa-solid fa-cart-shopping"></i> ${t('key')}</button>
|
|
<div class="key_price" style='margin-left: auto;'>${KeyPrices.newkey .toLocaleString('hu-HU')+' '+Currency}</div>
|
|
</div>
|
|
<div class="d-flex flex-wrap" style='margin-top:12px; margin-inline:9px;'>
|
|
<button class="key_btn float-end" disabled onclick='SendChangeLock()'><i class="fa-solid fa-unlock"></i> ${t('change')}</button>
|
|
<div class="key_price" style='margin-left: auto;'>${KeyPrices.lockreplacement.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
</div>
|
|
</div>
|
|
`)
|
|
}
|
|
|
|
|
|
$('.bottom_container').html(`
|
|
<div class="page_chooser float-end me-3" id='property_chooser'>
|
|
<div class="page_element choosed"></div>
|
|
<div class="page_element"></div>
|
|
</div>
|
|
<div class="list_container" id="property_list">
|
|
|
|
|
|
</div>
|
|
`)
|
|
CreatePropertyPage()
|
|
LoadBasicPropertyDatas()
|
|
}
|
|
else if (id == 'controls'){
|
|
if (Myproperties[CurrentProperty].isRented){
|
|
$('.right_container').html(`
|
|
<div class="furniture_section float-end home_con">
|
|
<div class="big_icon green"><img src="assets/money.png"></div>
|
|
<div class="title">${t('rent')}</div>
|
|
<div class="label">${t('balance')}</div>
|
|
<div class="current_balance ${Myproperties[CurrentProperty].bills.rent > 0?'red':'green'}">${Myproperties[CurrentProperty].bills.rent.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
<button class="bottom_long_btn" onclick='SendPayBill("rent")' ${Myproperties[CurrentProperty].bills.rent > 0?'':'disabled'}>${Myproperties[CurrentProperty].bills.rent > 0?t('pay'):t('all_paid')}</button>
|
|
</div>
|
|
`)
|
|
}
|
|
else{
|
|
if (Myproperties[CurrentProperty].paints != null){
|
|
$('.right_container').html(`
|
|
<div class="furniture_section float-end home_con">
|
|
<div class="paint_viewer" style='background-image: url("${Myproperties[CurrentProperty].paints[Myproperties[CurrentProperty].theme].link}")'></div>
|
|
<div class="arrow_conatiner">
|
|
<button class="arrow_btn" id="left_arrow" onclick='ChangePaint(id)'><i class="fa-solid fa-caret-left"></i></button>
|
|
<button class="arrow_btn" id="right_arrow" onclick='ChangePaint(id)'><i class="fa-solid fa-caret-right"></i></button>
|
|
</div>
|
|
<button class="bottom_long_btn m-0" id='change_paint' style='width:auto; left:50%; transform: translate(-50%, 0%); padding-inline: 10px; display:none;' onclick='SendChangePaint()'>${Myproperties[CurrentProperty].paints[Myproperties[CurrentProperty].theme].price.toLocaleString('hu-HU')+' '+Currency}</button>
|
|
</div>
|
|
`)
|
|
}
|
|
else{
|
|
$('.right_container').html(`
|
|
<div class="furniture_section float-end home_con">
|
|
<div class="no_paint_text">${t('no_available_paints')}</div>
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
|
|
$('.bottom_container').html(`
|
|
<div class="energy_container">
|
|
<div class="energy_section home_con">
|
|
<div class="big_icon yellow"><img src="assets/flash.png"></div>
|
|
<div class="title">${t('electricity')}</div>
|
|
<div class="label">${t('balance')}</div>
|
|
<div class="current_balance ${Myproperties[CurrentProperty].bills.electricity > 0?'red':'green'}">${Myproperties[CurrentProperty].bills.electricity.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
<button class="bottom_long_btn" onclick='SendPayBill("electricity")' ${Myproperties[CurrentProperty].bills.electricity > 0?'':'disabled'}>${Myproperties[CurrentProperty].bills.electricity > 0?t('pay'):t('all_paid')}</button>
|
|
</div>
|
|
<div class="energy_section home_con">
|
|
<div class="big_icon gas"><img src="assets/gas.png"></div>
|
|
<div class="title">${t('gas')}</div>
|
|
<div class="label">${t('balance')}</div>
|
|
<div class="current_balance ${Myproperties[CurrentProperty].bills.gas > 0?'red':'green'}">${Myproperties[CurrentProperty].bills.gas.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
<button class="bottom_long_btn" onclick='SendPayBill("gas")' ${Myproperties[CurrentProperty].bills.gas > 0?'':'disabled'}>${Myproperties[CurrentProperty].bills.gas > 0?t('pay'):t('all_paid')}</button>
|
|
</div>
|
|
<div class="energy_section home_con">
|
|
<div class="big_icon blue"><img src="assets/water.png"></div>
|
|
<div class="title">${t('water')}</div>
|
|
<div class="label">${t('balance')}</div>
|
|
<div class="current_balance ${Myproperties[CurrentProperty].bills.water > 0?'red':'green'}">${Myproperties[CurrentProperty].bills.water.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
<button class="bottom_long_btn" onclick='SendPayBill("water")' ${Myproperties[CurrentProperty].bills.water > 0?'':'disabled'}>${Myproperties[CurrentProperty].bills.water > 0?t('pay'):t('all_paid')}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upgrade_container">
|
|
<div class="upgrade_section home_con" id="wifi_section">
|
|
<div class="big_icon wifi"><img src="assets/wifi.png"></div>
|
|
<div class="title">${t('wifi')}</div>
|
|
<div class="state">${Myproperties[CurrentProperty].securityData.wifi?t('unlocked'):t('locked')}</div>
|
|
<div class="description">${t('wifi_description')}</div>
|
|
<div class="label">${Myproperties[CurrentProperty].securityData.wifi?t('balance'):t('price')}</div>
|
|
<div class="current_balance ${Myproperties[CurrentProperty].bills.wifi > 0?'red':'green'}">${(Myproperties[CurrentProperty].securityData.wifi?Myproperties[CurrentProperty].bills.wifi:WifiUnlockPrice).toLocaleString('hu-HU')+' '+Currency}</div>
|
|
<button class="bottom_long_btn" onclick='SendPayBill("wifi")' ${Myproperties[CurrentProperty].bills.wifi == 0 && Myproperties[CurrentProperty].securityData.wifi?'disabled':''}>${Myproperties[CurrentProperty].securityData.wifi?t('pay'):t('unlock')}</button>
|
|
</div>
|
|
<div class="upgrade_section home_con" id="security_section">
|
|
<div class="big_icon red"><img src="assets/security.png"></div>
|
|
<div class="title">${t('security')}</div>
|
|
<div class="state">${t('level')} ${Myproperties[CurrentProperty].securityData.level}</div>
|
|
<div class="description">${t('security_description')}</div>
|
|
<div class="label">${t('next_level')}</div>
|
|
<div class="current_balance green">${Myproperties[CurrentProperty].securityData.nextPrice != undefined?Myproperties[CurrentProperty].securityData.nextPrice+' '+Currency:t('max')}</div>
|
|
<button class="bottom_long_btn" onclick='SendUpgradeSecurity()' ${Myproperties[CurrentProperty].securityData.nextPrice != undefined?'':'disabled'}>${Myproperties[CurrentProperty].securityData.maxLevel == true?t('max_level'):t('upgrade')}</button>
|
|
</div>
|
|
</div>
|
|
`)
|
|
CreateMessages()
|
|
LoadBasicPropertyDatas()
|
|
}
|
|
else if (id == 'garage'){
|
|
if (Myproperties[CurrentProperty].isRented){
|
|
$('.right_container').html(`
|
|
<div class="furniture_section float-end home_con">
|
|
<div class="big_icon green"><img src="assets/money.png"></div>
|
|
<div class="title">${t('rent')}</div>
|
|
<div class="label">${t('balance')}</div>
|
|
<div class="current_balance ${Myproperties[CurrentProperty].bills.rent > 0?'red':'green'}">${Myproperties[CurrentProperty].bills.rent.toLocaleString('hu-HU')+' '+Currency}</div>
|
|
<button class="bottom_long_btn" onclick='SendPayBill("rent")' ${Myproperties[CurrentProperty].bills.rent > 0?'':'disabled'}>${Myproperties[CurrentProperty].bills.rent > 0?t('pay'):t('all_paid')}</button>
|
|
</div>
|
|
`)
|
|
}
|
|
else{
|
|
if (Myproperties[CurrentProperty].paints != null){
|
|
$('.right_container').html(`
|
|
<div class="furniture_section float-end home_con">
|
|
<div class="paint_viewer" style='background-image: url("${Myproperties[CurrentProperty].paints[Myproperties[CurrentProperty].theme].link}")'></div>
|
|
<div class="arrow_conatiner">
|
|
<button class="arrow_btn" id="left_arrow" onclick='ChangePaint(id)'><i class="fa-solid fa-caret-left"></i></button>
|
|
<button class="arrow_btn" id="right_arrow" onclick='ChangePaint(id)'><i class="fa-solid fa-caret-right"></i></button>
|
|
</div>
|
|
<button class="bottom_long_btn m-0" id='change_paint' style='width:auto; left:50%; transform: translate(-50%, 0%); padding-inline: 10px; display:none;' onclick='SendChangePaint()'>${Myproperties[CurrentProperty].paints[Myproperties[CurrentProperty].theme].price.toLocaleString('hu-HU')+' '+Currency}</button>
|
|
</div>
|
|
`)
|
|
}
|
|
else{
|
|
$('.right_container').html(`
|
|
<div class="furniture_section float-end home_con">
|
|
<div class="no_paint_text">${t('no_available_paints')}</div>
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
|
|
$('.bottom_container').html(`
|
|
<div class="garage_section home_con">
|
|
<div class="title">${t('occupied_places')}</div>
|
|
|
|
<div class="space_container">
|
|
|
|
</div>
|
|
|
|
<div class="vehicles_container">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="upgrade_container">
|
|
<div class="upgrade_section home_con ${GarageUpgrade.Clean.use?'':'disabled'}">
|
|
<div class="big_icon bubbles"><img src="assets/bubbles.png"></div>
|
|
<div class="title">${t('cleaning')}</div>
|
|
<div class="state">${Myproperties[CurrentProperty].lastPaid.cleaning?t('unlocked'):t('locked')}</div>
|
|
<div class="description_2">${t('cleaning_description')}</div>
|
|
<button class="bottom_long_btn" ${(Myproperties[CurrentProperty].lastPaid.cleaning || !GarageUpgrade.Clean.use) ?'disabled':''} onclick='SendGarageUpgrade("cleaning")'>${GarageUpgrade.Clean .price.toLocaleString('hu-HU')+' '+Currency}</button>
|
|
</div>
|
|
<div class="upgrade_section home_con ${GarageUpgrade.Repair.use?'':'disabled'}">
|
|
<div class="big_icon gears"><img src="assets/gears.png"></div>
|
|
<div class="title">${t('repairing')}</div>
|
|
<div class="state">${Myproperties[CurrentProperty].lastPaid.repairing?t('unlocked'):t('locked')}</div>
|
|
<div class="description_2">${t('repairing_description')}</div>
|
|
<button class="bottom_long_btn" ${(Myproperties[CurrentProperty].lastPaid.repairing || !GarageUpgrade.Repair.use)?'disabled':''} onclick='SendGarageUpgrade("repairing")'>${GarageUpgrade.Repair.price.toLocaleString('hu-HU')+' '+Currency}</button>
|
|
</div>
|
|
</div>
|
|
`)
|
|
CreateMessages()
|
|
LoadBasicPropertyDatas()
|
|
|
|
for (let i = 0; i < Myproperties[CurrentProperty].vehicleSpaces; i++) {
|
|
$(".space_container").append(`
|
|
<div class="space_element ${Myproperties[CurrentProperty].vehicles2[i] != undefined?'green':''}"></div>
|
|
`)
|
|
}
|
|
|
|
for (let i = 0; i < Myproperties[CurrentProperty].vehicleSpaces; i++) {
|
|
if (Myproperties[CurrentProperty].vehicles2[i] != undefined){
|
|
let dashoffset = 440-140*((Myproperties[CurrentProperty].vehicles2[i].ostime-Myproperties[CurrentProperty].vehicles2[i].stored)/Myproperties[CurrentProperty].vehicles2[i].repairtime)
|
|
if (Myproperties[CurrentProperty].vehicles2[i].ostime - Myproperties[CurrentProperty].vehicles2[i].stored > Myproperties[CurrentProperty].vehicles2[i].repairtime){
|
|
dashoffset = 440-140
|
|
}
|
|
$(".vehicles_container").append(`
|
|
<div class="vehicle_element">
|
|
<div class="percent">
|
|
<svg>
|
|
<circle cx="22" cy="22" r="22"></circle>
|
|
${(Myproperties[CurrentProperty].lastPaid.repairing && GarageUpgrade.Repair.use)?`<circle cx="22" cy="22" r="22" style='stroke-dashoffset: ${dashoffset}'></circle>`:''}
|
|
</svg>
|
|
</div>
|
|
<img class="vehicle_icon" src='assets/${Myproperties[CurrentProperty].vehicles2[i].type}.png'>
|
|
<div class="vehicle_name">${Myproperties[CurrentProperty].vehicles2[i].name}</div>
|
|
<div class="vehicle_plate">${Myproperties[CurrentProperty].vehicles2[i].plate}</div>
|
|
</div>
|
|
`)
|
|
}
|
|
else{
|
|
$(".vehicles_container").append(`
|
|
<div class="vehicle_element empty">
|
|
<div class="percent"></div>
|
|
<div class="vehicle_name"></div>
|
|
<div class="vehicle_plate"></div>
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
|
|
}
|
|
else if (id == 'cameras'){
|
|
$('.right_container').html(`
|
|
<div class="furniture_section float-end home_con">
|
|
<div class="big_icon main"><img src="assets/server.png"></div>
|
|
<div class="title">${t('cctv_station')}</div>
|
|
<div class="label">${t('state')}</div>
|
|
${Myproperties[CurrentProperty].securityData.status?`<div class="current_balance green">${t('online')}</div>`:`<div class="current_balance">${t('offline')}</div>`}
|
|
<button class="bottom_long_btn" onclick='SendCCTVRepair()' ${!Myproperties[CurrentProperty].securityData.status && Myproperties[CurrentProperty].cctvStationObject?'':'disabled'}>${t('repair')}</button>
|
|
</div>
|
|
`)
|
|
|
|
$('.bottom_container').html(`
|
|
<div class="page_chooser float-end me-3" id='camera_chooser'>
|
|
<div class="page_element choosed"></div>
|
|
<div class="page_element"></div>
|
|
</div>
|
|
<div class="list_container" id='cam_list'>
|
|
</div>
|
|
`)
|
|
CreateCameraPage()
|
|
CreateMessages()
|
|
LoadBasicPropertyDatas()
|
|
}
|
|
else if (id == 'furnitures'){
|
|
noanim = true
|
|
TriggerCallback('furnituresMenu', {}).done((cb) => {
|
|
if (cb != false){
|
|
InsideOrOutside = cb
|
|
hide('properties_menu')
|
|
show('furniture_menu')
|
|
CreateFurnitureMenu()
|
|
BackgroundBlur("plugin_3", 'panel_furniture')
|
|
}
|
|
else{
|
|
SwitchPage('properties')
|
|
}
|
|
});
|
|
}
|
|
|
|
let HomeCons = document.getElementsByClassName("home_con")
|
|
for (let index = 0; index < HomeCons.length; index++) {
|
|
HomeCons[index].style.animation = 'none'
|
|
if (!noanim){
|
|
HomeCons[index].offsetHeight
|
|
HomeCons[index].style.animation = "Home_cons 0.4s ease both " + (index / 100) + "s"
|
|
}
|
|
}
|
|
}
|
|
|
|
function SendCCTVRepair(){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "repairCCTVStation", propertyID:Myproperties[CurrentProperty].id}))
|
|
}
|
|
|
|
function SendOpenDoorLock(){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "manageDoorLocks", propertyID:Myproperties[CurrentProperty].id}))
|
|
}
|
|
|
|
function SendChangeLock(){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "lockReplacement", propertyID:Myproperties[CurrentProperty].id}))
|
|
}
|
|
|
|
function SendBuyKey(){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "addNewKey", propertyID:Myproperties[CurrentProperty].id}))
|
|
}
|
|
|
|
function SendGarageUpgrade(type){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "garageUpgrade", propertyID:Myproperties[CurrentProperty].id, type}))
|
|
}
|
|
|
|
function SendPayBill(type){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "payBill", propertyID:Myproperties[CurrentProperty].id, type}))
|
|
}
|
|
|
|
function SendUpgradeSecurity(){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "upgradeSecurity", propertyID:Myproperties[CurrentProperty].id}))
|
|
}
|
|
|
|
function SendPropertyNameChange(newLabel){
|
|
if (newLabel != Myproperties[CurrentProperty].label){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "changePropertyLabel", propertyID:Myproperties[CurrentProperty].id, newLabel}))
|
|
}
|
|
}
|
|
|
|
function handleClick(event) {
|
|
let input = document.getElementById("property_name_in")
|
|
let sell_menu = document.getElementById("property_sell_menu")
|
|
let purchase_menu = document.getElementById("property_purchase_menu_from_rent")
|
|
|
|
if (event.target !== input) {
|
|
SendPropertyNameChange(input.value);
|
|
}
|
|
|
|
if (!sell_menu.contains(event.target) && sell_menu.style.display == 'block') {
|
|
hide('property_sell_menu')
|
|
$('.properties_menu .panel').css("filter", "brightness(100%)")
|
|
}
|
|
|
|
if (!purchase_menu.contains(event.target) && purchase_menu.style.display == 'block'){
|
|
hide('property_purchase_menu_from_rent')
|
|
$('.properties_menu .panel').css("filter", "brightness(100%)")
|
|
}
|
|
}
|
|
|
|
function CheckIfCanCreateProperty(){
|
|
if ((PropertyCreationKey != null || PropertyCreationType == 'MLO') && document.getElementById('property_name').value.length > 0
|
|
&& document.getElementById('property_price').value.length > 0
|
|
&& document.getElementById('entry_door').value.length > 0
|
|
&& document.getElementById('street_number').value.length > 0
|
|
&& ((document.getElementById('vehicle_exit').value.length > 0 && PropertyCreationPanelType == 'garage') || PropertyCreationPanelType != 'garage')
|
|
&& ((PropertyCreationType == 'SHELL' && document.getElementById('exit_door').value.length > 0) || PropertyCreationType != 'SHELL')){
|
|
document.getElementById('create_property_btn').disabled = false
|
|
}
|
|
else{
|
|
document.getElementById('create_property_btn').disabled = true
|
|
}
|
|
}
|
|
|
|
function CreateProperty(){
|
|
let Rentable = document.getElementById('rentable_input').checked
|
|
let Name = document.getElementById('property_name').value
|
|
let Price = document.getElementById('property_price').value
|
|
let URL = document.getElementById('property_img').value
|
|
let Number = document.getElementById('street_number').value
|
|
let Garage = document.getElementById('garage_id_input').value
|
|
let VehicleExit = document.getElementById('vehicle_exit').value
|
|
let table = [PropertyCreationType, PropertyCreationKey, Rentable, Name, Price.replace(/\s/g, ""), URL, PropertyInfos[0], null, PropertyInfos[1], Number, Garage, VehicleExit]
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "createProperty", table}))
|
|
}
|
|
|
|
function CheckGarageID(value){
|
|
let Found = false
|
|
for (let i = 0; i < GarageIDs.length; i++) {
|
|
if (value.toUpperCase() == GarageIDs[i]){
|
|
Found = true
|
|
}
|
|
}
|
|
if (Found){
|
|
$('#garage_id_input').css('border', 'solid 2px rgba(121, 215, 190, 0.719)')
|
|
$('#garage_id_input').css('background-color', 'rgba(121, 215, 190, 0.288)')
|
|
}
|
|
else{
|
|
$('#garage_id_input').css('border', 'solid 2px rgba(211, 211, 211, 0.705)')
|
|
$('#garage_id_input').css('background-color', 'rgba(255, 255, 255, 0.212)')
|
|
}
|
|
}
|
|
|
|
function GetPlayerCurrentCoord(){
|
|
TriggerCallback('GetPlayerCoord', {}).done((cb) => {
|
|
PropertyInfos = cb
|
|
document.getElementById('entry_door').value = PropertyInfos[0]
|
|
document.getElementById('street_input').value = PropertyInfos[1]
|
|
document.getElementById('street_number').value = PropertyInfos[2]
|
|
CheckIfCanCreateProperty()
|
|
});
|
|
}
|
|
|
|
function GetExitCoord(){
|
|
Close()
|
|
TriggerCallback('shellPositions', {model:PropertyCreationKey}).done((cb) => {
|
|
show('property_creation_menu')
|
|
if (cb != 'nil'){
|
|
document.getElementById('exit_door').value = cb
|
|
}
|
|
else{
|
|
document.getElementById('exit_door').value = ''
|
|
}
|
|
CheckIfCanCreateProperty()
|
|
});
|
|
}
|
|
|
|
function GetVehicleExitCoord(){
|
|
Close()
|
|
TriggerCallback('vehiclePosition', {}).done((cb) => {
|
|
show('property_creation_menu')
|
|
if (cb != 'nil'){
|
|
document.getElementById('vehicle_exit').value = cb
|
|
}
|
|
CheckIfCanCreateProperty()
|
|
});
|
|
}
|
|
|
|
function ChangeDropdownText(Label, key){
|
|
PropertyCreationKey = key
|
|
$('.option_dropdown_btn').html(Label)
|
|
CheckIfCanCreateProperty()
|
|
if (document.getElementById('set_exit_door')){
|
|
document.getElementById('set_exit_door').disabled = false
|
|
}
|
|
}
|
|
|
|
function ChangeProperyInType(id){
|
|
PropertyCreationType = id
|
|
if (id == 'SHELL' || id == 'IPL'){
|
|
$('#panel_creation .dropdown_container').html(`
|
|
<div class="dropdown" style="width: 100%;">
|
|
<button class="option_dropdown_btn" id="pic_btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">${t('choose')}</button>
|
|
<ul class="dropdown-menu">
|
|
</ul>
|
|
</div>
|
|
`)
|
|
if (id == 'SHELL'){
|
|
$('.dropdown_container .dropdown-menu').html('')
|
|
for (const key in PropertyTypes['SHELL']) {
|
|
$('.dropdown_container .dropdown-menu').append(`
|
|
<li><button class="dropdown-item" id="type_${key}" onclick="ChangeDropdownText('${PropertyTypes['SHELL'][key].label}', '${key}')">${PropertyTypes['SHELL'][key].label}</button></li>
|
|
`)
|
|
}
|
|
$('#panel_creation .doors_container').html(`
|
|
<div class="row" style="width: 420px; margin-left: 15px;">
|
|
<div class="col p-0">
|
|
<div class="input-group input-group-lg" style="width: 200px;">
|
|
<input type="text" id="entry_door" class="form-control" placeholder="${t('entry_door')}" style="height: 45px;" disabled>
|
|
<button class="set_coord_btn" type="button" onclick="GetPlayerCurrentCoord()"><i class="fa-solid fa-location-dot"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col p-0">
|
|
<div class="input-group input-group-lg float-end" style="width: 200px;">
|
|
<input type="text" id="exit_door" class="form-control" placeholder="${t('exit_door')}" style="height: 45px;" disabled>
|
|
<button class="set_coord_btn" id="set_exit_door" type="button" onclick="GetExitCoord()" disabled><i class="fa-solid fa-location-dot"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`)
|
|
}
|
|
else{
|
|
$('.dropdown_container .dropdown-menu').html('')
|
|
for (const key in PropertyTypes['IPL']) {
|
|
$('.dropdown_container .dropdown-menu').append(`
|
|
<li><button class="dropdown-item" id="type_${key}" onclick="ChangeDropdownText('${PropertyTypes['IPL'][key].label}', '${key}')">${PropertyTypes['IPL'][key].label}</button></li>
|
|
`)
|
|
}
|
|
$('#panel_creation .doors_container').html(`
|
|
<div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="entry_door" class="form-control" placeholder="${t('entry_door')}" style="height: 45px;" disabled>
|
|
<button class="set_coord_btn" type="button" onclick="GetPlayerCurrentCoord()"><i class="fa-solid fa-location-dot"></i></button>
|
|
</div>
|
|
`)
|
|
}
|
|
if (PropertyCreationPanelType == 'house'){
|
|
$('.house_con.garage_id').css('display', 'block')
|
|
}
|
|
}
|
|
else{
|
|
$('#panel_creation .dropdown_container').html(``)
|
|
$('#panel_creation .doors_container').html(`
|
|
<div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="entry_door" class="form-control" placeholder="${t('entry_door')}" style="height: 45px;" disabled>
|
|
<button class="set_coord_btn" type="button" onclick="GetPlayerCurrentCoord()"><i class="fa-solid fa-location-dot"></i></button>
|
|
</div>
|
|
`)
|
|
$('.house_con.garage_id').css('display', 'none')
|
|
}
|
|
BackgroundBlur("plugin_2", 'panel_creation')
|
|
CheckIfCanCreateProperty()
|
|
}
|
|
|
|
function TriggerCallback(event, data) {
|
|
data.action = event;
|
|
return $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify(data)).promise();
|
|
}
|
|
|
|
function BackgroundBlur(element, target) {
|
|
if (BGBlur){
|
|
var bodyRect = document.body.getBoundingClientRect();
|
|
let elemRect = getTotalBoundingBox(target);
|
|
|
|
if (!elemRect) return;
|
|
|
|
let offset = [
|
|
(elemRect.top - bodyRect.top)-1,
|
|
((elemRect.right - bodyRect.right) * (-1))-1,
|
|
(elemRect.bottom - bodyRect.bottom)+1,
|
|
(elemRect.left - bodyRect.left)-1
|
|
];
|
|
|
|
$('#' + element).css('clip-path', `inset(${offset[0]}px ${offset[1]}px calc(100% - ${offset[2]}px) ${offset[3]}px)`);
|
|
}
|
|
else{
|
|
$('#' + element).css('display', 'none')
|
|
}
|
|
}
|
|
|
|
function getTotalBoundingBox(target) {
|
|
const elem = document.getElementById(target);
|
|
if (!elem) return null;
|
|
|
|
let elemRect = elem.getBoundingClientRect();
|
|
let minX = elemRect.left;
|
|
let minY = elemRect.top;
|
|
let maxX = elemRect.right;
|
|
let maxY = elemRect.bottom;
|
|
|
|
|
|
Array.from(elem.children).forEach(child => {
|
|
let childRect = child.getBoundingClientRect();
|
|
minX = Math.min(minX, childRect.left!=0?childRect.left:99999);
|
|
minY = Math.min(minY, childRect.top!=0?childRect.top:99999);
|
|
maxX = Math.max(maxX, childRect.right);
|
|
maxY = Math.max(maxY, childRect.bottom);
|
|
});
|
|
|
|
|
|
return {
|
|
width: maxX - minX,
|
|
height: maxY - minY,
|
|
left: minX,
|
|
top: minY,
|
|
right: maxX,
|
|
bottom: maxY
|
|
};
|
|
}
|
|
|
|
function show(element) {
|
|
$("#" + element).css("display", "block")
|
|
document.getElementById(element).style.animation = "showmenu 0.35s ease";
|
|
}
|
|
|
|
function hide(element) {
|
|
document.getElementById(element).style.animation = "hidemenu 0.3s ease";
|
|
setTimeout(function() {
|
|
$("#" + element).css("display", "none")
|
|
}, 300)
|
|
}
|
|
|
|
function show2(element) {
|
|
$("#" + element).css("display", "block")
|
|
document.getElementById(element).style.animation = "Home_cons 0.3s ease";
|
|
}
|
|
|
|
function hide2(element) {
|
|
document.getElementById(element).style.animation = "reverse_Home_cons 0.2s ease";
|
|
setTimeout(function() {
|
|
$("#" + element).css("display", "none")
|
|
}, 200)
|
|
}
|
|
|
|
function isNumber(evt) {
|
|
evt = (evt) ? evt : window.event
|
|
var charCode = (evt.which) ? evt.which : evt.keyCode
|
|
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
function formatMoney(input) {
|
|
let value = input.value.replace(/\D/g, '');
|
|
|
|
if (value === '') {
|
|
input.value = '';
|
|
return;
|
|
}
|
|
|
|
let formattedValue = parseInt(value, 10).toLocaleString('hu-HU');
|
|
|
|
input.value = formattedValue;
|
|
}
|
|
|
|
function fancyTimeFormat(duration)
|
|
{
|
|
var hrs = ~~(duration / 3600);
|
|
var mins = ~~((duration % 3600) / 60);
|
|
var secs = ~~duration % 60;
|
|
|
|
var ret = "";
|
|
|
|
if (hrs > 0) {
|
|
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
|
|
}
|
|
|
|
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
|
|
ret += "" + secs;
|
|
return ret;
|
|
}
|
|
|
|
function fancyTimeFormat2(duration)
|
|
{
|
|
var hrs = ~~(duration / 3600);
|
|
var mins = ~~((duration % 3600) / 60);
|
|
var secs = ~~duration % 60;
|
|
|
|
var ret = "";
|
|
|
|
if (hrs > 0) {
|
|
ret += "" + hrs + "d " + (mins < 10 ? "0" : "");
|
|
}
|
|
|
|
ret += "" + mins + "h " + (secs < 10 ? "0" : "");
|
|
ret += "" + secs + 'm';
|
|
return ret;
|
|
}
|
|
|
|
function fancyTimeFormat3(duration)
|
|
{
|
|
var hrs = ~~(duration / 3600);
|
|
var mins = ~~((duration % 3600) / 60);
|
|
var secs = ~~duration % 60;
|
|
|
|
var ret = "";
|
|
|
|
if (hrs > 0) {
|
|
ret += "" + hrs + "h " + (mins < 10 ? "0" : "");
|
|
}
|
|
|
|
ret += "" + mins + "m "// + (secs < 10 ? "0" : "");
|
|
//ret += "" + secs + "s";
|
|
return ret;
|
|
}
|
|
|
|
|
|
|
|
/////////////////////////////////////////////////////////[FURNITURE MENU]////////////////////////////////////////////////////////////////////////
|
|
|
|
function SendClosedFurniture(){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'backToPropertyMenu'}))
|
|
}
|
|
|
|
function ResetFurniturePanel(){
|
|
$('#panel_furniture').css('animation', 'none')
|
|
$('#panel_chosed_furniture').css('animation', 'none')
|
|
$('.preferences_con').css('animation', 'none')
|
|
}
|
|
|
|
function SwitchFurnitureType(id){
|
|
let rect = document.getElementById(id).getBoundingClientRect();
|
|
let parentRect = document.querySelector("#furniture_control").getBoundingClientRect();
|
|
let elementCenterY = rect.top - parentRect.top;
|
|
document.querySelector(".selector#furniture").style.top = `${elementCenterY}px`;
|
|
ChosedFurnitureType = id
|
|
|
|
CreateFurnitureMenu()
|
|
}
|
|
|
|
function CreateFurnitureMenu(){
|
|
$('.furniture_type_contanier .moving_element').html('')
|
|
let RowCount = 0
|
|
let RowElementCount = 1
|
|
let disableCategory
|
|
let OneEnabledCategory = null
|
|
|
|
if (ChosedFurnitureType == 'owned'){
|
|
let IsFunctionRun = false
|
|
for (let i = 0; i < Furnitures.length; i++) {
|
|
RowElementCount = RowElementCount + 1
|
|
if (RowCount == 0 && RowElementCount == 2){
|
|
$('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
|
|
}
|
|
if (RowCount % 2 != 0){
|
|
if (RowElementCount > 3){
|
|
RowElementCount = 0
|
|
RowCount = RowCount + 1
|
|
$('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
|
|
}
|
|
}
|
|
else{
|
|
if (RowElementCount > 4){
|
|
RowElementCount = 0
|
|
RowCount = RowCount + 1
|
|
$('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
|
|
}
|
|
}
|
|
|
|
disableCategory = true
|
|
if (Myproperties[CurrentProperty].furnitures.length > 0){
|
|
for (let _i = 0; _i < Furnitures[i].objects.length; _i++) {
|
|
for (let index = 0; index < Myproperties[CurrentProperty].furnitures.length; index++) {
|
|
if (Furnitures[i].objects[_i].options != undefined){
|
|
for (const key in Furnitures[i].objects[_i].options) {
|
|
if (Myproperties[CurrentProperty].furnitures[index].obj == Furnitures[i].objects[_i].options[key].model){
|
|
disableCategory = false
|
|
}
|
|
}
|
|
}
|
|
else if (Myproperties[CurrentProperty].furnitures[index].obj == Furnitures[i].objects[_i].model){
|
|
disableCategory = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else{
|
|
$('.furniture_container').html('')
|
|
}
|
|
|
|
$('.furniture_type_contanier .moving_element #row_'+RowCount).append(`
|
|
<div class="col p-0">
|
|
<div class="furniture_type_element ${disableCategory?'disabled':``}" id='${Furnitures[i].category}' style='background-image: url("assets/furniture_categories/${Furnitures[i].category}.png");' ${disableCategory?'':`onmouseup="ChooseFurnitureType(this, ${i}, 'owned')"`}></div>
|
|
</div>
|
|
`)
|
|
if (!disableCategory){
|
|
disableCategory = i
|
|
OneEnabledCategory = i
|
|
if (ChosedMovingFurnitureType == null){
|
|
IsFunctionRun = true
|
|
ChooseFurnitureType(document.getElementById(Furnitures[i].category), i, 'owned')
|
|
}
|
|
else if(ChosedMovingFurnitureType == i){
|
|
IsFunctionRun = true
|
|
ChooseFurnitureType(document.getElementById(Furnitures[ChosedMovingFurnitureType].category), ChosedMovingFurnitureType, 'owned')
|
|
}
|
|
}
|
|
}
|
|
if (!IsFunctionRun){
|
|
if (OneEnabledCategory != null){
|
|
ChooseFurnitureType(document.getElementById(Furnitures[OneEnabledCategory].category), OneEnabledCategory, 'owned')
|
|
}
|
|
else{
|
|
$('.furniture_container').html(`<div class="text">${t('not_have_furniture')}</div>`)
|
|
}
|
|
}
|
|
}
|
|
else{
|
|
for (let i = 0; i < Furnitures.length; i++) {
|
|
RowElementCount = RowElementCount + 1
|
|
if (RowCount == 0 && RowElementCount == 2){
|
|
$('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
|
|
}
|
|
if (RowCount % 2 != 0){
|
|
if (RowElementCount > 3){
|
|
RowElementCount = 0
|
|
RowCount = RowCount + 1
|
|
$('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
|
|
}
|
|
}
|
|
else{
|
|
if (RowElementCount > 4){
|
|
RowElementCount = 0
|
|
RowCount = RowCount + 1
|
|
$('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
|
|
}
|
|
}
|
|
$('.furniture_type_contanier .moving_element #row_'+RowCount).append(`
|
|
<div class="col p-0">
|
|
<div class="furniture_type_element" id='${Furnitures[i].category}' style='background-image: url("assets/furniture_categories/${Furnitures[i].category}.png");' onmouseup="ChooseFurnitureType(this, ${i})"></div>
|
|
</div>
|
|
`)
|
|
}
|
|
|
|
if (ChosedMovingFurnitureType == null){
|
|
ChooseFurnitureType(document.getElementById(Furnitures[Math.round((Furnitures.length-1)/2)].category), Math.round((Furnitures.length-1)/2))
|
|
}
|
|
else{
|
|
ChooseFurnitureType(document.getElementById(Furnitures[ChosedMovingFurnitureType].category), ChosedMovingFurnitureType)
|
|
}
|
|
}
|
|
|
|
ScaleObjects()
|
|
}
|
|
|
|
function ChooseFurnitureType(element, FurnitureKey, type) {
|
|
if (!MovingElement){
|
|
ChosedMovingFurnitureType = FurnitureKey
|
|
|
|
document.querySelectorAll(".furniture_type_element").forEach(el => {
|
|
el.classList.remove('choosed_furniture_type')
|
|
});
|
|
element.classList.add('choosed_furniture_type')
|
|
$('.furniture_container').html('')
|
|
let IsSecurityObject = false
|
|
for (let i = 0; i < Furnitures[FurnitureKey].objects.length; i++) {
|
|
IsSecurityObject = false
|
|
for (const key in SecurityObjects.cameras) {
|
|
if (SecurityObjects.cameras[key] == Furnitures[FurnitureKey].objects[i].model){
|
|
IsSecurityObject = true
|
|
}
|
|
}
|
|
|
|
for (const key in SecurityObjects.databases) {
|
|
if (SecurityObjects.databases[key] == Furnitures[FurnitureKey].objects[i].model){
|
|
IsSecurityObject = true
|
|
}
|
|
}
|
|
|
|
if (type == 'owned'){
|
|
for (let _i = 0; _i < Myproperties[CurrentProperty].furnitures.length; _i++) {
|
|
let CanbeShowed = false
|
|
if (Furnitures[FurnitureKey].objects[i].options != undefined){
|
|
for (const key in Furnitures[FurnitureKey].objects[i].options) {
|
|
if (Furnitures[FurnitureKey].objects[i].options[key].model == Myproperties[CurrentProperty].furnitures[_i].obj){
|
|
CanbeShowed = true
|
|
}
|
|
}
|
|
}
|
|
else if(Furnitures[FurnitureKey].objects[i].model == Myproperties[CurrentProperty].furnitures[_i].obj){
|
|
CanbeShowed = true
|
|
}
|
|
|
|
if (CanbeShowed){
|
|
$('.furniture_container').append(`
|
|
<button class="furniture_element" id='furniture_${i+_i}' onclick='EditFurniture("${Myproperties[CurrentProperty].furnitures[_i].id}", "${FurnitureKey}", "${i+_i}","${Furnitures[FurnitureKey].objects[i].price/2}")' ${Myproperties[CurrentProperty].furnitures[_i].type != InsideOrOutside?'disabled':''}>
|
|
<img src="assets/furnitures/${Myproperties[CurrentProperty].furnitures[_i].obj}.png">
|
|
<div class="chosed_element"></div>
|
|
${Myproperties[CurrentProperty].furnitures[_i].type == 'outside'?'<div class="customizable"><i class="fa-solid fa-mountain-sun"></i></div>':''}
|
|
${IsSecurityObject?'<div class="security"><i class="fa-solid fa-shield-halved"></i></div>':''}
|
|
</button>
|
|
`)
|
|
}
|
|
}
|
|
}
|
|
else{
|
|
|
|
$('.furniture_container').append(`
|
|
<button class="furniture_element" id='furniture_${i}' onclick='SelectFurniture("${Furnitures[FurnitureKey].objects[i].model}","${Furnitures[FurnitureKey].objects[i].price}", "${FurnitureKey}", "${i}")'>
|
|
<img src="assets/furnitures/${Furnitures[FurnitureKey].objects[i].model}.png">
|
|
<div class="chosed_element"></div>
|
|
${Furnitures[FurnitureKey].objects[i].options != undefined?'<div class="customizable"><i class="fa-solid fa-fill-drip"></i></div>':''}
|
|
${IsSecurityObject?'<div class="security"><i class="fa-solid fa-shield-halved"></i></div>':''}
|
|
</button>
|
|
`)
|
|
}
|
|
}
|
|
HideChosedFurniture()
|
|
}
|
|
}
|
|
|
|
function HideChosedFurniture(){
|
|
$('#panel_chosed_furniture').css('animation', 'reverse_Basic_popup 0.3s ease')
|
|
setTimeout(() => {
|
|
BackgroundBlur("plugin_4", 'panel_chosed_furniture')
|
|
$('.chosed_furniture').css('display', 'none')
|
|
}, 300);
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "unselectFurniture"}))
|
|
}
|
|
|
|
function ShowChosedFurniture(){
|
|
$('#panel_chosed_furniture').css('animation', 'Basic_popup 0.3s ease')
|
|
$('.chosed_furniture').css('display', 'block')
|
|
setTimeout(() => {
|
|
BackgroundBlur("plugin_4", 'panel_chosed_furniture')
|
|
}, 200);
|
|
}
|
|
|
|
function EditFurniture(objectid, FurnitureKey, i, price){
|
|
ShowChosedFurniture()
|
|
|
|
let furniture_elements = document.getElementsByClassName("furniture_element")
|
|
for (let _i = 0; _i < furniture_elements.length; _i++) {
|
|
if (furniture_elements[_i]){
|
|
furniture_elements[_i].classList.remove('chosed')
|
|
}
|
|
}
|
|
document.getElementById('furniture_'+i).classList.add('chosed')
|
|
|
|
$('#panel_chosed_furniture .price').html(price.toLocaleString('hu-HU')+Currency)
|
|
|
|
$('#buy_furniture').css('display', 'none')
|
|
$('#sell_furniture').css('display', 'block')
|
|
$('.color_container').css('display', 'none')
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "editFurniture", objectid, propertyID:Myproperties[CurrentProperty].id}))
|
|
}
|
|
|
|
function SelectFurniture(model, price, FurnitureKey, i){
|
|
ShowChosedFurniture()
|
|
|
|
for (let _i = 0; _i < Furnitures[FurnitureKey].objects.length; _i++) {
|
|
document.getElementById('furniture_'+_i).classList.remove('chosed')
|
|
}
|
|
document.getElementById('furniture_'+i).classList.add('chosed')
|
|
|
|
if (Furnitures[FurnitureKey].objects[i].options == undefined){
|
|
$('.color_container').css('display', 'none')
|
|
}
|
|
else{
|
|
$('.color_container').css('display', 'flex')
|
|
$('.color_container').html('')
|
|
for (const key in Furnitures[FurnitureKey].objects[i].options) {
|
|
$('.color_container').append(`<button class="color_element" onclick='SendChangeModel("${Furnitures[FurnitureKey].objects[i].options[key].model}")'>${Number(key)+1}</button>`)
|
|
}
|
|
}
|
|
BackgroundBlur("plugin_4", 'panel_chosed_furniture')
|
|
|
|
$('#panel_chosed_furniture .price').html(price.toLocaleString('hu-HU')+Currency)
|
|
|
|
$('#buy_furniture').css('display', 'block')
|
|
$('#sell_furniture').css('display', 'none')
|
|
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "selectFurniture", model, propertyID:Myproperties[CurrentProperty].id}))
|
|
}
|
|
|
|
function SendChangePosition(){
|
|
$('#panel_furniture').css('animation', 'reverse_Basic_popup 0.3s ease both')
|
|
$('#panel_chosed_furniture').css('animation', 'reverse_Basic_popup 0.3s ease both')
|
|
$('.preferences_con').css('animation', 'reverse_Basic_popup 0.3s ease both')
|
|
|
|
setTimeout(() => {
|
|
BackgroundBlur("plugin_4", 'panel_chosed_furniture')
|
|
BackgroundBlur("plugin_3", 'panel_furniture')
|
|
}, 600);
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "furniturePositioning", propertyID:Myproperties[CurrentProperty].id}))
|
|
}
|
|
|
|
function SendBuyFurniture(){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "buyFurniture", propertyID:Myproperties[CurrentProperty].id}))
|
|
}
|
|
|
|
function SendSellFurniture(){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "deleteFurniture", propertyID:Myproperties[CurrentProperty].id}))
|
|
}
|
|
|
|
function SendChangeModel(model){
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "changeFurniture", propertyID:Myproperties[CurrentProperty].id, model}))
|
|
}
|
|
|
|
let isMousePressed = false; // Flag to check if the mouse is pressed
|
|
let MovingElement = false
|
|
let elementToMove = document.getElementById("moving_element");
|
|
let parentElement = document.getElementById("furniture_type_contanier"); // The parent element
|
|
let startX = 0, startY = 0, currentX = 0, currentY = 0; // Position tracking
|
|
|
|
document.getElementById("furniture_type_contanier").addEventListener("mousedown", function(event) {
|
|
if (event.button === 0) { // Left click pressed
|
|
isMousePressed = true;
|
|
|
|
// Get element's current transform values
|
|
const transform = getComputedStyle(elementToMove).transform;
|
|
if (transform !== "none") {
|
|
const matrix = new DOMMatrix(transform);
|
|
currentX = matrix.m41; // X translation
|
|
currentY = matrix.m42; // Y translation
|
|
}
|
|
|
|
// Capture the offset to prevent jumping
|
|
startX = event.clientX - currentX;
|
|
startY = event.clientY - currentY;
|
|
|
|
function moveElement(e) {
|
|
if (!isMousePressed) return;
|
|
MovingElement = true
|
|
|
|
// Calculate new position based on mouse movement
|
|
let translateX = e.clientX - startX;
|
|
let translateY = e.clientY - startY;
|
|
|
|
// Get parent boundaries
|
|
const parentRect = parentElement.getBoundingClientRect();
|
|
const elemRect = elementToMove.getBoundingClientRect();
|
|
|
|
// Constrain within parent
|
|
const minX = 0;
|
|
const minY = 0;
|
|
const maxX = parentRect.width - elemRect.width;
|
|
const maxY = parentRect.height - elemRect.height;
|
|
|
|
// Smooth boundary effect (soft stop)
|
|
if (translateX < minX) translateX = minX - (minX - translateX) * 0.2;
|
|
if (translateY < minY) translateY = minY - (minY - translateY) * 0.2;
|
|
if (translateX > maxX) translateX = maxX + (translateX - maxX) * 0.2;
|
|
if (translateY > maxY) translateY = maxY + (translateY - maxY) * 0.2;
|
|
|
|
// Apply the transform (translate)
|
|
elementToMove.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
|
|
|
ScaleObjects()
|
|
}
|
|
|
|
// Add event listeners
|
|
document.addEventListener("mousemove", moveElement);
|
|
document.addEventListener("mouseup", function stopMoving() {
|
|
isMousePressed = false;
|
|
MovingElement = false
|
|
|
|
// Get parent boundaries again for smooth reset
|
|
const parentRect = parentElement.getBoundingClientRect();
|
|
const elemRect = elementToMove.getBoundingClientRect();
|
|
|
|
let translateX = currentX;
|
|
let translateY = currentY;
|
|
|
|
// Ensure it stays inside parent (reset position if out)
|
|
if (elemRect.left < parentRect.left) translateX = 0;
|
|
if (elemRect.top < parentRect.top) translateY = 0;
|
|
if (elemRect.right > parentRect.right) translateX = parentRect.width - elemRect.width;
|
|
if (elemRect.bottom > parentRect.bottom) translateY = parentRect.height - elemRect.height;
|
|
|
|
// Smooth transition back to boundary
|
|
|
|
const overflowThreshold = 10;
|
|
if (
|
|
elemRect.left < parentRect.left - overflowThreshold ||
|
|
elemRect.top < parentRect.top - overflowThreshold ||
|
|
elemRect.right > parentRect.right + overflowThreshold ||
|
|
elemRect.bottom > parentRect.bottom + overflowThreshold
|
|
){
|
|
elementToMove.style.transition = "transform 0.3s ease-out";
|
|
elementToMove.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
|
|
|
const startTime = Date.now();
|
|
|
|
function loop() {
|
|
const currentTime = Date.now();
|
|
|
|
if (currentTime - startTime >= 300) {
|
|
return;
|
|
}
|
|
|
|
ScaleObjects()
|
|
|
|
setTimeout(loop, 1);
|
|
}
|
|
|
|
loop();
|
|
|
|
|
|
setTimeout(() => {
|
|
elementToMove.style.transition = "";
|
|
}, 300);
|
|
}
|
|
|
|
document.removeEventListener("mousemove", moveElement);
|
|
document.removeEventListener("mouseup", stopMoving);
|
|
});
|
|
}
|
|
});
|
|
|
|
function ScaleObjects(){
|
|
const parentRect = parentElement.getBoundingClientRect();
|
|
const children = parentElement.getElementsByClassName("furniture_type_element");
|
|
|
|
Array.from(children).forEach(child => {
|
|
const rect = child.getBoundingClientRect();
|
|
const centerX = rect.left + rect.width / 2;
|
|
const centerY = rect.top + rect.height / 2;
|
|
const parentCenterX = parentRect.left + parentRect.width / 2;
|
|
const parentCenterY = parentRect.top + parentRect.height / 2;
|
|
|
|
const distance = Math.sqrt((parentCenterX - centerX) ** 2 + (parentCenterY - centerY) ** 2);
|
|
|
|
child.style.opacity = 1.7 - distance / 100;
|
|
|
|
let childProperties = getObjectProperties(distance);
|
|
child.style.transform = `scale(${childProperties.scale})`;
|
|
});
|
|
}
|
|
|
|
function getObjectProperties(distance) {
|
|
const minDistance = 75;
|
|
const maxDistance = 140;
|
|
|
|
// Scale range (0.75 to 0)
|
|
const minScale = 0.1;
|
|
const maxScale = 1;
|
|
|
|
// Clamp the distance
|
|
distance = Math.min(Math.max(distance, minDistance), maxDistance);
|
|
|
|
// Normalize distance (0 when at maxDistance, 1 when at minDistance)
|
|
let normalized = 1 - (distance - minDistance) / (maxDistance - minDistance);
|
|
|
|
// Calculate scale
|
|
let scale = minScale + normalized * (maxScale - minScale);
|
|
|
|
|
|
return { scale };
|
|
} |