blob: 30a689c8d796019ee74a13fb6c6aa72be7150387 (
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
|
<script>
import ControlComponents from "../Components/MainControls/ControlComponents.svelte";
import ModeList from "../Components/ModeList/ModeList.svelte";
import LEDConfig from "../Components/LEDConfig/LEDConfig.svelte";
import Settings from "../Components/Settings/Settings.svelte";
import NotImplemented from '../Components/NotImplemented.svelte';
import Phone from "../layout/Phone.svelte";
import Desktop from "../layout/Desktop.svelte";
export let params;
$: updateComponent(params);
let activeLayout = Phone;
let activeComponent = ControlComponents;
const mql = window.matchMedia('(max-width: 900px)');
try {
mql.addEventListener('change', () => { updateLayout(); });
} catch {
mql.addListener(() => { updateLayout(); });
}
function updateLayout() {
const mobileView = mql.matches;
if (mobileView) {
activeLayout = Phone;
} else {
activeLayout = Desktop;
}
}
function updateComponent(params) {
switch (params[0]) {
case "/":
if (mql.matches) {
activeComponent = ControlComponents
} else {
activeComponent = ModeList;
}
break;
case "/led_config":
activeComponent = LEDConfig;
break;
case "/modes":
activeComponent = ModeList;
break;
case "/settings":
activeComponent = Settings;
break;
default:
activeComponent = NotImplemented;
break;
}
}
updateLayout();
</script>
<svelte:component this={activeLayout}>
<svelte:component this={activeComponent}/>
</svelte:component>
|
