106 lines
2.7 KiB
JavaScript
106 lines
2.7 KiB
JavaScript
import {
|
|
createEffect,
|
|
createSignal,
|
|
Match,
|
|
mergeProps,
|
|
onCleanup,
|
|
Switch,
|
|
} from "solid-js";
|
|
|
|
import DevicesListView from "./devices-list-view";
|
|
import IntegrationListView from "./integration-list-view";
|
|
import UrlUtils from "../../tools/url-utils";
|
|
import IntegrationView from "./integration-view";
|
|
|
|
function DevicesView(props) {
|
|
props = mergeProps({ onIntegrationClicked: () => {} }, props);
|
|
const DEVICES_LIST_VIEW = "devices";
|
|
const INTEGRATION_LIST_VIEW = "integrations";
|
|
const INTEGRATION_VIEW = "integration";
|
|
const VIEWS = [DEVICES_LIST_VIEW, INTEGRATION_LIST_VIEW, INTEGRATION_VIEW];
|
|
|
|
const [currentView, setCurrentView] = createSignal(INTEGRATION_LIST_VIEW);
|
|
|
|
createEffect(() => {
|
|
let url = UrlUtils.getUrl();
|
|
url = UrlUtils.addQueryParameter(url, "tab", currentView());
|
|
UrlUtils.setUrl(url);
|
|
});
|
|
|
|
onCleanup(() => {
|
|
window.removeEventListener("popstate", setViewFromUrl);
|
|
});
|
|
|
|
setViewFromUrl();
|
|
window.addEventListener("popstate", setViewFromUrl);
|
|
|
|
function setViewFromUrl() {
|
|
let view = UrlUtils.getQueryParameter("tab");
|
|
if (!view) return;
|
|
if (!VIEWS.includes(view)) return;
|
|
setCurrentView(view);
|
|
}
|
|
|
|
function handleIntegrationClicked(integration) {
|
|
IntegrationView.setIntegration(integration);
|
|
setCurrentView(INTEGRATION_VIEW);
|
|
}
|
|
|
|
function Navigation() {
|
|
return (
|
|
<div class="d-flex flex-row flex-fill">
|
|
<button
|
|
class={
|
|
"btn me-2 mb-3" +
|
|
(currentView() === INTEGRATION_LIST_VIEW
|
|
? " btn-secondary"
|
|
: " btn-dark")
|
|
}
|
|
onClick={() => setCurrentView(INTEGRATION_LIST_VIEW)}
|
|
>
|
|
<i class="bi bi-gear me-2"></i>
|
|
Integrations
|
|
</button>
|
|
<button
|
|
class={
|
|
"btn me-2 mb-3" +
|
|
(currentView() === DEVICES_LIST_VIEW
|
|
? " btn-secondary"
|
|
: " btn-dark")
|
|
}
|
|
onClick={() => setCurrentView(DEVICES_LIST_VIEW)}
|
|
>
|
|
<i class="bi bi-tv me-2"></i>
|
|
Devices
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
class={
|
|
"d-flex flex-column overflow-hidden " +
|
|
props.class
|
|
}
|
|
>
|
|
<Switch>
|
|
<Match when={currentView() === INTEGRATION_LIST_VIEW}>
|
|
<IntegrationListView
|
|
navigation={<Navigation />}
|
|
onIntegrationClicked={handleIntegrationClicked}
|
|
/>
|
|
</Match>
|
|
<Match when={currentView() === DEVICES_LIST_VIEW}>
|
|
<DevicesListView navigation={<Navigation />} />
|
|
</Match>
|
|
<Match when={currentView() === INTEGRATION_VIEW}>
|
|
<IntegrationView />
|
|
</Match>
|
|
</Switch>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DevicesView;
|