Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added controls to display, select, add, and remove automation configs #599

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

added controls to display, select, add, and remove automation configs #599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d15c564
added controls to display, select, add, and remove automation configs
jtuckerfubo Oct 8, 2024
7accd13
Update webviews/src/views/RokuAutomationView/ConfigControls.svelte
jtuckerfubo Oct 8, 2024
e681ce3
Replaced ConfigControls with AutoRunsEditor, adding expanded set of
jtuckerfubo Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 223 additions & 0 deletions webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
<script lang="ts">
let runs;
let selectedRun;
let dialog;
let getNameDialog;
let defaultName;
let callback;

$: {
if (!runs) runs = [];
if (runs.findIndex((r) => r.name === selectedRun) === -1)
selectedRun = runs[0]?.name;

// force reactivity to work around vscode-dropdown limitation
const temp = selectedRun;
selectedRun = null;
selectedRun = temp;
}

// entry point for the editor
export const show = async (params) => {
return new Promise((resolve, reject) => {
try {
dialog.addEventListener('close', (e) => {
const ok = e.target.returnValue === 'ok';
resolve({
ok: ok,
runs: ok ? runs : undefined,
selectedRun: ok ? (selectedRun ?? '') : undefined
});
});
runs = params?.runs ?? [];
selectedRun = params?.selectedRun ?? '';
dialog.showModal();
} catch (e) {
reject(e);
}
});
};

function createRun() {
defaultName = 'DEFAULT';
callback = (e) => {
const name = e.target.returnValue;
getNameDialog.removeEventListener('close', callback);
if (name) {
selectedRun = name;
runs = [
{ name: name, steps: [] },
...runs.filter((r) => r.name !== name)
];
}
};
getNameDialog.addEventListener('close', callback);
getNameDialog.showModal();
}

function copyRun() {
if (!selectedRun || !runs || runs.length === 0) return;
defaultName = `Copy of ${selectedRun}`;
callback = (e) => {
const name = e.target.returnValue;
getNameDialog.removeEventListener('close', callback);
if (name) {
const steps = runs.find((r) => r.name === selectedRun)?.steps ?? [];
selectedRun = name;
runs = [
{ name: name, steps: structuredClone(steps) },
...runs.filter((r) => r.name !== name)
];
}
};
getNameDialog.addEventListener('close', callback);
getNameDialog.showModal();
}

function deleteRun() {
if (!selectedRun || !runs || runs.length === 0) return;
runs = runs.filter((r) => r.name !== selectedRun);
}

function moveUp() {
if (!selectedRun || !runs || runs.length === 0) return;
const index = runs.findIndex((r) => r.name === selectedRun);
if (index > 0) {
const temp = runs[index - 1];
runs[index - 1] = runs[index];
runs[index] = temp;
}
}

function moveDown() {
if (!selectedRun || !runs || runs.length === 0) return;
const index = runs.findIndex((r) => r.name === selectedRun);
if (index < runs.length - 1) {
const temp = runs[index + 1];
runs[index + 1] = runs[index];
runs[index] = temp;
}
}

const commitName = () => {
const name = (document.getElementById('run-name') as HTMLInputElement)
.value;
getNameDialog.close(name);
};

const discardName = () => getNameDialog.close('');

const selectText = e => e.target.select();
</script>

<style>
.horizontal-container {
display: flex;
flex-flow: row;
}
.vertical-container {
display: flex;
flex-flow: column;
}
#dialog {
background-color: black;
}
#getNameDialog {
background-color: black;
border-style: solid;
border-color: skyblue;
}
.page {
border-style: solid;
border-color: dodgerblue;
}
.header {
padding: 5px;
align-items: center;
justify-content: center;
}
.body {
padding: 5px;
}
.footer {
margin-top: auto;
padding: 5px;
}
.vertical-container.long-panel {
margin-right: 25px;
}
.button-group {
gap: 12px;
}
vscode-button {
margin-top: 5px;
}
hr {
width: 100%;
height: 2px;
border-width: 0;
color: gray;
background-color: gray;
}
h2 {
color: white;
}
h3 {
color: white;
margin-top: -5px;
}
</style>

<dialog id="dialog" bind:this={dialog}>
<div class="page vertical-container">
<div class="header vertical-container">
<h2>Manage Autoruns</h2>
</div>
<div class="body vertical-container">
<div class="panels horizontal-container">
<div class="long-panel vertical-container">
<vscode-dropdown size="10" value={selectedRun} on:change={(e) => selectedRun = e.target.value}>
{#each runs as run}
<vscode-option title={run.name} value={run.name}
>{run.name}</vscode-option>
{/each}
</vscode-dropdown>
</div>
<div class="long-panel vertical-container">
<div class="vertical-container">
<vscode-button on:click={createRun}
>Create</vscode-button>
<vscode-button on:click={copyRun}>Copy</vscode-button>
<vscode-button on:click={deleteRun}
>Delete</vscode-button>
<vscode-button on:click={moveUp}>Move up</vscode-button>
<vscode-button on:click={moveDown}
>Move down</vscode-button>
</div>
</div>
</div>
</div>
<div class="footer vertical-container">
<hr />
<div class="button-group horizontal-container">
<button style="margin-left: auto;"
on:click={() => dialog.close('ok')}
value="cancel-button">OK</button>
<button
on:click={() => dialog.close('cancel')}
value="cancel-button">Cancel</button>
</div>
</div>
</div>
</dialog>

<dialog id="getNameDialog" bind:this={getNameDialog}>
<h3>Enter Run Name</h3>
<div style="margin-bottom: 6px;">
<input id="run-name" placeholder="Enter run name" bind:value={defaultName} on:focus={selectText} autofocus/>
</div>
<div class="button-group horizontal-container">
<button on:click={commitName}>OK</button>
<button on:click={discardName}>Cancel</button>
</div>
</dialog>
64 changes: 47 additions & 17 deletions webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,50 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<script lang="ts">
import { odc, intermediary } from '../../ExtensionIntermediary';
import { intermediary } from '../../ExtensionIntermediary';
import { Trash, Add, ArrowUp, ArrowDown } from 'svelte-codicons';
import { ViewProviderEvent } from '../../../../src/viewProviders/ViewProviderEvent';
import { ViewProviderCommand } from '../../../../src/viewProviders/ViewProviderCommand';
import NumberField from '../../shared/NumberField.svelte';
import AutoRunsEditor from './AutoRunsEditor.svelte';

window.vscode = acquireVsCodeApi();

let configs;
let selectedConfig;
let loading = true;
let currentRunningStep = -1;
let autoRunsEditor;

const editAutoRuns = async () => {
const retval = await autoRunsEditor.show({runs: configs, selectedRun: selectedConfig});
if (retval.ok) {
configs = retval.runs;
selectedConfig = retval.selectedRun;
validateState();
storeConfigs(steps);
}
};

const validateState = () => {
if (!configs || configs.length === 0) {
configs = [{ }];
}
if (!selectedConfig || configs.findIndex((c) => c.name === selectedConfig) === -1) {
if (!configs[0].name) {
configs[0].name = 'DEFAULT';
}
selectedConfig = configs[0].name;
}
let cfg = configs.find((c) => c.name === selectedConfig);
if (!cfg.steps) {
cfg.steps = [{ type: 'sleep', value: '8' }];
}
steps = cfg.steps;
};

$: if (!configs || configs.length === 0) {
validateState();
}

const stepTypes = {
sleep: {
Expand Down Expand Up @@ -53,12 +88,12 @@
}[];

function storeConfigs(updatedSteps) {
configs.find((c) => c.name === selectedConfig).steps = updatedSteps;

if(!loading) {
intermediary.sendCommand(ViewProviderCommand.storeRokuAutomationConfigs, {
configs: [{
name: 'DEFAULT',
steps: updatedSteps
}]
selectedConfig: selectedConfig,
configs: configs
});
}

Expand Down Expand Up @@ -136,16 +171,9 @@
}

intermediary.observeEvent(ViewProviderEvent.onRokuAutomationConfigsLoaded, (message) => {
const configs = message.context.configs;
if (configs) {
const config = configs[0];
steps = config.steps;
} else {
steps = [{
type: 'sleep',
value: '8'
}];
}
configs = message.context.configs;
selectedConfig = message.context.selectedConfig;
validateState();
loading = false;
});

Expand Down Expand Up @@ -300,7 +328,9 @@
{#if currentRunningStep >= 0}
<vscode-button id={0} on:click={stopConfig}>Stop</vscode-button>
{:else}
<vscode-button id={0} on:click={runConfig}>Run</vscode-button>
<vscode-button id={0} on:click={clearConfig} appearance="secondary">Clear</vscode-button>
<vscode-button id={0} on:click={runConfig}>Run</vscode-button>
<vscode-button id={0} on:click={clearConfig} appearance="secondary">Clear</vscode-button>
<AutoRunsEditor bind:this={autoRunsEditor} />
<vscode-button class="editAutoRuns" on:click={editAutoRuns}>Current run: {selectedConfig}</vscode-button>
{/if}
</div>