93 lines
2.3 KiB
JavaScript
93 lines
2.3 KiB
JavaScript
import {
|
|
createEffect,
|
|
createSignal,
|
|
Match,
|
|
mergeProps,
|
|
onCleanup,
|
|
Switch,
|
|
} from "solid-js";
|
|
|
|
import UrlUtils from "../../tools/url-utils";
|
|
import CommandsList from "./commands-list-view";
|
|
import RemotesList from "./remotes-list-view";
|
|
|
|
function RemotesView(props) {
|
|
props = mergeProps({ onIntegrationClicked: () => {} }, props);
|
|
const REMOTES_LIST_VIEW = "remotes_list";
|
|
const COMMANDS_LIST_VIEW = "commands_list";
|
|
const VIEWS = [REMOTES_LIST_VIEW, COMMANDS_LIST_VIEW];
|
|
|
|
const [currentView, setCurrentView] = createSignal(REMOTES_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 Navigation(props) {
|
|
return (
|
|
<div class="d-flex flex-row flex-fill">
|
|
<button
|
|
class={
|
|
"btn me-2 mb-3" +
|
|
(currentView() === REMOTES_LIST_VIEW
|
|
? " btn-secondary"
|
|
: " btn-dark")
|
|
}
|
|
onClick={() => setCurrentView(REMOTES_LIST_VIEW)}
|
|
>
|
|
<i class="bi bi-tv me-2"></i>
|
|
Remotes
|
|
</button>
|
|
<button
|
|
class={
|
|
"btn me-2 mb-3" +
|
|
(currentView() === COMMANDS_LIST_VIEW
|
|
? " btn-secondary"
|
|
: " btn-dark")
|
|
}
|
|
onClick={() => setCurrentView(COMMANDS_LIST_VIEW)}
|
|
>
|
|
<i class="bi bi-gear me-2"></i>
|
|
Commands
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
class={
|
|
"d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
|
|
props.class
|
|
}
|
|
>
|
|
<Switch>
|
|
<Match when={currentView() === REMOTES_LIST_VIEW}>
|
|
<RemotesList navigation={<Navigation />} />
|
|
</Match>
|
|
<Match when={currentView() === COMMANDS_LIST_VIEW}>
|
|
<CommandsList navigation={<Navigation />} />
|
|
</Match>
|
|
</Switch>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default RemotesView;
|