playback-device-server/www/src/modals/delete-command-modal.jsx

67 lines
1.8 KiB
JavaScript

import { createSignal } from "solid-js";
import Command from "../data/command.js";
import RemotesService from "../services/remotes-service.js";
import EventEmitter from "../tools/event-emitter.js";
import ModalHandler from "./modal-handler.js";
import Modal from "./modal.jsx";
const [command, setCommand] = createSignal(new Command());
const eventEmitter = new EventEmitter();
const COMMAND_DELETED_EVENT = "success";
function DeleteCommandModal(props) {
const [error, setError] = createSignal("");
async function handleDeleteCommand() {
try {
await RemotesService.deleteCommand(command().getId());
} catch (e) {
setError(e.message);
throw e;
}
DeleteCommandModal.Handler.hide();
eventEmitter.dispatchEvent(COMMAND_DELETED_EVENT, command);
}
return (
<Modal
ref={props.ref}
id="deleteCommandModal"
modalTitle="Delete command"
centered={true}
>
<div class="modal-body">
<Show when={error() !== ""}>
<div class="alert alert-danger" role="alert">
{error()}
</div>
</Show>
<div class="mb-3 row">
<span>
Do you really want to delete the command {command().getTitle()} ({command().getId()})?
</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Cancel
</button>
<button
type="button"
onClick={handleDeleteCommand}
class="btn btn-danger"
>
Delete
</button>
</div>
</Modal>
);
}
DeleteCommandModal.Handler = new ModalHandler();
DeleteCommandModal.setCommand = setCommand;
DeleteCommandModal.onCommandDeleted = (callback) =>
eventEmitter.on(COMMAND_DELETED_EVENT, callback);
export default DeleteCommandModal;