Merge pull request #37 from sybila/fix-fe-issues

Fix FE issues

src/html/component/functions-editor/editor-tile/editor-tile.less

@@ -13,6 +13,15 @@
   height: 1em;
 }
 
+.fa-angle-down, .fa-angle-up {
+  width: 2em;
+}
+
+.var-count {
+  font-size: 0.9em;
+  margin-bottom: -.5em;
+}
+
 #function-editor {
   width: 99%;
 }

src/html/component/functions-editor/editor-tile/function-tile.ts

@@ -147,14 +147,20 @@ export class FunctionTile extends EditorTile {
         <div class="uk-flex uk-flex-row">
           <input id="name-field" class="uk-input uk-text-center" value="${this.functions[this.index].id}"
                  @input="${(e: InputEvent) => this.nameUpdated((e.target as HTMLInputElement).value)}"/>
+          
           <button class="uk-button uk-button-small" @click="${this.addVariable}">
             ${icon(faPlus).node}
           </button>
+          
           <button class="uk-button uk-button-small" @click="${this.removeVariable}">
             ${icon(faTrash).node}
           </button>
+          
           <button class="uk-button uk-button-small" @click="${this.toggleBody}">
-            ${(this.bodyVisible ? icon(faAngleUp) : icon(faAngleDown)).node}
+            <div class="uk-flex uk-flex-column">
+              <span class="var-count">${this.functions[this.index].variables.length}</span>
+              ${(this.bodyVisible ? icon(faAngleUp) : icon(faAngleDown)).node}
+            </div>
           </button>
         </div>
         <div class="functions-body" style="display: ${this.bodyVisible ? 'flex' : 'none'}">

src/html/component/menu/menu.ts

@@ -22,6 +22,10 @@ export default class Menu extends LitElement {
       label: 'New sketch',
       action: () => { void this.newSketch() }
     },
+    {
+      label: 'Import dummy (dev)',
+      action: () => { this.loadDummy() }
+    },
     {
       label: 'Import...',
       action: () => { void this.importSketch() }
@@ -41,6 +45,10 @@ export default class Menu extends LitElement {
     document.addEventListener('click', this.closeMenu.bind(this))
   }
 
+  loadDummy (): void {
+    this.dispatchEvent(new Event('load-dummy', { bubbles: true, composed: true }))
+  }
+
   async importSketch (): Promise<void> {
     const confirmation = await dialog.ask('Are you sure? This operation is irreversible.', {
       type: 'warning',

src/html/component/observations-editor/observations-editor.less

@@ -16,7 +16,7 @@
 
   .container.active .content {
     height: 100%;
-    padding-top: 2em;
+    padding-top: 1em;
   }
 
   .container.active .label::before {

src/html/component/observations-editor/observations-editor.ts

@@ -1,8 +1,8 @@
 import { css, html, LitElement, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import style_less from './observations-editor.less?inline'
 import './observations-set/observations-set'
-import { ContentData, type IObservation, type IObservationSet, DataCategory } from '../../util/data-interfaces'
+import { ContentData, DataCategory, type IObservation, type IObservationSet } from '../../util/data-interfaces'
 import { map } from 'lit/directives/map.js'
 import { dialog } from '@tauri-apps/api'
 import { appWindow, WebviewWindow } from '@tauri-apps/api/window'
@@ -16,16 +16,21 @@ import {
   type ObservationData,
   type ObservationIdUpdateData
 } from '../../../aeon_events'
+import { when } from 'lit/directives/when.js'
 
 @customElement('observations-editor')
 export default class ObservationsEditor extends LitElement {
   static styles = css`${unsafeCSS(style_less)}`
   @property() contentData = ContentData.create()
   index = 0
+  @state() datasetRenameIndex = -1
+  @state() shownDatasets: number[] = []
 
   constructor () {
     super()
 
+    this.addEventListener('rename-dataset', this.renameDataset)
+
     // observations-related event listeners
     aeonState.sketch.observations.datasetLoaded.addEventListener(this.#onDatasetLoaded.bind(this))
     aeonState.sketch.observations.datasetContentChanged.addEventListener(this.#onDatasetContentChanged.bind(this))
@@ -37,6 +42,8 @@ export default class ObservationsEditor extends LitElement {
     this.addEventListener('change-observation', this.changeObservation)
     aeonState.sketch.observations.observationContentChanged.addEventListener(this.#onObservationContentChanged.bind(this))
     aeonState.sketch.observations.observationIdChanged.addEventListener(this.#onObservationIdChanged.bind(this))
+    this.addEventListener('remove-dataset', (e) => { void this.removeDataset(e) })
+    aeonState.sketch.observations.datasetRemoved.addEventListener(this.#onDatasetRemoved.bind(this))
     // TODO add all other events
 
     // refresh-event listeners
@@ -124,7 +131,7 @@ export default class ObservationsEditor extends LitElement {
     } else {
       fileName = handle
     }
-
+    // TODO: move dataset id generation to backend
     aeonState.sketch.observations.loadDataset(fileName, 'dataset' + this.index)
   }
 
@@ -266,6 +273,34 @@ export default class ObservationsEditor extends LitElement {
     }))
   }
 
+  renameDataset (event: Event): void {
+    const detail = (event as CustomEvent).detail
+    this.datasetRenameIndex = this.contentData.observations.findIndex(d => d.id === detail.id);
+    (this.shadowRoot?.querySelector('#set-name-' + this.datasetRenameIndex) as HTMLInputElement)?.focus()
+  }
+
+  async removeDataset (event: Event): Promise<void> {
+    if (!await dialog.confirm('Remove dataset?')) return
+    const detail = (event as CustomEvent).detail
+    aeonState.sketch.observations.removeDataset(detail.id)
+  }
+
+  #onDatasetRemoved (data: DatasetData): void {
+    const datasets = this.contentData.observations.filter(d => d.id !== data.id)
+    this.updateObservations(datasets)
+  }
+
+  toggleDataset (index: number): void {
+    const dsIndex = this.shownDatasets.indexOf(index)
+    if (dsIndex === -1) {
+      this.shownDatasets = this.shownDatasets.concat([index])
+      return
+    }
+    const shownDatasets = [...this.shownDatasets]
+    shownDatasets.splice(dsIndex, 1)
+    this.shownDatasets = shownDatasets
+  }
+
   render (): TemplateResult {
     return html`
       <div class="observations">
@@ -277,27 +312,33 @@ export default class ObservationsEditor extends LitElement {
         <div class="accordion-body">
           <div class="accordion">
             ${map(this.contentData.observations, (dataset, index) => html`
-          <div class="container" id="${'container' + index}">
-            <div class="label" @click="${() => { this.shadowRoot?.getElementById('container' + index)?.classList.toggle('active') }}" >
-              <input 
-                  @input="${(e: InputEvent) => {
-                    this.updateDatasetId((e.target as HTMLInputElement).value, index)
-                  }}"
-                  ?readonly="${true}"
-                  @dblclick="${(e: InputEvent) => {
-                    (e.target as HTMLInputElement).readOnly = !(e.target as HTMLInputElement).readOnly
-                  }}"
-                  class="set-name heading uk-input uk-form-blank"
-                  value="${dataset.id}"/>
-            </div>
-            <div class="content">
-              <observations-set
-                  .data="${dataset}">
-              </observations-set>
-            </div>
-          </div>
-          <hr>
-        `)}
+              <div class="container ${this.shownDatasets.includes(index) ? 'active' : ''}" id="${'container' + index}">
+                <div class="label" @click="${() => {
+                  this.toggleDataset(index)
+                }}">
+                  <input
+                      @input="${(e: InputEvent) => {
+                        this.updateDatasetId((e.target as HTMLInputElement).value, index)
+                      }}"
+                      ?readonly="${this.datasetRenameIndex !== index}"
+                      @keydown="${(e: KeyboardEvent) => {
+                        if (e.key === 'Enter') {
+                          this.datasetRenameIndex = -1
+                        }
+                      }}"
+                      class="set-name heading uk-input uk-form-blank" id="${'set-name-' + index}"
+                      value="${dataset.id}"/>
+                </div>
+                ${when(this.shownDatasets.includes(index), () => html`
+                  <div class="content">
+                    <observations-set
+                        .data="${dataset}">
+                    </observations-set>
+                  </div>
+                `)}
+              </div>
+              <hr>
+            `)}
           </div>
         </div>
       </div>

src/html/component/observations-editor/observations-set/observations-set.less

@@ -4,3 +4,14 @@
   height: 100%;
   overflow-x: auto;
 }
+
+.svg-inline--fa {
+  height: 1em;
+}
+
+.button-label {
+  .uk-flex;
+  .uk-flex-row;
+  .uk-flex-middle;
+  gap: 0.5em;
+}

src/html/component/observations-editor/observations-set/observations-set.ts

@@ -7,6 +7,8 @@ import { type IObservation, type IObservationSet } from '../../../util/data-inte
 import { appWindow, WebviewWindow } from '@tauri-apps/api/window'
 import { type Event as TauriEvent } from '@tauri-apps/api/helpers/event'
 import { checkboxColumn, dataCell, loadTabulatorPlugins, nameColumn, tabulatorOptions } from '../tabulator-utility'
+import { icon } from '@fortawesome/fontawesome-svg-core'
+import { faAdd, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 @customElement('observations-set')
 export default class ObservationsSet extends LitElement {
@@ -176,8 +178,53 @@ export default class ObservationsSet extends LitElement {
     })
   }
 
+  removeDataset (): void {
+    this.dispatchEvent(new CustomEvent('remove-dataset', {
+      detail: {
+        id: this.data.id
+      },
+      bubbles: true,
+      composed: true
+    }))
+  }
+
+  renameDataset (): void {
+    this.dispatchEvent(new CustomEvent('rename-dataset', {
+      detail: {
+        id: this.data.id
+      },
+      bubbles: true,
+      composed: true
+    }))
+  }
+
   render (): TemplateResult {
     return html`
+      <div class="uk-flex uk-flex-row uk-flex-right uk-margin-small-bottom">
+        <button class="uk-button uk-button-small uk-button-secondary"
+                @click=${this.renameDataset}>
+          <div class="button-label">
+            ${icon(faEdit).node}
+            Rename dataset
+          </div>
+          
+        </button>
+        <button class="uk-button uk-button-small uk-button-secondary"
+                @click=${this.pushNewObservation}>
+          <div class="button-label">
+            ${icon(faAdd).node}
+            Add observation
+          </div>
+        </button>
+        <button class="uk-button uk-button-small uk-button-danger"
+                @click=${this.removeDataset}>
+          <div class="button-label">
+            ${icon(faTrash).node}
+            Delete dataset
+          </div>
+          
+        </button>
+      </div>
       <div id="table-wrapper"></div>
     `
   }

src/html/component/properties-editor/abstract-property/abstract-property.less

@@ -15,13 +15,26 @@
   .uk-button;
   .uk-button-small;
   .uk-button-secondary;
+  width: 4em;
 }
 
 .name-field {
   .uk-input;
   .uk-text-center;
 }
 
+.name-section {
+  width: 100%;
+}
+
+.uk-form-label {
+  color: @text-light;
+}
+
+.nameplate {
+  width: 100%;
+}
+
 .static-name-field {
   .uk-form-blank;
   .uk-h4;
@@ -35,6 +48,7 @@
 .remove-property{
   background: @button-light;
   color: @text-light;
+  height: 3em;
 }
 
 .static-name-field {
@@ -50,5 +64,9 @@
   .static-name-field {
     color: @text-dark;
   }
+
+  .uk-form-label {
+    color: @text-dark;
+  }
 }
 

src/html/component/properties-editor/abstract-property/abstract-property.ts

@@ -2,15 +2,13 @@ import { css, LitElement, unsafeCSS } from 'lit'
 import { property } from 'lit/decorators.js'
 import style_less from './abstract-property.less?inline'
 import { type DynamicProperty, type StaticProperty } from '../../../util/data-interfaces'
-import { debounce } from 'lodash'
-import { functionDebounceTimer } from '../../../util/config'
 
 export default class AbstractProperty extends LitElement {
   static styles = css`${unsafeCSS(style_less)}`
   @property() declare property: DynamicProperty | StaticProperty
   @property() declare index: number
 
-  nameUpdated = debounce((name: string, eventName: string) => {
+  nameUpdated (name: string, eventName: string): void {
     this.dispatchEvent(new CustomEvent(eventName, {
       detail: {
         property: {
@@ -21,7 +19,18 @@ export default class AbstractProperty extends LitElement {
       bubbles: true,
       composed: true
     }))
-  }, functionDebounceTimer)
+  }
+
+  idUpdated (oldId: string, newId: string, eventName: string): void {
+    this.dispatchEvent(new CustomEvent(eventName, {
+      detail: {
+        oldId,
+        newId
+      },
+      bubbles: true,
+      composed: true
+    }))
+  }
 
   removeProperty (eventName: string): void {
     this.dispatchEvent(new CustomEvent(eventName, {