fritz/playback-device-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add remotes and commands views

Browse Source
This commit is contained in:
Fritz Heiden 2025-04-07 00:45:35 +02:00
parent 3382579a64
commit bb9f616428
5 changed files with 235 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
www/src/services/remotes-service.js Normal file
View File

@ -0,0 +1,18 @@
function RemotesService() {
async function getRemotes() {
return [];
}
async function getCommands() {
return [];
}
return {
getRemotes,
getCommands,
};
}
RemotesService = new RemotesService();
export default RemotesService;

22
www/src/views/main-view.jsx
View File

@ -1,27 +1,28 @@
import { autoUpdate, computePosition, offset, shift } from "@floating-ui/dom";
import {
createEffect,
createResource,
createSignal,
mergeProps,
createResource,
createEffect,
onMount,
onCleanup,
onMount,
} from "solid-js";
import { computePosition, shift, autoUpdate, offset } from "@floating-ui/dom";
import UserService from "../services/user-service.js";
import ModalRegistry from "../modals/modal-registry.jsx";
import UserService from "../services/user-service.js";
import UrlUtils from "../tools/url-utils.js";
import SettingsView from "./settings-view.jsx";
import DevicesView from "./devices-view.jsx";
import SettingsView from "./settings-view.jsx";
import {
DEVICES_VIEW,
REMOTES_VIEW,
RECORDINGS_VIEW,
SETTINGS_VIEW,
INTEGRATION_VIEW,
RECORDINGS_VIEW,
REMOTES_VIEW,
SETTINGS_VIEW,
} from "../data/constants.js";
import IntegrationView from "./integration-view.jsx";
import RemotesView from "./remotes/remotes-view.jsx";
let [activeView, setActiveView] = createSignal(DEVICES_VIEW);
@ -215,6 +216,9 @@ const MainView = function (props) {
<Match when={activeView() === INTEGRATION_VIEW}>
<IntegrationView {...props} />
</Match>
<Match when={activeView() === REMOTES_VIEW}>
<RemotesView {...props} />
</Match>
</Switch>
</div>
);

76
www/src/views/remotes/commands-list-view.jsx Normal file
View File

@ -0,0 +1,76 @@
import { createResource, onMount } from "solid-js";
import List from "../../modules/list";
import RemotesService from "../../services/remotes-service";
function CommandsList(props) {
const [commands, { refetch: refetchCommands }] = createResource(
RemotesService.getCommands
);
onMount(() => {
refetchCommands();
});
function handleNewCommand() {}
return (
<>
<div class="d-flex flex-row">
<div class="d-flex flex-row flex-fill">
{props.navigation ? props.navigation : null}
</div>
<div class="d-flex flex-row justify-content-end flex-fill">
<button class="btn btn-dark me-2 mb-3" onClick={handleNewCommand}>
<i class="bi bi-plus-square me-2"></i>
New Command
</button>
</div>
</div>
<List
items={(commands() || []).map((integration) => ({
id: {
html: <span class="font-monospace">{integration.getId()}</span>,
},
name: {
text: integration.getName(),
},
options: {
html: (
<>
<button
class="btn btn-outline-secondary me-2"
onClick={(event) => {
event.stopPropagation();
handleDeleteIntegration(integration);
}}
>
<i class="bi bi-trash-fill"></i>
</button>
</>
),
},
integration: integration,
}))}
class={"flex-fill"}
columns={[
{
id: "id",
name: "id",
width: 6,
},
{
id: "name",
name: "Name",
},
{
id: "options",
name: "",
width: 4,
},
]}
></List>
</>
);
}
export default CommandsList;

64
www/src/views/remotes/remotes-list-view.jsx Normal file
View File

@ -0,0 +1,64 @@
import { createResource, onMount } from "solid-js";
import List from "../../modules/list";
import RemotesService from "../../services/remotes-service";
function RemotesList(props) {
const [remotes, { refetch: refetchRemotes }] =
createResource(RemotesService.getRemotes);
onMount(() => {
refetchRemotes();
});
function handleNewRemote() {}
return (
<>
<div class="d-flex flex-row">
<div class="d-flex flex-row flex-fill">
{props.navigation ? props.navigation : null}
</div>
<div class="d-flex flex-row justify-content-end flex-fill">
<button class="btn btn-dark me-2 mb-3" onClick={handleNewRemote}>
<i class="bi bi-plus-square me-2"></i>
New Remote
</button>
</div>
</div>
<List
onListItemClick={() => {}}
items={(remotes() || []).map((device) => ({
id: {
html: <span class="font-monospace">{device.getId()}</span>,
},
name: {
text: device.getName(),
},
description: {
text: device.getDescription(),
},
device,
}))}
class={"flex-fill"}
columns={[
{
id: "id",
name: "id",
width: 6,
},
{
id: "name",
name: "Name",
width: 10,
},
{
id: "description",
name: "Description",
},
]}
></List>
</>
);
}
export default RemotesList;

64
www/src/views/remotes/remotes-view.jsx Normal file
View File

@ -0,0 +1,64 @@
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_TYPE = "remotes";
const COMMANDS_LIST_TYPE = "commands";
const [listType, setListType] = createSignal(REMOTES_LIST_TYPE);
function Navigation(props) {
return (
<div class="d-flex flex-row flex-fill">
<button
class={
"btn me-2 mb-3" +
(listType() === REMOTES_LIST_TYPE ? " btn-secondary" : " btn-dark")
}
onClick={() => setListType(REMOTES_LIST_TYPE)}
>
<i class="bi bi-tv me-2"></i>
Remotes
</button>
<button
class={
"btn me-2 mb-3" +
(listType() === COMMANDS_LIST_TYPE ? " btn-secondary" : " btn-dark")
}
onClick={() => setListType(COMMANDS_LIST_TYPE)}
>
<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={listType() === REMOTES_LIST_TYPE}>
<RemotesList navigation={<Navigation />} />
</Match>
<Match when={listType() === COMMANDS_LIST_TYPE}>
<CommandsList navigation={<Navigation />} />
</Match>
</Switch>
</div>
);
}
export default RemotesView;