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
+270 −17
Open

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

Show file tree
Hide file tree
Changes from 1 commit
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
141 changes: 141 additions & 0 deletions webviews/src/views/RokuAutomationView/ConfigControls.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<script>
jtuckerfubo marked this conversation as resolved.
Show resolved Hide resolved
export let selectedConfig; // string
export let configs; // array of configs

let showModal;
let inputValue = '';
let _inputValue = inputValue;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the reason for having both inputValue and _inputValue?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_inputValue changed at a high cadence (with every key press) and needed inputValue to update on commit - may have changed since I added and will revisit this

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" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have an icons library available, so let's remove this dynamic web import in favor of those.

vscode-brightscript-language/webviews/src/views/RokuFileSystemView/RokuFileSystemView.svelte

Line 5 in 923a317

import { Database, ChevronUp, ChevronDown } from 'svelte-codicons';

Here's the list of all icons available. https://code.visualstudio.com/api/references/icons-in-labels#icon-listing

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep - in the process of polishing (one reason why I added as a draft, so you could review the functionality while I clean it up)

<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>
40 changes: 24 additions & 16 deletions webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,25 @@
import { ViewProviderEvent } from '../../../../src/viewProviders/ViewProviderEvent';
import { ViewProviderCommand } from '../../../../src/viewProviders/ViewProviderCommand';
import NumberField from '../../shared/NumberField.svelte';
import ConfigControls from './ConfigControls.svelte';

window.vscode = acquireVsCodeApi();

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

$: if (!configs || configs.length === 0) {
selectedConfig = 'DEFAULT';
configs = [ { name: selectedConfig, steps: [{ type: 'sleep', value: '8' }] } ];
}

$: if (selectedConfig) {
steps = configs.find((c) => c.name === selectedConfig)?.steps ?? [];
storeConfigs(steps);
}

const stepTypes = {
sleep: {
type: 'sleep',
Expand Down Expand Up @@ -54,11 +67,12 @@

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

Expand Down Expand Up @@ -136,16 +150,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 = configs[0].name;
steps = configs[0].steps;
loading = false;
});

Expand Down Expand Up @@ -300,7 +307,8 @@
{#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>
<ConfigControls bind:selectedConfig={selectedConfig} bind:configs={configs} />
{/if}
</div>