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

feat: add remotes and commands data types and lists

Browse Source
This commit is contained in:
Fritz Heiden 2025-04-07 01:08:56 +02:00
parent bb9f616428
commit dbaa7a768c
5 changed files with 197 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
www/src/data/command.js Normal file
View File

@ -0,0 +1,73 @@
function Command({ id, protocol, command, device, command_type, title } = {}) {
let _id = id;
let _protocol = protocol;
let _command = command;
let _device = device;
let _command_type = command_type;
let _title = title;
function getId() {
return _id;
}
function setId(id) {
_id = id;
}
function getProtocol() {
return _protocol;
}
function setProtocol(protocol) {
_protocol = protocol;
}
function getCommand() {
return _command;
}
function setCommand(command) {
_command = command;
}
function getDevice() {
return _device;
}
function setDevice(device) {
_device = device;
}
function getCommandType() {
return _command_type;
}
function setCommandType(command_type) {
_command_type = command_type;
}
function getTitle() {
return _title;
}
function setTitle(title) {
_title = title;
}
return {
getId,
setId,
getProtocol,
setProtocol,
getCommand,
setCommand,
getDevice,
setDevice,
getCommandType,
setCommandType,
getTitle,
setTitle,
};
}
export default Command;

40
www/src/data/remote.js Normal file
View File

@ -0,0 +1,40 @@
function Remote({ id, title, commands } = {}) {
let _id = id;
let _title = title;
let _commands = commands;
function getId() {
return _id;
}
function setId(id) {
_id = id;
}
function getTitle() {
return _title;
}
function setTitle(title) {
_title = title;
}
function getCommands() {
return _commands;
}
function setCommands(commands) {
_commands = commands;
}
return {
getId,
setId,
getTitle,
setTitle,
getCommands,
setCommands,
};
}
export default Remote;

68
www/src/views/remotes/commands-list-view.jsx
View File

@ -27,30 +27,6 @@ function CommandsList(props) {
</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={[
{
@ -59,8 +35,18 @@ function CommandsList(props) {
width: 6,
},
{
id: "name",
name: "Name",
id: "title",
name: "Title",
},
{
id: "protocol",
name: "Protocol",
width: 10,
},
{
id: "type",
name: "Type",
width: 6,
},
{
id: "options",
@ -68,6 +54,36 @@ function CommandsList(props) {
width: 4,
},
]}
items={(commands() || []).map((command) => ({
id: {
html: <span class="font-monospace">{command.getId()}</span>,
},
title: {
text: command.getTitle(),
},
protocol: {
text: command.getProtocol(),
},
type: {
text: command.getCommandType(),
},
options: {
html: (
<>
<button
class="btn btn-outline-secondary me-2"
onClick={(event) => {
event.stopPropagation();
handleDeleteCommand(command);
}}
>
<i class="bi bi-trash-fill"></i>
</button>
</>
),
},
command,
}))}
></List>
</>
);

53
www/src/views/remotes/remotes-list-view.jsx
View File

@ -3,8 +3,9 @@ import List from "../../modules/list";
import RemotesService from "../../services/remotes-service";
function RemotesList(props) {
const [remotes, { refetch: refetchRemotes }] =
createResource(RemotesService.getRemotes);
const [remotes, { refetch: refetchRemotes }] = createResource(
RemotesService.getRemotes
);
onMount(() => {
refetchRemotes();
@ -26,19 +27,6 @@ function RemotesList(props) {
</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={[
{
@ -47,15 +35,40 @@ function RemotesList(props) {
width: 6,
},
{
id: "name",
name: "Name",
width: 10,
id: "title",
name: "Title",
},
{
id: "description",
name: "Description",
id: "options",
name: "",
width: 4,
},
]}
onListItemClick={() => {}}
items={(remotes() || []).map((remote) => ({
id: {
html: <span class="font-monospace">{remote.getId()}</span>,
},
name: {
text: remote.getTitle(),
},
options: {
html: (
<>
<button
class="btn btn-outline-secondary me-2"
onClick={(event) => {
event.stopPropagation();
handleDeleteRemote(remote);
}}
>
<i class="bi bi-trash-fill"></i>
</button>
</>
),
},
remote,
}))}
></List>
</>
);

18
www/src/views/remotes/remotes-view.jsx
View File

@ -10,10 +10,10 @@ import RemotesList from "./remotes-list-view";
function RemotesView(props) {
props = mergeProps({ onIntegrationClicked: () => {} }, props);
const REMOTES_LIST_TYPE = "remotes";
const COMMANDS_LIST_TYPE = "commands";
const REMOTES_LIST_VIEW = "remotes_list";
const COMMANDS_LIST_VIEW = "commands_list";
const [listType, setListType] = createSignal(REMOTES_LIST_TYPE);
const [currentView, setCurrentView] = createSignal(REMOTES_LIST_VIEW);
function Navigation(props) {
return (
@ -21,9 +21,9 @@ function RemotesView(props) {
<button
class={
"btn me-2 mb-3" +
(listType() === REMOTES_LIST_TYPE ? " btn-secondary" : " btn-dark")
(currentView() === REMOTES_LIST_VIEW ? " btn-secondary" : " btn-dark")
}
onClick={() => setListType(REMOTES_LIST_TYPE)}
onClick={() => setCurrentView(REMOTES_LIST_VIEW)}
>
<i class="bi bi-tv me-2"></i>
Remotes
@ -31,9 +31,9 @@ function RemotesView(props) {
<button
class={
"btn me-2 mb-3" +
(listType() === COMMANDS_LIST_TYPE ? " btn-secondary" : " btn-dark")
(currentView() === COMMANDS_LIST_VIEW ? " btn-secondary" : " btn-dark")
}
onClick={() => setListType(COMMANDS_LIST_TYPE)}
onClick={() => setCurrentView(COMMANDS_LIST_VIEW)}
>
<i class="bi bi-gear me-2"></i>
Commands
@ -50,10 +50,10 @@ function RemotesView(props) {
}
>
<Switch>
<Match when={listType() === REMOTES_LIST_TYPE}>
<Match when={currentView() === REMOTES_LIST_VIEW}>
<RemotesList navigation={<Navigation />} />
</Match>
<Match when={listType() === COMMANDS_LIST_TYPE}>
<Match when={currentView() === COMMANDS_LIST_VIEW}>
<CommandsList navigation={<Navigation />} />
</Match>
</Switch>