65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
import {
|
|
createSignal,
|
|
Match,
|
|
mergeProps,
|
|
Switch
|
|
} from "solid-js";
|
|
|
|
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 [currentView, setCurrentView] = createSignal(REMOTES_LIST_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;
|