Skip to content

Commit

Permalink
Improve screen scaling of widescreen and mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@MikMuellerDev
MikMuellerDev committed May 19, 2022
1 parent 1b75ae4 commit 4fbd8f9
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 128 deletions.
175 changes: 97 additions & 78 deletions web/src/pages/rooms/App.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
<script lang="ts">
import Button from '@smui/button/src/Button.svelte'
import IconButton from '@smui/icon-button'
import Tab,{ Label } from '@smui/tab'
import TabBar from '@smui/tab-bar'
import { onMount } from 'svelte'
import Progress from '../../components/Progress.svelte'
import { createSnackbar,hasPermission,sleep } from '../../global'
import Page from '../../Page.svelte'
import Camera from './Camera.svelte'
import AddCamera from './dialogs/camera/AddCamera.svelte'
import AddRoom from './dialogs/room/AddRoom.svelte'
import EditRoom from './dialogs/room/EditRoom.svelte'
import AddSwitch from './dialogs/switch/AddSwitch.svelte'
import { loading,Room } from './main'
import Switch from './Switch.svelte'
import Button from '@smui/button/src/Button.svelte';
import IconButton from '@smui/icon-button';
import Tab,{ Label } from '@smui/tab';
import TabBar from '@smui/tab-bar';
import { onMount } from 'svelte';
import Progress from '../../components/Progress.svelte';
import { createSnackbar,hasPermission,sleep } from '../../global';
import Page from '../../Page.svelte';
import Camera from './Camera.svelte';
import AddCamera from './dialogs/camera/AddCamera.svelte';
import AddRoom from './dialogs/room/AddRoom.svelte';
import EditRoom from './dialogs/room/EditRoom.svelte';
import AddSwitch from './dialogs/switch/AddSwitch.svelte';
import { loading,Room } from './main';
import Switch from './Switch.svelte';
// If set to true, a camera-reload is triggered
let reloadCameras = false
let reloadCameras = false;
// Wheter the current-room dialog is open
let editOpen = false
let rooms: Room[]
let editOpen = false;
let rooms: Room[];
// Are binded backwards to pass the `open` event to the children
let addRoomShow: () => void
let addSwitchShow: () => void
let addCameraShow: () => void
let addRoomShow: () => void;
let addSwitchShow: () => void;
let addCameraShow: () => void;
let currentRoom: Room
let currentRoom: Room;
$: if (currentRoom !== undefined)
window.localStorage.setItem('current_room', currentRoom.data.id)
window.localStorage.setItem('current_room', currentRoom.data.id);
$: if (
rooms !== undefined &&
currentRoom !== undefined &&
!rooms.find((r) => r.data.id === currentRoom.data.id)
)
currentRoom = rooms.slice(-1)[0]
currentRoom = rooms.slice(-1)[0];
// Determines if additional buttons for editing rooms should be visible
let hasEditPermission: boolean
let hasEditPermission: boolean;
onMount(async () => {
hasEditPermission = await hasPermission('modifyRooms')
})
hasEditPermission = await hasPermission('modifyRooms');
});
// Fetches the available rooms
async function loadRooms(updateExisting: boolean = false) {
$loading = true
$loading = true;
try {
const res = await (
await fetch(
Expand All @@ -56,45 +56,45 @@
: 'personal'
}`
)
).json()
if (res.success === false) throw Error()
).json();
if (res.success === false) throw Error();
if (updateExisting) {
for (const room of rooms) {
room.switches = (res as Room[]).find(
(r) => r.data.id === room.data.id
).switches
).switches;
}
} else rooms = res
const roomId = window.localStorage.getItem('current_room')
} else rooms = res;
const roomId = window.localStorage.getItem('current_room');
const room =
roomId === null
? undefined
: rooms.find((r) => r.data.id === roomId)
currentRoom = room === undefined ? rooms[0] : room
: rooms.find((r) => r.data.id === roomId);
currentRoom = room === undefined ? rooms[0] : room;
} catch {
$createSnackbar('Could not load rooms', [
{
onClick: () => loadRooms(updateExisting),
text: 'retry',
},
])
]);
}
while (rooms === undefined) await sleep(10)
$loading = false
while (rooms === undefined) await sleep(10);
$loading = false;
}
// Adds a room
async function addRoom(id: string, name: string, description: string) {
$loading = true
$loading = true;
try {
const res = await (
await fetch(`/api/room/add`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id, name }),
})
).json()
if (!res.success) throw Error(res.error)
).json();
if (!res.success) throw Error(res.error);
rooms = [
...rooms,
{
Expand All @@ -106,19 +106,21 @@
switches: [],
cameras: [],
},
]
rooms = rooms.sort((a, b) => a.data.name.localeCompare(b.data.name))
await sleep(0) // Just for fixing js
currentRoom = rooms[rooms.findIndex((r) => r.data.id === id)]
];
rooms = rooms.sort((a, b) =>
a.data.name.localeCompare(b.data.name)
);
await sleep(0); // Just for fixing js
currentRoom = rooms[rooms.findIndex((r) => r.data.id === id)];
} catch (err) {
$createSnackbar(`Failed to create room: ${err}`)
$createSnackbar(`Failed to create room: ${err}`);
}
$loading = false
$loading = false;
}
// Adds a switch
async function addSwitch(id: string, name: string, watts: number) {
$loading = true
$loading = true;
try {
const res = await (
await fetch('/api/switch/add', {
Expand All @@ -131,26 +133,26 @@
roomId: currentRoom.data.id,
}),
})
).json()
if (!res.success) throw Error(res.error)
).json();
if (!res.success) throw Error(res.error);
const currentRoomIndex = rooms.findIndex(
(r) => r.data.id == currentRoom.data.id
)
);
currentRoom.switches = [
...currentRoom.switches,
{ id, name, powerOn: false, watts },
]
rooms[currentRoomIndex] = currentRoom
];
rooms[currentRoomIndex] = currentRoom;
} catch (err) {
$createSnackbar(`Could not create switch: ${err}`)
$createSnackbar(`Could not create switch: ${err}`);
}
$loading = false
$loading = false;
}
// Adds a camera
async function addCamera(id: string, name: string, url: string) {
$loading = true
$loading = true;
try {
const res = await (
await fetch('/api/camera/add', {
Expand All @@ -163,60 +165,62 @@
roomId: currentRoom.data.id,
}),
})
).json()
if (!res.success) throw Error(res.error)
).json();
if (!res.success) throw Error(res.error);
const currentRoomIndex = rooms.findIndex(
(r) => r.data.id == currentRoom.data.id
)
);
currentRoom.cameras = [
...currentRoom.cameras,
{ id, name, url, roomId: currentRoom.data.id },
]
rooms[currentRoomIndex] = currentRoom
];
rooms[currentRoomIndex] = currentRoom;
} catch (err) {
$createSnackbar(`Could not create camera: ${err}`)
$createSnackbar(`Could not create camera: ${err}`);
}
$loading = false
$loading = false;
}
// Deletes a camera
async function deleteCamera(id: string) {
$loading = true
$loading = true;
try {
const res = await (
await fetch('/api/camera/delete', {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id }),
})
).json()
if (!res.success) throw Error(res.error)
currentRoom.cameras = currentRoom.cameras.filter((c) => c.id !== id)
).json();
if (!res.success) throw Error(res.error);
currentRoom.cameras = currentRoom.cameras.filter(
(c) => c.id !== id
);
} catch (err) {
$createSnackbar(`Could not delete camera: ${err}`)
$createSnackbar(`Could not delete camera: ${err}`);
}
$loading = false
$loading = false;
}
// Deletes a switch
async function deleteSwitch(id: string) {
$loading = true
$loading = true;
try {
const res = await (
await fetch('/api/switch/delete', {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id }),
})
).json()
if (!res.success) throw Error(res.error)
).json();
if (!res.success) throw Error(res.error);
currentRoom.switches = currentRoom.switches.filter(
(s) => s.id !== id
)
);
} catch (err) {
$createSnackbar(`Could not delete this switch: ${err}`)
$createSnackbar(`Could not delete this switch: ${err}`);
}
$loading = false
$loading = false;
}
</script>

Expand Down Expand Up @@ -264,7 +268,7 @@
<IconButton
class="material-icons"
on:click={() => {
loadRooms(true)
loadRooms(true);
}}>refresh</IconButton
>
{/if}
Expand Down Expand Up @@ -409,7 +413,7 @@
@include widescreen {
height: calc(100vh - 5rem);
min-width: 20rem;
width: 21rem;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
Expand Down Expand Up @@ -439,9 +443,24 @@
}
#add-camera {
flex-shrink: 0;
height: 9rem;
height: 100%;
width: auto;
aspect-ratio: 16/9;
padding: 1rem;
box-sizing: border-box;
position: relative;
border-radius: 0.4rem;
overflow: hidden;
@include mobile {
width: 100%;
aspect-ratio: 16/9;
box-sizing: border-box;
}
@include widescreen {
width: 100%;
height: auto;
}
}
</style>
Loading

0 comments on commit 4fbd8f9

Please sign in to comment.