ezekiel-cli 5.8.2

package/gui/v1/src/lib/ui/Aside.svelte

@@ -0,0 +1,176 @@
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { quintOut } from 'svelte/easing';
+import { state } from '$lib/state.js';
+
+import Icon from '$lib/ui/Icon.svelte';
+
+// properties
+// ------------------------------------------------------------------------
+// close button url (string)
+export let closeUrl;
+// the panel title (string)
+export let title = '';
+// width of the whole document in pixels (int)
+let windowWidth;
+// if the user is currently resizing the panel (bool)
+let resizing = false;
+
+
+// transition: 	slides from right
+// options: 	delay (int), duration (int)
+// ------------------------------------------------------------------------
+const appear = function(node, {
+  delay = 0,
+  duration = 300
+}){
+  return {
+    delay,
+    duration,
+    css: (t) => {
+      const eased = quintOut(t);
+
+      return `min-width: 0; width: calc(${$state.asideWidth} * ${eased});` }
+  }
+};
+
+
+// purpose:   add the event for mouse move when resizer is activated
+// returns:   toggles the 'resizing' prop to true
+// ------------------------------------------------------------------------
+const resizingStart = () => {
+  window.addEventListener('mousemove', resize, false);
+  window.addEventListener('mouseup', resizingEnd, false);
+  resizing = true;
+};
+
+// purpose:   removes events for mouse move when resizer is deactivated
+// returns:   toggles the 'resizing' prop to false
+// ------------------------------------------------------------------------
+const resizingEnd = () => {
+  window.removeEventListener('mousemove', resize, false);
+  window.removeEventListener('mouseup', resizingEnd, false);
+  resizing = false;
+  localStorage.asideWidth = $state.asideWidth;
+};
+
+// purpose:   updates the width of the panel to match the mouse position
+// returns:   changes the $state.asideWidth
+// ------------------------------------------------------------------------
+const resize = event => {
+  $state.asideWidth = windowWidth - event.clientX - 9 + 'px';
+};
+
+</script>
+
+
+<!-- ================================================================== -->
+<style>
+
+/* layout */
+aside {
+  width: var(--width);
+  min-width: 300px;
+  max-width: 80%;
+  position: relative;
+  overflow: hidden;
+
+  border-inline-start: 1px solid var(--color-frame);
+}
+
+.container {
+  width: 100%;
+  min-width: 300px;
+  height: calc(100vh - 83px);
+  padding: 1rem;
+  overflow: auto;
+}
+
+
+/* navigation */
+aside :global(nav:first-child) {
+  margin-block-start: -1rem;
+  margin-block-end: 2rem;
+  margin-inline: -1rem;
+}
+
+
+/* content */
+header {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+h2 {
+  margin-block-end: .2em;
+
+  font-weight: 500;
+  font-size: 1.2rem;
+}
+
+.close:hover {
+  color: var(--color-interaction-hover);
+}
+
+  .label {
+    position: absolute;
+    left: -100vw;
+  }
+
+/* resize dragger */
+.resizer {
+  width: 8px;
+  position: absolute;
+  inset: 0 auto 0 0;
+
+  cursor: ew-resize;
+  opacity: 0;
+  background-color: var(--color-frame);
+
+  transition: opacity .2s linear;
+}
+
+.resizer:hover,
+.resizer.active {
+  opacity: 1;
+}
+
+</style>
+
+
+<!-- ================================================================== -->
+<svelte:window bind:outerWidth={windowWidth} />
+
+<aside transition:appear|local style="--width: {$state.asideWidth}">
+
+  <button class="resizer" class:active={resizing} on:mousedown={resizingStart}>
+    <span class="label">Drag to resize panel</span>
+    <Icon icon="resizeHorizontal" size="7" />
+  </button>
+
+  <div class="container">
+
+    {#if title || closeUrl}
+      <header>
+        {#if title}
+          <h2>{title}</h2>
+        {/if}
+
+        {#if closeUrl}
+          <a href="{closeUrl}" class="close">
+            <span class="label">Close details</span>
+            <Icon icon="x" />
+          </a>
+        {/if}
+      </header>
+    {/if}
+
+    <slot></slot>
+
+  </div>
+
+</aside>

package/gui/v1/src/lib/ui/Code.svelte

@@ -0,0 +1,50 @@
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { afterUpdate, tick } from 'svelte';
+import '../../style/code.css';
+
+// properties
+// ------------------------------------------------------------------------
+// code language name for the highligher (string)
+export let language;
+// the template that will be cloned and used to show the highlighted code (dom node)
+let template;
+
+
+// a little hacky way to use Prism highlighting with dynamic code
+// ------------------------------------------------------------------------
+afterUpdate(async() => {
+  await tick();
+  document.querySelector('#code')?.remove();
+  const clone = template.content.cloneNode(true);
+  clone.firstChild.id = 'code';
+  template.after(clone);
+  Prism.highlightAll();
+});
+
+</script>
+
+
+<!-- ================================================================== -->
+<style>
+
+:global(#code) {
+  border-radius: 1rem;
+  border-start-start-radius: 0;
+}
+
+:global(#code[class*=language-]) {
+  background-color: var(--color-context);
+}
+
+</style>
+
+
+
+<!-- ================================================================== -->
+<template bind:this={template}>
+  <pre class="line-numbers language-{language}"><code class="language-{language}"><slot></slot></code></pre>
+</template>

package/gui/v1/src/lib/ui/ConnectionIndicator.svelte

@@ -0,0 +1,133 @@
+<!-- ================================================================== -->
+<script>
+
+import { onMount } from 'svelte';
+import { browser } from '$app/environment';
+import { page } from '$app/stores';
+import { logs } from '$lib/api/logs';
+import { state } from '$lib/state';
+
+
+// properties
+// ------------------------------------------------------------------------
+// miliseconds between checks, set up later depending on the route (int)
+let checkIntervalTime = 7000;
+
+
+
+// purpose:		check if the app is connected to the instance every x seconds
+// ------------------------------------------------------------------------
+let onlineCheckInterval;
+
+onMount(async () => {
+  checkIfOnline();
+
+  clearInterval(onlineCheckInterval);
+  onlineCheckInterval = setInterval(checkIfOnline, checkIntervalTime);
+});
+
+$: if($page.url.pathname.startsWith('/logs')){
+  clearInterval(onlineCheckInterval);
+
+  checkIntervalTime = 3000;
+  onlineCheckInterval = setInterval(checkIfOnline, checkIntervalTime);
+} else {
+  if(checkIntervalTime === 3000){
+    clearInterval(onlineCheckInterval);
+
+    checkIntervalTime = 7000;
+    onlineCheckInterval = setInterval(checkIfOnline, checkIntervalTime);
+  }
+}
+
+// purpose:		checks if the app is connected to the instance by getting some api data
+// returns:		updates the $state.online store (bool) and returns a boolean response
+// ------------------------------------------------------------------------
+const checkIfOnline = async () => {
+  if(browser && document.visibilityState !== 'hidden'){
+    const last = $state.logs.logs?.at(-1).id ?? null;
+    const newLogs = await logs.get({ last: last });
+
+    // if already showing logs, just append the new ones
+    if(last){
+      if(newLogs.logs?.length){
+        $state.logs.logs = [...$state.logs.logs, ...newLogs.logs];
+
+        // store the times when logs were downloaded to mark new ones
+        $state.logs.downloaded_at.push(Date.now());
+        if($state.logs.downloaded_at.length > 2){
+          $state.logs.downloaded_at.splice(0, 1);
+        }
+      }
+    }
+    // if fresh start, create the logs object
+    else {
+      if(!$state.logs.logs){
+        $state.logs = newLogs;
+
+        if(!$state.logs.downloaded_at){
+          $state.logs.downloaded_at = [Date.now()];
+        }
+      }
+    }
+
+    if(newLogs.error){
+      $state.online = false;
+      return false;
+    } else {
+      $state.online = true;
+      return true;
+    }
+  }
+};
+
+</script>
+
+
+
+<!-- ================================================================== -->
+<style>
+
+.connectionIndicator {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+
+.connectionIndicator:after {
+  width: .8rem;
+  height: .8rem;
+  margin-inline-end: -.5em;
+  display: block;
+  position: relative;
+  top: 1px;
+
+  border-radius: 100%;
+  background-color: var(--color-text-inverted);
+
+  animation: blink .7s ease-in-out;
+  animation-iteration-count: infinite;
+
+  content: '';
+}
+
+@keyframes blink {
+  0% {
+    opacity: .2;
+  }
+
+  70% {
+    opacity: 1;
+  }
+}
+
+</style>
+
+
+
+<!-- ================================================================== -->
+{#if $state.online === false}
+  <div class="connectionIndicator" class:offline={$state.online === false}>
+    Disconnected from the instance
+  </div>
+{/if}

package/gui/v1/src/lib/ui/Header.svelte

@@ -0,0 +1,252 @@
+<!-- ================================================================== -->
+<script>
+  // imports
+  // ------------------------------------------------------------------------
+  import { page } from "$app/stores";
+  import { table } from "$lib/api/table";
+  import { state } from "$lib/state";
+
+  import Icon from "$lib/ui/Icon.svelte";
+
+  // purpose:		preload tables data into the state store for faster navigation
+  // returns:		loads the tables into the $state.tables (array)
+  // ------------------------------------------------------------------------
+  const preloadTables = async () => {
+    if (!$state.tables.length) {
+      $state.tables = await table.get();
+    }
+  };
+</script>
+
+<!-- ================================================================== -->
+<header>
+  <div class="wrapper">
+    <a href="/">
+      <h1>
+        <span class="title">Insites CLI</span>
+      </h1>
+    </a>
+
+    <nav>
+      <ul>
+        {#if $state.header.includes("database")}
+          <li>
+            <a
+              href="/database"
+              class:active={$page.url.pathname.startsWith("/database")}
+              on:focus|once={preloadTables}
+              on:mouseover|once={preloadTables}
+            >
+              <Icon icon="database" />
+              <span class="label"> Database </span>
+            </a>
+          </li>
+        {/if}
+
+        {#if $state.header.includes("users")}
+          <li>
+            <a
+              href="/users"
+              class:active={$page.url.pathname.startsWith("/users")}
+            >
+              <Icon icon="users" />
+              <span class="label"> Users </span>
+            </a>
+          </li>
+        {/if}
+
+        {#if $state.header.includes("logs")}
+          <li>
+            <a
+              href="/logs"
+              class:active={$page.url.pathname.startsWith("/logs")}
+            >
+              <Icon icon="log" />
+              <span class="label"> Logs </span>
+            </a>
+          </li>
+        {/if}
+
+        {#if $state.header.includes("backgroundJobs")}
+          <li>
+            <a
+              href="/backgroundJobs"
+              class:active={$page.url.pathname.startsWith("/backgroundJobs")}
+            >
+              <Icon icon="backgroundJob" />
+              <span class="label"> Background Jobs </span>
+            </a>
+          </li>
+        {/if}
+
+        {#if $state.header.includes("constants")}
+          <li>
+            <a
+              href="/constants"
+              class:active={$page.url.pathname.startsWith("/constants")}
+            >
+              <Icon icon="constant" />
+              <span class="label"> Constants </span>
+            </a>
+          </li>
+        {/if}
+
+        {#if $state.header.includes("liquid")}
+          <li>
+            <a href="http://localhost:3030/gui/liquid">
+              <Icon icon="liquid" />
+              <span class="label"> Liquid Evaluator </span>
+            </a>
+          </li>
+        {/if}
+
+        {#if $state.header.includes("graphiql")}
+          <li>
+            <a href="http://localhost:3030/gui/graphql/">
+              <Icon icon="graphql" />
+              <span class="label"> GraphiQL </span>
+            </a>
+          </li>
+        {/if}
+    
+        <hr class="nav-border"/>
+        <li>
+          <a href="https://docs.insites.io" target="_blank">
+            <Icon icon="book" />
+            <span class="label"> Documentation </span>
+          </a>
+        </li>
+        <li>
+          <a href="https://console.insites.io/console#/instances" target="_blank">
+            <Icon icon="serverSettings" />
+            <span class="label"> Insites Console </span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>
+
+<!-- ================================================================== -->
+<style>
+  header {
+    padding-block: 1rem;
+    height: 82px;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    border-bottom: 1px solid var(--color-frame);
+    background-color: rgb(var(--color-rgb-page));
+    backdrop-filter: blur(17px);
+    -webkit-backdrop-filter: blur(17px);
+
+    transition: filter 0.2s ease-in-out;
+  }
+
+  .wrapper {
+    margin-inline: auto;
+    padding-inline: 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 2em;
+  }
+
+  @media (max-width: 570px) {
+    .wrapper {
+      flex-direction: column;
+    }
+  }
+
+  h1 {
+    line-height: 0.5em;
+  }
+
+  ul {
+    display: flex;
+    gap: 1rem;
+  }
+
+  li a {
+    padding: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    justify-items: center;
+    align-items: center;
+    position: relative;
+
+    border-radius: 1rem;
+    background-color: var(--color-background);
+
+    text-transform: uppercase;
+    font-size: 0.9rem;
+    color: var(--color-text-secondary);
+
+    transition-property: background-color, border-radius;
+    transition-duration: 0.1s, 0.2s;
+    transition-timing-function: linear, cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  li a:hover {
+    border-radius: 1.2rem;
+    background-color: var(--color-middleground);
+  }
+
+  li a.active {
+    background-color: var(--color-middleground);
+
+    color: var(--color-text);
+  }
+
+  /* tooltip appearing on hover */
+  .label {
+    margin-block-start: 0.4rem;
+    padding: 0.2rem 0.5rem;
+    position: absolute;
+    top: 105%;
+    right: 0;
+    opacity: 0;
+
+    border-radius: 0.2rem;
+    background-color: var(--color-text);
+
+    white-space: nowrap;
+    font-weight: 500;
+    color: var(--color-page);
+
+    transition: opacity 0.1s ease-in-out;
+  }
+
+  .label:before {
+    width: 10px;
+    height: 6px;
+    position: absolute;
+    top: -6px;
+    right: 1.25rem;
+
+    background-color: var(--color-text);
+    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
+
+    content: "";
+  }
+
+  a:hover .label {
+    opacity: 1;
+  }
+
+  .title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: #ffffff;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  .nav-border {
+    background-color: #615b5b;
+    width: 1px;
+    margin: 3px;
+  }
+</style>