Update furnishing page
|
@ -594,6 +594,9 @@
|
||||||
"info": [
|
"info": [
|
||||||
"This shows how much load the area can take. Each furniture has a hidden load value that can be viewed below.",
|
"This shows how much load the area can take. Each furniture has a hidden load value that can be viewed below.",
|
||||||
"(the maximum value is not comfirmed yet!)"
|
"(the maximum value is not comfirmed yet!)"
|
||||||
]
|
],
|
||||||
|
"hall": "Hall",
|
||||||
|
"room": "Room {number}",
|
||||||
|
"corridor": "Corridor"
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -18,29 +18,45 @@
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let type = 'interior';
|
let type = 'hall';
|
||||||
let items = [];
|
let items = [];
|
||||||
let max = 0;
|
let max = 0;
|
||||||
|
|
||||||
const maxLoad = {
|
const maxLoad = {
|
||||||
exterior: 4500,
|
exterior: 8700,
|
||||||
interior: 2000,
|
hall: 8700,
|
||||||
|
room1: 3700,
|
||||||
|
room2: 3700,
|
||||||
|
room3: 3700,
|
||||||
|
corridor: 3700,
|
||||||
};
|
};
|
||||||
let currentUsage = {
|
let currentUsage = {
|
||||||
interior: {},
|
|
||||||
exterior: {},
|
exterior: {},
|
||||||
|
hall: {},
|
||||||
|
room1: {},
|
||||||
|
room2: {},
|
||||||
|
room3: {},
|
||||||
|
corridor: {},
|
||||||
};
|
};
|
||||||
$: currentLoad = Object.entries(currentUsage[type]).reduce((prev, [id, val]) => {
|
$: currentLoad = Object.entries(currentUsage[type]).reduce(
|
||||||
prev += data[id].load * val;
|
(prev, [id, val]) => {
|
||||||
|
prev.load += data[id].load * val;
|
||||||
|
prev.energy += data[id].energy * val;
|
||||||
return prev;
|
return prev;
|
||||||
}, 0);
|
},
|
||||||
|
{
|
||||||
|
load: 0,
|
||||||
|
energy: 0,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
let sortBy = 'ratio';
|
let sortBy = 'ratio';
|
||||||
let sortOrder = false;
|
let sortOrder = false;
|
||||||
|
|
||||||
async function parseFurnishing() {
|
async function parseFurnishing() {
|
||||||
|
const currentType = type === 'exterior' ? 'exterior' : 'interior';
|
||||||
items = Object.values(data)
|
items = Object.values(data)
|
||||||
.filter((e) => e.type === type || e.type === '')
|
.filter((e) => e.type === currentType || e.type === '')
|
||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
switch (sortBy) {
|
switch (sortBy) {
|
||||||
case 'ratio':
|
case 'ratio':
|
||||||
|
@ -112,7 +128,10 @@
|
||||||
const prefix = getAccountPrefix();
|
const prefix = getAccountPrefix();
|
||||||
const furnishingData = readSave(`${prefix}furnishing`);
|
const furnishingData = readSave(`${prefix}furnishing`);
|
||||||
if (furnishingData !== null) {
|
if (furnishingData !== null) {
|
||||||
currentUsage = JSON.parse(furnishingData);
|
currentUsage = {
|
||||||
|
...currentUsage,
|
||||||
|
...JSON.parse(furnishingData),
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -135,13 +154,14 @@
|
||||||
<div class="lg:ml-64 pt-20 lg:px-8 lg:pt-8 max-w-screen-xl">
|
<div class="lg:ml-64 pt-20 lg:px-8 lg:pt-8 max-w-screen-xl">
|
||||||
<div class="px-4 flex md:space-x-2 items-start md:items-center flex-col md:flex-row">
|
<div class="px-4 flex md:space-x-2 items-start md:items-center flex-col md:flex-row">
|
||||||
<h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('furnishing.title')}</h1>
|
<h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('furnishing.title')}</h1>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
<div
|
<div
|
||||||
class="rounded-2xl border-2 border-white border-opacity-25 text-white px-4 py-2 group relative"
|
class="rounded-2xl border-2 border-white border-opacity-25 text-white px-4 py-2 group relative"
|
||||||
style={calculateColorLoad(currentLoad / maxLoad[type])}
|
style={calculateColorLoad(currentLoad.load / maxLoad[type])}
|
||||||
>
|
>
|
||||||
<Icon path={mdiInformationOutline} />
|
<Icon size={0.7} path={mdiInformationOutline} />
|
||||||
{$t('furnishing.load')}
|
{$t('furnishing.load')}
|
||||||
{currentLoad} / {maxLoad[type]}
|
{currentLoad.load} / {maxLoad[type]}
|
||||||
<div
|
<div
|
||||||
class="hidden group-hover:block absolute left-0 transform translate-y-full
|
class="hidden group-hover:block absolute left-0 transform translate-y-full
|
||||||
bg-white rounded-xl z-50 text-gray-900 px-4 py-2 w-screen max-w-xs md:max-w-sm"
|
bg-white rounded-xl z-50 text-gray-900 px-4 py-2 w-screen max-w-xs md:max-w-sm"
|
||||||
|
@ -151,15 +171,39 @@
|
||||||
<p>{$t('furnishing.info.1')}</p>
|
<p>{$t('furnishing.info.1')}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rounded-2xl border-2 border-white border-opacity-25 text-white px-4 py-2">
|
||||||
|
{$t('furnishing.energy')}
|
||||||
|
{currentLoad.energy}
|
||||||
</div>
|
</div>
|
||||||
<div class="px-4 flex space-x-2 mt-2 mb-4">
|
|
||||||
<button on:click={() => changeType('interior')} class="pill {type === 'interior' ? 'active' : ''}"
|
|
||||||
>{$t('furnishing.interior')}</button
|
|
||||||
>
|
|
||||||
<button on:click={() => changeType('exterior')} class="pill {type === 'exterior' ? 'active' : ''}"
|
|
||||||
>{$t('furnishing.exterior')}</button
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 flex space-x-2 mt-2 mb-2">
|
||||||
|
<button on:click={() => changeType('hall')} class="pill {type === 'exterior' ? '' : 'active'}">
|
||||||
|
{$t('furnishing.interior')}
|
||||||
|
</button>
|
||||||
|
<button on:click={() => changeType('exterior')} class="pill {type === 'exterior' ? 'active' : ''}">
|
||||||
|
{$t('furnishing.exterior')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{#if type !== 'exterior'}
|
||||||
|
<div class="px-4 flex space-x-2 mt-2 mb-4 overflow-x-auto">
|
||||||
|
<button on:click={() => changeType('hall')} class="pill {type === 'hall' ? 'active' : ''}">
|
||||||
|
{$t('furnishing.hall')}
|
||||||
|
</button>
|
||||||
|
<button on:click={() => changeType('room1')} class="pill {type === 'room1' ? 'active' : ''}">
|
||||||
|
{$t('furnishing.room', { values: { number: 1 } })}
|
||||||
|
</button>
|
||||||
|
<button on:click={() => changeType('room2')} class="pill {type === 'room2' ? 'active' : ''}">
|
||||||
|
{$t('furnishing.room', { values: { number: 2 } })}
|
||||||
|
</button>
|
||||||
|
<button on:click={() => changeType('room3')} class="pill {type === 'room3' ? 'active' : ''}">
|
||||||
|
{$t('furnishing.room', { values: { number: 3 } })}
|
||||||
|
</button>
|
||||||
|
<button on:click={() => changeType('corridor')} class="pill {type === 'corridor' ? 'active' : ''}">
|
||||||
|
{$t('furnishing.corridor')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
<div class="flex mt-4 wrapper">
|
<div class="flex mt-4 wrapper">
|
||||||
<div class="block overflow-x-auto xl:overflow-x-visible whitespace-no-wrap">
|
<div class="block overflow-x-auto xl:overflow-x-visible whitespace-no-wrap">
|
||||||
<div class="px-4 table">
|
<div class="px-4 table">
|
||||||
|
@ -228,12 +272,19 @@
|
||||||
<td class="px-4 text-gray-200 text-center" style={calculateColor(item.ratio)}>{item.ratio.toFixed(2)}</td>
|
<td class="px-4 text-gray-200 text-center" style={calculateColor(item.ratio)}>{item.ratio.toFixed(2)}</td>
|
||||||
<td class="px-4">
|
<td class="px-4">
|
||||||
<div
|
<div
|
||||||
class="flex justify-between items-center border-2 border-white border-opacity-25 rounded-xl text-gray-200"
|
class="flex justify-between items-center border-2 border-white border-opacity-25 rounded-xl text-gray-400"
|
||||||
>
|
>
|
||||||
<button class="hover:text-primary" on:click={() => changeUsage(item.id, 1)}>
|
<button class="hover:text-primary" on:click={() => changeUsage(item.id, 1)}>
|
||||||
<Icon path={mdiPlus} />
|
<Icon path={mdiPlus} />
|
||||||
</button>
|
</button>
|
||||||
<p class="h-full text-gray-200 px-2">{currentUsage[type][item.id] || 0}</p>
|
<p
|
||||||
|
class="h-full px-2 text-center {currentUsage[type][item.id] > 0
|
||||||
|
? 'text-gray-200'
|
||||||
|
: 'text-gray-700'}"
|
||||||
|
style="min-width: 40px;"
|
||||||
|
>
|
||||||
|
{currentUsage[type][item.id] || 0}
|
||||||
|
</p>
|
||||||
<button class="hover:text-primary" on:click={() => changeUsage(item.id, -1)}>
|
<button class="hover:text-primary" on:click={() => changeUsage(item.id, -1)}>
|
||||||
<Icon path={mdiMinus} />
|
<Icon path={mdiMinus} />
|
||||||
</button>
|
</button>
|
||||||
|
@ -259,6 +310,7 @@
|
||||||
@apply outline-none;
|
@apply outline-none;
|
||||||
@apply transition;
|
@apply transition;
|
||||||
@apply duration-100;
|
@apply duration-100;
|
||||||
|
@apply whitespace-no-wrap;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@apply border-primary;
|
@apply border-primary;
|
||||||
|
|
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 7.3 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 35 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 35 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 36 KiB |
After Width: | Height: | Size: 39 KiB |