Merge remote-tracking branch 'origin/dev' into feature/#166-indicator…

…s-remove-bouncing-balls # Conflicts: # Apps/frontend/src/views/Oscilloscope.svelte
amosproj · Jan 22, 2023 · 4ecc8f5 · 4ecc8f5
2 parents 1792e49 + 89e95cc
commit 4ecc8f5
Show file tree

Hide file tree

Showing 26 changed files with 414 additions and 146 deletions.
diff --git a/Apps/frontend/cypress/e2e/2-control-panel/preset-config.cy.js b/Apps/frontend/cypress/e2e/2-control-panel/preset-config.cy.js
@@ -6,15 +6,15 @@ describe("everything visible on front page", () => {
   });
 
   it("displays btn", () => {
-    cy.get("#managePresets").should("be.visible");
+    cy.get('[data-cy="settings-button"]').should("be.visible");
   });
 
   it("is clickable", () => {
-    cy.get('[data-cy="preset-config-open-popup"]').click();
-    cy.get("#getChannelConfig").should("be.visible");
-    cy.get("#availablePreset").should("be.visible");
-    cy.get("#presetName").should("be.visible");
-    cy.get("#storeChannelConfig").should("be.visible");
-    cy.get("#cancelChannelConfig").should("be.visible");
+    cy.get('[data-cy="settings-button"]').click();
+    cy.get('[data-cy="preset-config-open-popup"]').should("be.visible");
+    cy.get('[data-cy="load-channel-config"]').should("be.visible");
+    cy.get('[data-cy="available-presets-list"]').should("be.visible");
+    cy.get('[data-cy="selected-preset"]').should("be.visible");
+    cy.get('[data-cy="store-channel-config"]').should("be.visible");
   });
 });
diff --git a/Apps/frontend/cypress/e2e/4-control-panel-bottom/amplitude-slider.cy.js b/Apps/frontend/cypress/e2e/4-control-panel-bottom/amplitude-slider.cy.js
@@ -12,14 +12,14 @@ describe("amplitudeSlider", () => {
   it(`has label that displays reciprocal value "Infinity"`, () => {
     cy.get(`[data-cy="amplitudeSlider-0"]`).within(() => {
       cy.get('[type="range"]').invoke("val", 2).trigger("change");
-      cy.get("span").should("have.text", "0.50");
+      cy.get("div").should("have.text", "0.50");
     });
   });
 
   it(`has label that displays reciprocal value "Infinity" for value 0`, () => {
     cy.get(`[data-cy="amplitudeSlider-1"]`).within(() => {
       cy.get('[type="range"]').invoke("val", 0).trigger("change");
-      cy.get("span").should("have.text", "Infinity");
+      cy.get("div").should("have.text", "Infinity");
     });
   });
 

diff --git a/Apps/frontend/src/app.scss b/Apps/frontend/src/app.scss
@@ -38,6 +38,16 @@ img {
   height: 92%;
 }
 
+input[type="text"] {
+  height: calc(0.5vmax + 1.5em);
+  margin: 1%;
+}
+
+select {
+  height: calc(0.5vmax + 1.5em);
+  margin: 1%;
+}
+
 input[type="range"] {
   width: 40%;
   appearance: none;
@@ -78,6 +88,16 @@ nav {
   .icon-button {
     filter: invert(0) !important;
   }
+
+  .control-panel--bottom > table {
+    & tr:nth-child(even) {
+      background-color: #efefef !important;
+    }
+
+    & tr:nth-child(odd) {
+      background-color: white !important;
+    }
+  }
 }
 
 .wrapper {
@@ -97,12 +117,40 @@ nav {
   overflow: auto;
 }
 
+.slider_label {
+  display: inline;
+}
+
 .logo {
   grid-column: 1;
   grid-row: 1;
 }
 
 
+.settings {
+  &--close {
+    display: flex;
+  }
+  &--headline {
+    display: inline;
+  }
+  &--headline-section {
+    width: fit-content;
+    margin: 0;
+  }
+  &--list-element {
+    display: table;
+    width: fit-content;
+    & > div {
+      display: table-cell;
+
+      & > div {
+        display: table-cell;
+      }
+    }
+  }
+}
+
 .oscilloscope {
   grid-column: 3;
   grid-row: 2;
@@ -158,6 +206,7 @@ nav {
     grid-column: 1/6;
     grid-row: 3;
     padding: 0.5% 0;
+    padding-top: 12px;
 
     &_switch {
       width: 28px;
@@ -187,36 +236,60 @@ nav {
     }
 
     & > table {
+      display: flex;
+      flex-flow: column;
+      height: 100%;
       width: 100%;
-      text-align: center;
-      border-collapse: collapse;
-      table-layout: fixed;
+      border-collapse: unset;
 
-      & > th {
-        vertical-align: middle;
-        font-weight: normal;
+      & tr:nth-child(even) {
+        background-color: #242424;
       }
 
-      & > * {
-        padding: 0;
-        margin: 0;
-        width: auto;
-
-        & > * {
-          padding: 0;
-          margin: 0;
-        }
+      & tr:nth-child(odd) {
+        background-color: #404040;
       }
     }
+    & > table thead {
+      /* head takes the height it requires, 
+      and it's not scaled when table is resized */
+      flex: 0 0 auto;
+      width: calc(100% - 0.9em);
+    }
+    & > table tbody {
+      /* body takes all the remaining available space */
+      flex: 1 1 auto;
+      display: block;
+      overflow-y: scroll;
+    }
+    & > table tbody tr {
+      width: 100%;
+      text-align: center;
+    }
+    & > table thead,
+    table tbody tr {
+      display: table;
+      table-layout: fixed;
+    }
+    & > tr {
+      padding: 3px;
+    }
   }
 
   &--entry {
-    & > span {
-      position: absolute;
+    & > input {
+      background-color: #222222;
     }
   }
 }
 
+.margin {
+  &--small {
+    margin-right: 5px;
+    margin-left: 5px;
+  }
+}
+
 .icon-button {
   border-radius: 100%;
   border: 0;
@@ -232,9 +305,18 @@ nav {
     padding: 2vmax !important;
   }
 
+  &--big {
+    padding: 2.5vmax !important;
+  }
+
   &:hover {
     background-color: rgba(127, 127, 127, 0.1) !important;
   }
+
+  &:disabled {
+    filter: invert(0.5);
+    cursor: not-allowed;
+  }
 }
 
 .screen-size-warning {
@@ -277,4 +359,16 @@ nav {
   &--distribute {
     background-image: url("./assets/mui_distribute.svg");
   }
+
+  &--save {
+    background-image: url("./assets/mui_save.svg");
+  }
+
+  &--publish {
+    background-image: url("./assets/mui_publish.svg");
+  }
+
+  &--settings {
+    background-image: url("./assets/mui_settings.svg");
+  }
 }
diff --git a/Apps/frontend/src/assets/mui_publish.svg b/Apps/frontend/src/assets/mui_publish.svg
diff --git a/Apps/frontend/src/assets/mui_save.svg b/Apps/frontend/src/assets/mui_save.svg
diff --git a/Apps/frontend/src/assets/mui_settings.svg b/Apps/frontend/src/assets/mui_settings.svg
diff --git a/Apps/frontend/src/components/SettingsButton.svelte b/Apps/frontend/src/components/SettingsButton.svelte
@@ -0,0 +1,41 @@
+<script>
+  import SettingsPopup from "../views/SettingsPopup.svelte";
+  import { presetPopupOpen } from "../stores";
+  import { fly } from "svelte/transition";
+  import { getAllChannelConfig } from "../rest/ChannelConfigController";
+  import { availableChannelConfigPresets } from "../stores";
+  import { clickOutside } from "../helper";
+
+  $: panelHeight = 0;
+
+  async function loadAllChannelConfigPresets() {
+    var response = await getAllChannelConfig();
+    if (response !== undefined) availableChannelConfigPresets.set(response);
+  }
+
+  function showPopup() {
+    $presetPopupOpen = true;
+    loadAllChannelConfigPresets();
+  }
+</script>
+
+{#if $presetPopupOpen}
+  <nav
+    class="control-panel--bottom"
+    transition:fly={{ y: panelHeight, opacity: 1 }}
+    bind:clientHeight={panelHeight}
+    use:clickOutside
+    on:click-outside={() => ($presetPopupOpen = false)}
+    data-cy="expanded-preset-popup"
+  >
+    <SettingsPopup />
+  </nav>
+{/if}
+
+<div>
+  <button
+    class="icon-button mui-icon--settings"
+    on:click={showPopup}
+    data-cy="settings-button"
+  />
+</div>
diff --git a/Apps/frontend/src/components/Slider.svelte b/Apps/frontend/src/components/Slider.svelte
@@ -14,6 +14,6 @@
 <div class={className} data-cy={dataCy}>
   <input {id} type="range" bind:value on:input={onInput} {min} {max} {step} />
   {#if calculateDisplayedValue !== undefined}
-    <span>{calculateDisplayedValue(value)}</span>
+    <div class="slider_label">{calculateDisplayedValue(value)}</div>
   {/if}
 </div>
diff --git a/Apps/frontend/src/helper.js b/Apps/frontend/src/helper.js
@@ -71,3 +71,22 @@ export const logSocketCloseCode = (code) => {
       console.log("Socket closed due to unknown reason.");
   }
 };
+
+/**
+ * The function introduces an event handler to check if there is a click
+ * event outside the chosen element.
+ * To attach the handler add `use:clickOutside` to the node properties.
+ */
+export const clickOutside = (element) => {
+  const handleClick = (event) => {
+    if (element && !element.contains(event.target) && !event.defaultPrevented) {
+      element.dispatchEvent(new CustomEvent("click-outside", element));
+    }
+  };
+  document.addEventListener("click", handleClick, true);
+  return {
+    destroy() {
+      document.removeEventListener("click", handleClick, true);
+    },
+  };
+};
diff --git a/Apps/frontend/src/labels.js b/Apps/frontend/src/labels.js
@@ -1,12 +1,7 @@
 /* Labels used in the UI */
 
-export const LABEL_BUTTON_MANAGE_CHANNEL_CONFIG = "Manage presets";
-export const LABEL_HEADER_LOAD_FROM_LIST_CHANNEL_CONFIG =
-  "Load existing preset from list:";
-export const LABEL_HEADER_CREATE_CHANNEL_CONFIG = "Create new preset:";
-export const LABEL_BUTTON_LOAD_CHANNEL_CONFIG = "Load";
-export const LABEL_BUTTON_UPDATE_CHANNEL_CONFIG = "Save";
-export const LABEL_BUTTON_CANCEL_CHANNEL_CONFIG = "Cancel";
+export const LABEL_HEADER_LOAD_FROM_LIST_CHANNEL_CONFIG = "Load Existing:";
+export const LABEL_HEADER_CREATE_CHANNEL_CONFIG = "Create New: ";
 
 /* Log messages */
 export const ERR_MSG_COULD_NOT_RETRIEVE_CHANNEL_CONFIG =

diff --git a/Apps/frontend/src/rest/ChannelConfigController.js b/Apps/frontend/src/rest/ChannelConfigController.js
@@ -5,7 +5,7 @@ import {
   ERR_MSG_COULD_NOT_STORE_CHANNEL_CONFIG,
 } from "../labels";
 
-export function getAllChannelConfig(presetName) {
+export function getAllChannelConfig() {
   var response = axios
     .get(REST_ENDPOINT_CONFIG, {
       headers: {
@@ -14,7 +14,7 @@ export function getAllChannelConfig(presetName) {
       },
     })
     .then((response) => response.data)
-    .catch(function (error) {
+    .catch(function (_) {
       console.error(ERR_MSG_COULD_NOT_RETRIEVE_CHANNEL_CONFIG);
     });
   return response;

diff --git a/Apps/frontend/src/views/ChannelConfigControlPanel.svelte b/Apps/frontend/src/views/ChannelConfigControlPanel.svelte
@@ -33,7 +33,10 @@
 {/if}
 
 <div>
-  <button id="managePresets" on:click={showPopup} data-cy="preset-config-open-popup"
+  <button
+    id="managePresets"
+    on:click={showPopup}
+    data-cy="preset-config-open-popup"
     >{LABEL_BUTTON_MANAGE_CHANNEL_CONFIG}</button
   >
 </div>
diff --git a/Apps/frontend/src/views/ChannelConfigPopup.svelte b/Apps/frontend/src/views/ChannelConfigPopup.svelte
@@ -1,6 +1,5 @@
 <script>
   import { createEventDispatcher } from "svelte";
-  import { NUM_CHANNELS } from "../const";
   import {
     getChannelConfig,
     postChannelConfig,
@@ -31,12 +30,12 @@
     if (response !== undefined) setLiveChannelConfig(response.channels);
 
     dispatch(EVENT_LOADED_CHANNEL_CONFIG, {});
-    $presetPopupOpen = false
+    $presetPopupOpen = false;
   }
 
   async function storeChannelConfig() {
     await postChannelConfig(getLiveChannelConfig(), presetName);
-    $presetPopupOpen = false
+    $presetPopupOpen = false;
   }
 
   function handleSaveButton() {