ezekiel-cli 5.8.2

package/gui/v1/src/lib/database/Tables.svelte

@@ -0,0 +1,276 @@
+<!--
+  list of tables and filtering ability for those
+-->
+
+
+
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { onMount, createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+import { page } from '$app/stores';
+import { state } from '$lib/state';
+import { table } from '$lib/api/table';
+
+import Icon from '$lib/ui/Icon.svelte';
+
+
+// properties
+// ------------------------------------------------------------------------
+// tables list (array)
+let data = $state.tables;
+// database tables filtered, as shown on the list (array)
+let tables = data;
+// container with all of the tables
+let container;
+// input used for filtering the tables (dom node)
+let filterInput;
+// input field that filters the tables (string)
+let filterText;
+
+// get tables list
+(async () => await table.get())().then(response => { data = response; tables = response; $state.tables = response; });
+
+const dispatch = createEventDispatcher();
+
+onMount(async () => {
+  // focus the filter input on load
+  filterInput.focus();
+
+  // global hotkeys
+  document.addEventListener('keydown', (event) => {
+    // focus input on ctrl+k
+    if(event.ctrlKey && event.key === 'k'){
+      event.preventDefault();
+
+      dispatch('sidebarNeeded');
+      filterInput.focus();
+      filterInput.select();
+    }
+  });
+
+  // scroll active table into view
+  if($page.data.table){
+    container.querySelector(`[href$="${$page.data.table.id}"]`).scrollIntoView({behavior: 'smooth', block: 'center'});
+  }
+});
+
+
+// purpose:   filters the tables array by given phrase
+// argumens:  uses the filterText property as a phrase to filter items with
+// returns:   modifies the filterText property and leaves only items that matches the filter phrase
+// ------------------------------------------------------------------------
+const filter = () => {
+
+  if(filterText){
+    tables = data.filter(item => item.name.includes(filterText))
+  } else {
+    tables = data;
+  }
+
+};
+
+
+// purpose:   handles keyboard shortcuts for the filter input
+// arguments: keyboard event (object)
+// ------------------------------------------------------------------------
+const filterInputKeyboardShortcut = (event) => {
+
+  if(event.key === 'Escape'){
+    filterText = '';
+    filter();
+  }
+
+  if(event.key === 'Enter'){
+    container.querySelector('li:first-child a').click();
+  }
+
+};
+
+
+// purpose:   handles keyboard navigation on the tables list
+// arguments: keyboard event (object)
+// ------------------------------------------------------------------------
+const listKeyboardShortcut = (event) => {
+
+  if(event.key === 'ArrowDown'){
+    if(container.contains(document.activeElement)){
+      event.preventDefault();
+      if(document.activeElement.matches('input')){
+        container.querySelector('a')?.focus();
+      } else {
+        document.activeElement?.parentElement?.nextElementSibling?.querySelector('a')?.focus();
+      }
+    }
+  }
+
+  if(event.key === 'ArrowUp'){
+    if(container.contains(document.activeElement)){
+      event.preventDefault();
+      if(document.activeElement?.matches('li:first-child a')){
+        filterInput.focus();
+      } else {
+        document.activeElement?.parentElement?.previousElementSibling?.querySelector('a')?.focus();
+      }
+    }
+  }
+
+  if(event.key === 'Escape'){
+    if(container.contains(document.activeElement)){
+      filterInput.focus();
+      filterText = '';
+      filter();
+    }
+  }
+
+};
+
+</script>
+
+
+
+<!-- ================================================================== -->
+<style>
+
+aside {
+  width: 350px;
+  height: calc(100vh - 82px);
+  flex-shrink: 0;
+  overflow: auto;
+
+  border-inline-end: 1px solid var(--color-frame);
+}
+
+nav {
+  padding-bottom: 1rem;
+}
+
+a {
+  max-width: 100%;
+  margin: 0 1rem;
+  padding: .5rem 1rem;
+  display: block;
+  overflow: hidden;
+
+  border-radius: .5rem;
+
+  text-overflow: ellipsis;
+}
+
+a:hover,
+a:focus-visible {
+  background-color: var(--color-background);
+
+  color: var(--color-interaction);
+}
+
+a.active {
+  background-color: var(--color-middleground);
+
+  font-weight: 500;
+}
+
+.filter-container {
+  padding: 1rem 1rem 2rem;
+  position: sticky;
+  top: 0;
+
+  background-image: linear-gradient(to bottom, var(--color-page) 80%, rgba(var(--color-rgb-page), 0));
+}
+
+.filter {
+  width: 100%;
+  padding: .5rem .8rem;
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+
+  background-color: var(--color-background);
+  border-radius: .5rem;
+
+  transition: background-color .1s linear;
+}
+
+.filter:has(input:focus-visible) {
+  background-color: var(--color-middleground);
+}
+
+.filter input {
+  all: unset;
+  max-width: 185px;
+}
+
+.filter button {
+  all: unset;
+
+  display: flex;
+  cursor: pointer;
+
+  line-height: .2em;
+}
+
+.filter button,
+.filter i {
+  margin-inline-end: .2em;
+  flex-shrink: 0;
+}
+
+.filter i {
+  position: relative;
+  top: 2px;
+  color: var(--color-text-secondary);
+}
+
+.filter kbd:first-of-type {
+  margin-inline-start: auto;
+}
+
+</style>
+
+
+
+<!-- ================================================================== -->
+<aside bind:this={container} on:keydown={listKeyboardShortcut}>
+
+  <div class="filter-container">
+    <div class="filter">
+
+      {#if filterText}
+        <button on:click={() => { filterText = null; filter(); } }>
+          <Icon icon="x" size="18" />
+        </button>
+      {:else}
+        <i>
+          <Icon icon="search" size="18" />
+        </i>
+      {/if}
+
+      <input
+        type="text"
+        placeholder="Search tables"
+        bind:this={filterInput}
+        bind:value={filterText}
+        on:input={filter}
+        on:keydown={filterInputKeyboardShortcut}
+      >
+
+      <kbd>Ctrl</kbd><kbd>K</kbd>
+    </div>
+  </div>
+
+  <nav>
+    <ul>
+      {#each tables as table, index}
+        <li in:fade={{ duration: 100, delay: 7 * index }}>
+          <a href="/database/table/{table.id}" class:active={table.id === $page.params.id}>
+            {table.name}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </nav>
+
+</aside>

package/gui/v1/src/lib/parseValue.js

@@ -0,0 +1,51 @@
+// imports
+// ------------------------------------------------------------------------
+import { tryParseJSON } from '$lib/tryParseJSON.js';
+
+
+
+// purpose:		parses the value to present it in the most adequate way
+//				(strings can be strings, JSONs or escaped JSONs)
+// arguments:	value to parse (any)
+//				type of the value (string)
+// ------------------------------------------------------------------------
+const parseValue = (value, type) => {
+  let parsed = {
+    value: value,
+    type: type
+  };
+
+  if(type !== 'boolean' && !value){
+    parsed.value = null;
+    parsed.type = 'null';
+    return {...parsed};
+  }
+
+  if(type === 'boolean'){
+    if(value === true){
+      parsed.value = 'true';
+    } else {
+      parsed.value = 'false';
+    }
+  }
+
+  if(typeof value === 'object'){
+    parsed.value = value;
+    parsed.type = 'json';
+    return {...parsed};
+  }
+
+  if(tryParseJSON(value)){
+    parsed.value = tryParseJSON(value);
+    parsed.type = 'jsonEscaped';
+    return {...parsed};
+  }
+
+  return {...parsed};
+};
+
+
+
+// exports
+// ------------------------------------------------------------------------
+export { parseValue };

package/gui/v1/src/lib/relativeTime.js

@@ -0,0 +1,33 @@
+/*
+  shows dates as relative from current
+*/
+
+
+
+const relativeTime = input => {
+
+  const date = (input instanceof Date) ? input : new Date(input);
+  const formatter = new Intl.RelativeTimeFormat('en');
+  const ranges = {
+    years: 3600 * 24 * 365,
+    months: 3600 * 24 * 30,
+    weeks: 3600 * 24 * 7,
+    days: 3600 * 24,
+    hours: 3600,
+    minutes: 60,
+    seconds: 1
+  };
+  const secondsElapsed = (date.getTime() - Date.now()) / 1000;
+
+  for (let key in ranges) {
+    if (ranges[key] < Math.abs(secondsElapsed)) {
+      const delta = secondsElapsed / ranges[key];
+      return formatter.format(Math.round(delta), key);
+    }
+  }
+
+};
+
+
+
+export { relativeTime };

package/gui/v1/src/lib/state.js

@@ -0,0 +1,190 @@
+/*
+  store that handles all the state and data related objects
+
+  usage: import { state } from '$lib/state.js' and then use
+  the methods provided in the return statement for navigating through
+  the state.
+*/
+
+
+// imports
+// ------------------------------------------------------------------------
+import { browser } from '$app/environment';
+import { writable } from 'svelte/store';
+
+
+const state = createStore();
+
+function createStore(){
+
+  // read local storage values
+  // ------------------------------------------------------------------------
+  const view = browser && localStorage.view ? JSON.parse(localStorage.view) : null;
+
+  // store properties
+  // ------------------------------------------------------------------------
+  const state = {};
+    // list of items pinned to the header navigation (array of strings)
+    state.header = browser && localStorage.header ? JSON.parse(localStorage.header) : ['database', 'users', 'logs'];
+    // if the app is connected to the instance (bool)
+    state.online = undefined;
+    // logs data (object)
+    state.logs = {};
+    // tables for current instance (array)
+    state.tables = [];
+    // currently active table (object)
+    state.table = {};
+    // type of view for the records ('table' or 'tiles')
+    state.view = {
+      database: view?.database ? view.database : 'table',
+      tableStyle: view?.tableStyle ? view.tableStyle : 'collapsed'
+    };
+    // currently viewed records list (object)
+    state.records = {};
+    // currently viewed/edited record (object)
+    state.record = null;
+    // currently highlighted ids (object)
+    state.highlighted = {
+      record: null,
+      constant: null
+    };
+    // filters for the records (object)
+    state.filters = {
+      page: 1,
+      attributes: [
+        { attribute_type: 'id', name: 'id', operation: 'value', value: '' }
+      ]
+    };
+    // sort order for the records (object)
+    state.sort = {
+      by: 'created_at',
+      order: 'DESC'
+    };
+    // list of notifications (array of objects)
+    state.notifications = [];
+    // width of the aside panel in css units (string)
+    state.asideWidth = browser && localStorage.asideWidth ? localStorage.asideWidth : '30%';
+
+
+
+  // purpose:		creates the store with data provided in state object
+  // ------------------------------------------------------------------------
+  const { subscribe, set, update } = writable(state);
+
+
+  // purpose:		updates the store properties
+  // arguments:	name of the property you want to update (string)
+  //				new value (any)
+  // ------------------------------------------------------------------------
+  const data = (property, value) => {
+    update(state => {
+      state[property] = value;
+
+      return state;
+    });
+  };
+
+
+  // purpose:		clears all the filters
+  // ------------------------------------------------------------------------
+  const clearFilters = () => {
+    update(state => {
+      state.filters = {
+        page: 1,
+        attributes: [
+          { attribute_type: 'id', name: 'id', operation: 'value', value: '' }
+        ]
+      };
+
+      state.sort = {
+        by: 'created_at',
+        order: 'DESC'
+      };
+
+      return state;
+    });
+  };
+
+
+  // purpose:		highlights an record if visible
+  // arguments:	type of data to highlight ('record')
+  //				id of the element to highlight (int)
+  // ------------------------------------------------------------------------
+  let highlightTimeout;
+
+  const highlight = (type, id) => {
+    update(state => {
+      state.highlighted[type] = id;
+
+      return state;
+    });
+
+    clearTimeout(highlightTimeout);
+    highlightTimeout = setTimeout(() => { highlight('record', null); highlight('constant', null) }, 7000);
+  };
+
+
+  // purpose:		manages notifications
+  // ------------------------------------------------------------------------
+  const notification = {
+
+    // purpose:		creates new notification
+    // arguments:	notification type ('success', 'error')
+    //				notification text message for the user (string)
+    // ------------------------------------------------------------------------
+    create: (type, message) => {
+      update(state => {
+        state.notifications.push({id: Date.now(), type: type, message: message});
+
+        return state;
+      });
+    },
+
+    // purpose:		removes a notification from the view
+    // arguments:	id of the notification in array (int)
+    // ------------------------------------------------------------------------
+    remove: (id) => {
+      update(state => {
+        state.notifications = state.notifications.filter(notification => notification.id !== id);
+
+        return state;
+      });
+    },
+
+  };
+
+
+  // purpose:		manages the view styles
+  // arguments:	new view
+  // ------------------------------------------------------------------------
+  const setView = (newView) => {
+    update(state => {
+      state.view = {...state.view, ...newView}
+
+      if(browser){
+        localStorage.view = JSON.stringify(state.view);
+      }
+
+      return state;
+    });
+  };
+
+
+
+  return {
+    subscribe,
+    set,
+    data,
+    clearFilters,
+    highlight,
+    notification,
+    setView
+  }
+
+};
+
+
+
+// exports
+// ------------------------------------------------------------------------
+export { state }

package/gui/v1/src/lib/tryParseJSON.js

@@ -0,0 +1,32 @@
+// purpose:		tries to parse the string as JSON
+// arguments:	string or JSON object to check if can be parsed as JSON (string or object)
+// returns:		JSON object if parseable or false if can't be parsed (object or false)
+// ------------------------------------------------------------------------
+const tryParseJSON = (argument) => {
+
+  // first, check if passed argument is JSON and if so just return it
+  if(argument && typeof argument === 'object'){
+    return argument;
+  }
+
+  // if argument is a string, try to parse it as JSON
+  try {
+    const o = JSON.parse(argument);
+
+    if(o && typeof o === 'object'){
+      return o;
+    }
+  }
+  // catch the error from parsing JSON but do nothing
+  catch(e){};
+
+  // if everything failed we can assumen the argument is not parsable JSON
+  return false;
+
+};
+
+
+
+// exports
+// ------------------------------------------------------------------------
+export { tryParseJSON }