blob: 8bac3f9a084994a0539a0abd57fd1c3c2f5013be (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<script>
import { onMount } from "svelte";
import { fade } from 'svelte/transition';
import FloatingButton from "../../ComponentLib/Button/FloatingButton.svelte";
import Mode from "./Mode.svelte";
import NewModeDialog from "./NewModeDialog.svelte";
import { openSocket, authorizedSocket, authorizedSocketNeeded } from "../../stores/socketStore.js";
authorizedSocketNeeded.set(true);
let userModes = [];
let remotes = [];
openSocket.on("modelist", (modes) => {
userModes = [];
remotes = [];
for (let i = 0; i < modes.length; i++) {
if (modes[i].substr(0, 4) === "user") {
userModes.push(modes[i].replace("user/", ""));
}
if (modes[i].substr(0, 6) === "remote") {
remotes.push(modes[i].replace("remote/", ""));
}
}
});
onMount(async() => {
openSocket.emit("modelist:get");
});
</script>
<style>
.wrapper {
padding-bottom: var(--theme-padding);
}
.modes > * {
margin-bottom: 10px;
}
.button_menu {
margin-top: 20px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class="wrapper">
<h1>Modes</h1>
<div class="modes">
{#each userModes as mode}
<div>
<Mode id={mode} />
</div>
{/each}
</div>
<div class="button_menu">
<NewModeDialog>
<svelte:fragment slot="trigger" let:open>
<FloatingButton on:click={open} faIcon="fas fa-plus" label="NEW" />
</svelte:fragment>
</NewModeDialog>
</div>
</div>
|
