ezekiel-cli 5.8.2

package/gui/v1/src/routes/constants/+page.svelte

@@ -0,0 +1,382 @@
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { fade } from 'svelte/transition';
+import { constant } from '$lib/api/constant.js';
+import { state } from '$lib/state.js';
+
+import Icon from '$lib/ui/Icon.svelte';
+
+
+// properties
+// ------------------------------------------------------------------------
+// string used for filtering (string)
+let filter = '';
+// list of constants (array)
+let items = [];
+
+
+// get constants list
+(async () => await constant.get())().then(response => { items = response; });
+
+
+// purpose:		adds a .hidden property to each log item if not matching the string
+// attributes:	string you want to filter the logs with (string)
+// ------------------------------------------------------------------------
+const isFiltered = (constant) => {
+  if(constant.name.toLowerCase().indexOf(filter.toLowerCase()) === -1 && constant.value.toLowerCase().indexOf(filter.toLowerCase()) === -1){
+    return true;
+  } else {
+    return false;
+  }
+};
+
+
+// purpose:		updates the constant
+// attributes:	string you want to filter the logs with (string)
+//				index of the item that was changed (object)
+// ------------------------------------------------------------------------
+const update = async (event, itemIndex) => {
+  event.preventDefault();
+
+  const edit = await constant.edit(new FormData(event.target));
+
+  if(!edit.errors){
+    items[itemIndex].changed = false;
+    state.highlight('constant', edit.constant_set.name);
+    state.notification.create('success', `Constant ${edit.constant_set.name} updated`);
+  } else {
+    state.notification.create('error', `Failed to update ${edit.constant_set.name} constant`);
+  }
+};
+
+
+const remove = async (event) => {
+  event.preventDefault();
+
+  if(confirm('Are you sure you want to delete this constant?')){
+
+    const remove = await constant.delete(new FormData(event.target));
+
+    if(!remove.errors){
+      state.notification.create('success', `Constant ${remove.constant_unset.name} deleted`);
+      await constant.get().then(response => { items = response; });
+    } else {
+      state.notification.create('success', `Failed to delete ${remove.constant_unset.name} constant`);
+    }
+
+  }
+};
+
+
+const create = async (event) => {
+  event.preventDefault();
+
+  const create = await constant.edit(new FormData(event.target));
+
+  if(!create.errors){
+    event.target.reset();
+    state.notification.create('success', `Constant ${create.constant_set.name} created`);
+    await constant.get().then(response => { items = response; state.highlight('constant', create.constant_set.name); })
+  } else {
+    state.notification.create('error', `Failed to create ${create.constant_set.name} constant`);
+  }
+}
+
+</script>
+
+
+<!-- ================================================================== -->
+<style>
+
+nav {
+  width: 100%;
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 82px;
+  z-index: 10;
+
+  border-bottom: 1px solid var(--color-frame);
+  background-color: rgba(var(--color-rgb-background), .8);
+  backdrop-filter: blur(17px);
+  -webkit-backdrop-filter: blur(17px);
+}
+
+  nav input {
+    padding-inline-end: 2rem;
+  }
+
+  .clearFilter {
+    padding: .5rem;
+    position: relative;
+    left: -2.3rem;
+
+    cursor: pointer;
+  }
+
+  .clearFilter .label {
+    position: absolute;
+    left: -100vw;
+  }
+
+  .clearFilter:hover {
+    color: var(--color-interaction);
+  }
+
+
+.create {
+  max-width: 1150px;
+  margin-inline: auto;
+  margin-block-start: 2rem;
+  padding: 1rem 3.6rem 1rem 5.2rem;
+
+  border-radius: 1rem;
+  background-color: var(--color-background);
+}
+
+.create form {
+  display: grid;
+  grid-template-columns: .7fr 1fr auto;
+  align-items: center;
+  gap: 1rem;
+}
+
+.create input[name="name"] {
+  font-family: monospace;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.create fieldset:last-of-type {
+  margin-inline-start: .5em;
+}
+
+.create label {
+  margin-block-end: .4em;
+  display: block;
+}
+
+.create input {
+  width: 100%;
+}
+
+.create .button {
+  margin-inline-end: -1.6rem;
+
+  align-self: end;
+}
+
+
+ul {
+  max-width: 1100px;
+  margin-inline: auto;
+  margin-block-start: 2rem;
+  padding-inline: 2rem;
+}
+
+li {
+  margin-block-end: 1rem;
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: .2rem;
+}
+
+  li.hidden {
+    display: none;
+  }
+
+
+.delete {
+  opacity: 0;
+
+  transition: opacity .1s linear;
+}
+
+  li:hover .delete {
+    opacity: 1;
+  }
+
+.delete button {
+  padding: .7rem;
+
+  cursor: pointer;
+
+  color: var(--color-danger);
+}
+
+.delete .label {
+  position: absolute;
+  left: -100vw;
+}
+
+
+.edit {
+  display: grid;
+  grid-template-columns: .7fr 1fr auto;
+  align-items: center;
+  gap: 1rem;
+}
+
+.edit label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  font-family: monospace;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'password';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
+  font-display: block;
+}
+
+.edit input {
+  width: 100%;
+  padding-inline-end: 3rem;
+
+  font-family: 'password';
+  line-height: 18px;
+  letter-spacing: 1px;
+  color: var(--color-text-secondary);
+}
+
+.edit input.exposed {
+  font-family: var(--font-normal);
+  letter-spacing: 0;
+  color: var(--color-text);
+}
+
+.edit fieldset {
+  position: relative;
+}
+
+.edit .toggleExposition {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: .5em;
+  top: 0;
+  bottom: 0;
+
+  cursor: pointer;
+
+  opacity: 0;
+
+  color: var(--color-text-secondary);
+
+  transition: all .1s linear;
+}
+
+  .edit:hover .toggleExposition {
+    opacity: 1;
+  }
+
+  .edit .toggleExposition:hover {
+    color: var(--color-interaction);
+  }
+
+  .edit .toggleExposition .label {
+    position: absolute;
+    left: -100vw;
+  }
+
+.edit button[type="submit"] {
+  opacity: 0;
+
+  transition: opacity .1s linear;
+}
+
+  .edit button.needed {
+    opacity: 1;
+  }
+
+
+.highlighted input {
+  background-color: var(--color-highlight);
+}
+
+</style>
+
+
+
+<!-- ================================================================== -->
+<svelte:head>
+  <title>Insites CLI | Constants</title>
+</svelte:head>
+
+
+<nav>
+  <form>
+    <label for="filter">Find:</label>
+    <input type="text" id="filter" bind:value={filter} autofocus>
+    {#if filter}
+      <button class="clearFilter" on:click={() => filter = ''}>
+        <span class="label">Clear filter</span>
+        <Icon icon="x" size=12 />
+      </button>
+    {/if}
+  </form>
+</nav>
+
+<section class="create">
+  <form on:submit|preventDefault={create}>
+    <fieldset>
+      <label for="newName">Name</label>
+      <input type="text" name="name" id="newName" placeholder="MY_NEW_CONSTANT">
+    </fieldset>
+    <fieldset>
+      <label for="newValue">Value</label>
+      <input type="text" name="value" id="newValue">
+    </fieldset>
+    <button class="button">
+      Add
+      <Icon icon="arrowRight" />
+    </button>
+  </form>
+</section>
+
+<ul>
+
+  {#each items as item, index}
+    <li class:hidden={filter && isFiltered(item)} class:highlighted={$state.highlighted.constant === item.name} in:fade={{ duration: 100, delay: 10 * index }}>
+      <form class="delete" on:submit|preventDefault={event => remove(event)}>
+        <input type="hidden" name="name" value={item.name}>
+        <button type="submit" title="Delete constant">
+          <span class="label">Delete constant</span>
+          <Icon icon="x" size="14" />
+        </button>
+      </form>
+      <form class="edit"on:submit|preventDefault={event => update(event, index)}>
+        <label for={item.name}>{item.name}</label>
+        <input type="hidden" name="name" value={item.name}>
+        <fieldset>
+          <input class:exposed={item.exposed} disabled={!item.exposed} name="value" value={item.value} id={item.name} on:input={() => item.changed = true}>
+          <button
+            type="button"
+            class="toggleExposition"
+            title={item.exposed ? 'Hide value' : 'Show value'}
+            on:click={() => item.exposed = item.exposed ? false : true}
+          >
+            <span class="label">
+              {item.exposed ? 'Hide value' : 'Show value'}
+            </span>
+            <Icon icon={item.exposed ? 'eyeStriked' : 'eye'} />
+          </button>
+        </fieldset>
+        <button type="submit" class="button" class:needed={items[index].changed}>Save</button>
+      </form>
+    </li>
+  {/each}
+
+</ul>

package/gui/v1/src/routes/database/+layout.svelte

@@ -0,0 +1,67 @@
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { onMount } from 'svelte';
+
+import Tables from '$lib/database/Tables.svelte';
+
+
+// properties
+// ------------------------------------------------------------------------
+let tablesHidden = false;
+
+
+
+onMount(() => {
+
+  // global hotkeys
+  // ------------------------------------------------------------------------
+  document.addEventListener('keydown', (event) => {
+    // hide the sidebar on pressing 'b' when no input is active
+    if(!event.target.matches('input, textarea') && event.key === 'b'){
+      tablesHidden = !tablesHidden;
+      localStorage.tablesHidden = tablesHidden;
+    }
+  });
+
+});
+
+
+</script>
+
+
+<!-- ================================================================== -->
+<style>
+
+.container {
+  display: grid;
+  grid-template-columns: 350px auto;
+
+  transition: grid-template-columns .2s ease-in-out;
+}
+
+  .container.tablesHidden {
+    grid-template-columns: 0 auto;
+  }
+
+
+.tables-container {
+  overflow: hidden;
+}
+
+</style>
+
+
+
+<!-- ================================================================== -->
+<div class="container" class:tablesHidden={tablesHidden}>
+
+  <div class="tables-container">
+    <Tables on:sidebarNeeded={() => tablesHidden = false} />
+  </div>
+
+  <slot></slot>
+
+</div>

package/gui/v1/src/routes/database/+page.svelte

@@ -0,0 +1,3 @@
+<svelte:head>
+  <title>Insites CLI | Database</title>
+</svelte:head>

package/gui/v1/src/routes/database/table/[id]/+page.svelte

@@ -0,0 +1,219 @@
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { page } from '$app/stores';
+import { state } from '$lib/state';
+import { record } from '$lib/api/record';
+
+import Icon from '$lib/ui/Icon.svelte';
+import Filters from '$lib/database/Filters.svelte';
+import Sort from '$lib/database/Sort.svelte';
+import Table from '$lib/database/Table.svelte';
+import RecordCreate from '$lib/database/Create.svelte';
+
+
+// properties
+// ------------------------------------------------------------------------
+// if the current view is being refreshed currently (bool)
+let refreshing = false;
+
+
+
+// purpose:		set current table in the state after entering the page
+// ------------------------------------------------------------------------
+$: $state.table = $state.tables.filter(table => table.id === $page.params.id)[0];
+
+// purpose:		reload the records each time the table id changes
+// ------------------------------------------------------------------------
+$: $page.params.id && record.get({ table: $page.params.id }) && state.clearFilters();
+
+// purpose:		clear filters each time the table id changes
+// ------------------------------------------------------------------------
+$: $page.params.id && state.clearFilters();
+
+
+// purpose:		refresh current data without reloading the whole page
+// returns:		updates the store with freshly downloaded records for current view
+// ------------------------------------------------------------------------
+const refresh = () => {
+  refreshing = true;
+  record.get({ table: $page.params.id, filters: $state.filters, sort: $state.sort }).then(() => refreshing = false);
+};
+
+
+// purpose:		global shortcuts
+// ------------------------------------------------------------------------
+const keyboardShortcuts = event => {
+  if(document.activeElement === document.body){
+    // R for refresh
+    if(!event.target.matches('input, textarea') && event.key === 'r'){
+      refresh();
+    }
+  }
+};
+
+</script>
+
+
+<!-- ================================================================== -->
+<style>
+
+section {
+  height: calc(100vh - 82px);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  position: relative;
+}
+
+nav {
+  padding: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+  position: sticky;
+  left: 0;
+
+  background-color: var(--color-background);
+}
+
+  nav > :global(*:first-child) {
+    margin-inline-end: auto;
+  }
+
+  .refreshing,
+  .refreshing:hover {
+    background-color: var(--color-interaction-active);
+
+    color: var(--color-text-inverted) !important;
+  }
+
+  .refreshing :global(svg) {
+    color: var(--color-text-inverted) !important;
+  }
+
+.pagination {
+  margin-block-start: auto;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;
+}
+
+#viewOptions {
+  margin-inline-start: auto;
+  display: flex;
+  gap: 1rem;
+}
+
+</style>
+
+
+
+<!-- ================================================================== -->
+<svelte:head>
+  <title>Insites CLI | {$state.table?.name || 'Loading…'}</title>
+</svelte:head>
+
+<svelte:window on:keypress={keyboardShortcuts} />
+
+<section>
+
+  <nav>
+
+    <Filters />
+
+    <Sort />
+
+    <button class="button" title="Refresh current view (R)" class:refreshing on:click={refresh}>
+      <span class="label">Refresh current view</span>
+      <Icon icon="refresh" />
+    </button>
+
+  </nav>
+
+  {#if $state.view.database !== 'tiles'}
+    <Table />
+  {:else}
+    Work in progress :)
+  {/if}
+
+  <nav class="pagination">
+    <div>
+      Page:
+      <input
+        type="number"
+        name="page"
+        min="1"
+        max={$state.records?.total_pages || 100}
+        step="1"
+        bind:value={$state.filters.page}
+        on:input={() => { record.get({ table: $page.params.id, filters: $state.filters, sort: $state.sort }); } }
+      >
+      of {$state.records?.total_pages || ''}
+    </div>
+
+    <div id="viewOptions">
+
+      <button class="button" title="Create new record" on:click|preventDefault={ () => $state.record = {} }>
+        <Icon icon="plus" />
+        <span class="label">Create new record</span>
+      </button>
+
+      {#if $state.view.database !== 'tiles'}
+        <button
+          class="button"
+          title={$state.view.tableStyle === 'expanded' ? 'Collapse values' : 'Expand values'}
+          on:click|preventDefault={$state.view.tableStyle === 'collapsed' ? state.setView({ tableStyle: 'expanded' }) : state.setView({ tableStyle: 'collapsed' })}
+        >
+          {#if $state.view.tableStyle === 'collapsed'}
+            <Icon icon="expand" />
+          {:else}
+            <Icon icon="collapse" />
+          {/if}
+
+        </button>
+      {/if}
+
+      <div class="combo">
+
+        <button
+          class="button"
+          class:active={$state.view.database === 'table'}
+          title="Table view"
+          on:click={() => $state.view.database = 'table'}
+          disabled={$state.view.database === 'table'}
+        >
+          <Icon icon="list" />
+          <span class="label">Table view</span>
+        </button>
+
+        <button
+          class="button"
+          class:active={$state.view.database === 'tiles'}
+          title="Tiles view"
+          on:click={() => $state.view.database = 'tiles'}
+          disabled={$state.view.database === 'tiles'}
+        >
+          <Icon icon="tiles" />
+          <span class="label">Tiles view</span>
+        </button>
+
+      </div>
+
+    </div>
+  </nav>
+
+</section>
+
+{#if $state.record !== null}
+  <RecordCreate properties={$state.table.properties} editing={$state.record} />
+{/if}

package/gui/v1/src/routes/logs/+layout.svelte

@@ -0,0 +1 @@
+<slot />