From e681ce32049f107c96dee0e3d831189b31eaa9c4 Mon Sep 17 00:00:00 2001
From: justin tucker <129927578+jtuckerfubo@users.noreply.github.com>
Date: Thu, 10 Oct 2024 19:29:11 -0700
Subject: [PATCH] Replaced ConfigControls with AutoRunsEditor, adding expanded
 set of autorun management functions in a dialog. Functions include adding,
 copying, removing, and managing order of autoruns.

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 223 ++++++++++++++++++
 .../RokuAutomationView/ConfigControls.svelte  | 141 -----------
 .../RokuAutomationView.svelte                 |  54 +++--
 3 files changed, 261 insertions(+), 157 deletions(-)
 create mode 100644 webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
 delete mode 100644 webviews/src/views/RokuAutomationView/ConfigControls.svelte

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
new file mode 100644
index 00000000..dd78e6e9
--- /dev/null
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -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>
diff --git a/webviews/src/views/RokuAutomationView/ConfigControls.svelte b/webviews/src/views/RokuAutomationView/ConfigControls.svelte
deleted file mode 100644
index 7e50bf60..00000000
--- a/webviews/src/views/RokuAutomationView/ConfigControls.svelte
+++ /dev/null
@@ -1,141 +0,0 @@
-<script lang="ts">
-    export let selectedConfig; // string
-    export let configs; // array of configs
-
-    let showModal;
-    let inputValue = '';
-    let _inputValue = inputValue;
-    let dialog;
-
-    $: if (inputValue !== '') {
-        let found = configs.find((c) => c.name === inputValue);
-        if (!found) configs.push({ name: inputValue, steps: [] });
-        selectedConfig = inputValue;
-        inputValue = '';
-        configs = configs;
-    }
-
-    const pressOK = () => {
-        if (typeof _inputValue === 'string' && _inputValue !== '') {
-            inputValue = _inputValue;
-            // @ts-ignore
-            _inputValue = '';
-            console.log(`***** Pressed OK and inputValue=${inputValue}`);
-            showModal = false;
-            dialog.close();
-        }
-    };
-
-    $: if (dialog && showModal) dialog.showModal();
-
-    function deleteConfig() {
-        configs = configs.filter((c) => c.name !== selectedConfig);
-        selectedConfig = configs[0].name;
-    }
-</script>
-
-<style>
-    .button-group {
-        display: inline;
-    }
-    .btn {
-        border: none;
-        color: black;
-        border: 1px solid lightgray;
-        font-size: 16px;
-        cursor: pointer;
-    }
-
-    .btn:hover {
-        background-color: RoyalBlue;
-    }
-    dialog {
-        max-width: 32em;
-        border-radius: 0.2em;
-        border: none;
-        padding: 0;
-    }
-    dialog::backdrop {
-        background: rgba(0, 0, 0, 0.3);
-    }
-    dialog > div {
-        padding: 1em;
-    }
-    dialog[open] {
-        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    }
-    @keyframes zoom {
-        from {
-            transform: scale(0.95);
-        }
-        to {
-            transform: scale(1);
-        }
-    }
-    dialog[open]::backdrop {
-        animation: fade 0.2s ease-out;
-    }
-    @keyframes fade {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-    button {
-        display: inline;
-    }
-</style>
-
-<link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
-<span class="config-controls">
-    <span>
-        <select bind:value={selectedConfig} title="Automation configurations">
-            {#each configs ?? [] as config}
-                <option value={config.name}>{config.name}</option>
-            {/each}
-        </select>
-
-        <span class="button-group">
-            <button
-                on:click={() => (showModal = true)}
-                title="Create a new configuration"
-                class="btn"><i class="fa fa-plus"></i></button>
-            <button
-                on:click={deleteConfig}
-                title="Delete the current configuration"
-                class="btn"><i class="fa fa-minus"></i></button>
-        </span>
-    </span>
-</span>
-
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog
-    bind:this={dialog}
-    on:close={() => (showModal = false)}
-    on:click|self={() => dialog.close()}>
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div on:click|stopPropagation>
-        <h2> Create a new configuration </h2>
-
-        <!-- svelte-ignore a11y-autofocus -->
-        <input
-            autofocus
-            type="text"
-            placeholder="Enter config name"
-            bind:value={_inputValue} />
-        <hr />
-        <ul class="definition-list">
-            <li>A configuration is a named set of autorun steps</li>
-            <li>Configurations are automatically saved</li>
-        </ul>
-
-        <hr />
-        <!-- svelte-ignore a11y-autofocus -->
-        <button autofocus on:click={() => pressOK()}>create</button>
-        <button on:click={() => dialog.close()}>close</button>
-    </div>
-</dialog>
diff --git a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
index 51f5eae8..509aa0a2 100644
--- a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
+++ b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
@@ -1,11 +1,11 @@
 <!-- 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 ConfigControls from './ConfigControls.svelte';
+    import AutoRunsEditor from './AutoRunsEditor.svelte';
 
     window.vscode = acquireVsCodeApi();
 
@@ -13,15 +13,37 @@
     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);
+        }
+    };
 
-    $: if (!configs || configs.length === 0) {
-        selectedConfig = 'DEFAULT';
-        configs = [ { name: selectedConfig, steps: [{ type: 'sleep', value: '8' }] } ];
-    }
+    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 (selectedConfig) {
-        steps = configs.find((c) => c.name === selectedConfig)?.steps ?? [];
-        storeConfigs(steps);
+    $: if (!configs || configs.length === 0) {
+        validateState();
     }
 
     const stepTypes = {
@@ -66,12 +88,11 @@
     }[];
 
     function storeConfigs(updatedSteps) {
+        configs.find((c) => c.name === selectedConfig).steps = updatedSteps;
+
         if(!loading) {
-            configs = [
-                { name: selectedConfig, steps: updatedSteps },
-                ...configs.filter((c) => c.name !== selectedConfig)
-            ]
             intermediary.sendCommand(ViewProviderCommand.storeRokuAutomationConfigs, {
+                selectedConfig: selectedConfig,
                 configs: configs
             });
         }
@@ -151,8 +172,8 @@
 
     intermediary.observeEvent(ViewProviderEvent.onRokuAutomationConfigsLoaded, (message) => {
         configs = message.context.configs;
-        selectedConfig = configs[0].name;
-        steps = configs[0].steps;
+        selectedConfig = message.context.selectedConfig;
+        validateState();
         loading = false;
     });
 
@@ -309,6 +330,7 @@
     {:else}
             <vscode-button id={0} on:click={runConfig}>Run</vscode-button>
             <vscode-button id={0} on:click={clearConfig} appearance="secondary">Clear</vscode-button>
-            <ConfigControls bind:selectedConfig={selectedConfig} bind:configs={configs} />
+	        <AutoRunsEditor bind:this={autoRunsEditor} />
+	        <vscode-button class="editAutoRuns" on:click={editAutoRuns}>Current run: {selectedConfig}</vscode-button>
     {/if}
 </div>