ezekiel-cli 5.8.2

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

@@ -0,0 +1,252 @@
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { onMount } from 'svelte';
+import { quintOut } from 'svelte/easing';
+import { page } from '$app/stores';
+import { user } from '$lib/api/user.js';
+
+import Icon from '$lib/ui/Icon.svelte';
+
+// properties
+// ------------------------------------------------------------------------
+// main filters form (dom node)
+let form;
+// list of users (array)
+let items = [];
+// default filters (object)
+let defaultFilters = {
+  page: 1,
+  attribute: 'email',
+  value: ''
+};
+// stores currently applied filters (object)
+let filters = {
+  ...defaultFilters,
+  ...Object.fromEntries($page.url.searchParams)
+};
+// number of pages (int)
+let maxPage = 1;
+
+
+// purpose:   loads data
+// ------------------------------------------------------------------------
+const load = async () => {
+  await user.get(filters).then(response => {
+    items = response.results;
+    maxPage = response.total_pages
+  });
+};
+
+onMount(() => {
+  load()
+});
+
+
+// transition:    zooms from nothing to full size
+// options: 	delay (int), duration (int)
+// ------------------------------------------------------------------------
+const appear = function(node, {
+  delay = 0,
+  duration = 150
+}){
+  return {
+    delay,
+    duration,
+    css: (t) => {
+      const eased = quintOut(t);
+
+      return `scale: ${eased};` }
+  }
+};
+
+</script>
+
+
+<!-- ================================================================== -->
+<style>
+
+.container {
+  width: 100%;
+
+  display: flex;
+}
+
+nav {
+  width: 100%;
+  padding: 1rem;
+
+  background-color: var(--color-background);
+}
+
+.filters form {
+  display: flex;
+  align-items: center;
+  gap: .5em;
+}
+
+.filters input {
+  padding-inline-end: 2.2rem;
+}
+
+.filters fieldset {
+  position: relative;
+}
+
+.filters .clear {
+  padding: .5rem;
+  position: absolute;
+  right: .3em;
+  top: 1px;
+
+  transition: all .1s linear;
+}
+
+  .filters .clear.disabled {
+    opacity: 0;
+  }
+
+  .filters .clear:hover {
+    color: var(--color-interaction-hover);
+  }
+
+section {
+  flex-grow: 1;
+  height: calc(100vh - 83px);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  position: relative;
+}
+
+table {
+  min-width: 100%;
+}
+
+thead {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+th {
+  background-color: var(--color-background);
+
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+td, th {
+  padding: .6rem;
+  vertical-align: top;
+
+  border: 1px solid var(--color-frame);
+
+  transition: background-color .2s linear;
+}
+
+td:first-child, th:first-child {
+  width: 4rem;
+
+  border-inline-start: 0;
+  text-align: right;
+}
+
+td:last-child, th:last-child {
+  border-inline-end: 0;
+}
+
+
+.pagination {
+  margin-block-start: auto;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;
+}
+
+.label {
+  position: absolute;
+  left: -100vw;
+}
+
+</style>
+
+
+<!-- ================================================================== -->
+<div class="container">
+
+  <section>
+
+    <nav class="filters">
+      <form id="filters" bind:this={form} on:submit={() => { filters.page = 1; load(); }}>
+        Filter by
+        <select name="attribute" bind:value={filters.attribute} on:change={() => filters.value = ''}>
+          <option value="email">email</option>
+          <option value="id">id</option>
+        </select>
+        <fieldset>
+          <input type="text" name="value" bind:value={filters.value}>
+          {#if filters.value}
+            <button type="button" class="clear" transition:appear on:click={() => { filters = {...defaultFilters}; form.requestSubmit(); }}>
+              <span class="label">Clear filters</span>
+              <Icon icon="x" size=14 />
+            </button>
+          {/if}
+        </fieldset>
+        <button type="submit" class="button submit">
+          <span class="label">Apply filter</span>
+          <Icon icon="arrowRight" />
+        </button>
+      </form>
+    </nav>
+
+    <table>
+      <thead>
+        <tr>
+          <th>id</th>
+          <th>email</th>
+        </tr>
+      </thead>
+      {#each items as user}
+        <tr>
+          <td>
+            {user.id}
+          </td>
+          <td>
+            <a href="/users/{user.id}">
+              {user.email}
+            </a>
+          </td>
+        </tr>
+      {/each}
+    </table>
+
+    <nav class="pagination">
+      Page:
+      <input
+        form="filters"
+        type="number"
+        name="page"
+        min="1"
+        max={maxPage || 100}
+        step="1"
+        bind:value={filters.page}
+        on:input={load}
+      >
+      of {maxPage || ''}
+    </nav>
+
+  </section>
+
+  {#if $page.params.id}
+    <slot></slot>
+  {/if}
+
+</div>

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

@@ -0,0 +1,4 @@
+<!-- ================================================================== -->
+<svelte:head>
+  <title>Insites CLI | Users</title>
+</svelte:head>

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

@@ -0,0 +1,127 @@
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { page } from '$app/stores';
+import { user } from '$lib/api/user.js';
+
+import Aside from '$lib/ui/Aside.svelte';
+
+
+// properties
+// ------------------------------------------------------------------------
+// currently viewed user data (object)
+let item;
+
+
+// purpose:		gets the user data
+// attributes:	id of the user (int)
+// returns:		a single user data object from the database (object)
+// ------------------------------------------------------------------------
+const load = async () => {
+  const filters = {
+    attribute: 'id',
+    value: $page.params.id
+  };
+
+  await user.get(filters).then(response => {
+    item = response.results[0];
+  });
+}
+
+$: $page.params.id && load();
+
+</script>
+
+
+<!-- ================================================================== -->
+<style>
+
+.info {
+  display: flex;
+  gap: 1.2rem;
+}
+
+time {
+  color: var(--color-text-secondary);
+}
+
+.tech {
+  margin-block: 2rem;
+}
+
+.tech dt {
+  margin-block-start: .5em;
+
+  font-weight: 500;
+}
+
+.tech dd {
+  padding: .6em .8em .6em .8em;
+
+  border-radius: 0 1rem 1rem;
+  background-color: var(--color-background);
+
+  word-wrap: break-word;
+}
+
+.personal {
+  padding-block-start: 1.3rem;
+
+  border-block-start: 1px solid var(--color-frame);
+}
+
+.personal div {
+  margin-block-start: .5em;
+
+  display: flex;
+  gap: .5em;
+}
+
+.personal dd {
+  margin-block-end: .5em;
+  flex-grow: 0;
+  overflow: hidden;
+
+  word-wrap: break-all;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
+
+</style>
+
+
+
+<!-- ================================================================== -->
+<svelte:head>
+  <title>Insites CLI | {item?.email ?? 'Users'}</title>
+</svelte:head>
+
+<Aside title={item?.email ?? item?.id ?? 'Loading…'} closeUrl="/users?{$page.url.searchParams.toString()}">
+
+  <div>
+    <div class="info">
+      {#if item?.id}ID: {item?.id}{/if}
+      <time datetime={item?.created_at}>
+        {(new Date(item?.created_at)).toLocaleDateString(undefined, {})}
+        {(new Date(item?.created_at)).toLocaleTimeString(undefined, {})}
+      </time>
+    </div>
+  </div>
+
+  <dl class="tech">
+    {#if item?.external_id}<dt>External ID:</dt> <dd>{item?.external_id}</dd>{/if}
+    {#if item?.jwt_token}<dt>JWT:</dt> <dd>{item?.jwt_token}</dd>{/if}
+  </dl>
+
+  <dl class="personal">
+    {#if item?.name}<div><dt>First name:</dt> <dd>{item?.name}</dd></div>{/if}
+    {#if item?.first_name}<div><dt>First name:</dt> <dd>{item?.first_name}</dd></div>{/if}
+    {#if item?.middle_name}<div><dt>Middle name:</dt> <dd>{item?.middle_name}</dd></div>{/if}
+    {#if item?.last_name}<div><dt>Last name:</dt> <dd>{item?.last_name}</dd></div>{/if}
+    {#if item?.slug}<div><dt>Slug:</dt> <dd>{item?.slug}</dd></div>{/if}
+    {#if item?.language}<div><dt>Language:</dt> <dd>{item?.language}</dd></div>{/if}
+  </dl>
+
+</Aside>

package/gui/v1/src/style/button.css

@@ -0,0 +1,141 @@
+/*
+  button component
+
+  general styling
+  buttons in the context area
+  icon
+  invisible label in button for screen readers
+  combined buttons placed next to each other
+  small variant
+  danger variant
+  confirmation variant
+*/
+
+
+
+/* general styling
+============================================================================ */
+.button {
+  padding: .7rem 1rem;
+  display: inline-flex;
+  align-items: center;
+  gap: .6em;
+
+  border-radius: .5rem;
+  background-color: var(--color-middleground);
+
+  leading-trim: both;
+  line-height: 1em;
+  color: var(--color-text);
+
+  transition: all .1s linear;
+}
+
+button:not([disabled]) {
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: rgba(var(--color-rgb-interaction-hover), .2);
+}
+
+.button:focus-visible {
+  box-shadow: 0 0 1px 2px var(--color-interaction-hover);
+}
+
+.button.active {
+  background-color: rgba(var(--color-rgb-interaction-hover), .1);
+}
+
+
+/* buttons in the context area
+============================================================================ */
+.content-context .button {
+  background-color: var(--color-context-button-background);
+
+  color: var(--color-context-button-text);
+}
+
+.content-context .button:hover {
+  background-color: var(--color-context-button-background-hover);
+}
+
+.content-context .button:hover svg {
+  color: currentColor;
+}
+
+
+
+/* icon
+============================================================================ */
+.button svg {
+  width: 18px;
+  height: 18px;
+  margin-block: -.04rem;
+
+  pointer-events: none;
+}
+
+.button:hover svg {
+  color: var(--color-interaction);
+}
+
+.button:has(svg) {
+  padding-block: .64rem;
+}
+
+
+/* invisible label in button for screen readers
+============================================================================ */
+button .label {
+  position: absolute;
+  left: -100vw;
+}
+
+
+/* combined buttons placed next to each other
+============================================================================ */
+.combo {
+  display: flex;
+  gap: 1px;
+}
+
+.combo button:first-child {
+  border-radius: .5rem 0 0 .5rem;
+}
+
+.combo button:last-child {
+  border-radius: 0 .5rem .5rem 0;
+}
+
+
+
+/* small variant
+============================================================================ */
+.button.compact {
+  padding: .4rem;
+}
+
+
+/* danger variant
+============================================================================ */
+.button.danger {
+  color: var(--color-danger);
+}
+
+
+/* danger variant
+============================================================================ */
+.button.confirmation {
+  background-color: rgba(var(--color-rgb-confirmation), .2);
+
+  color: var(--color-confirmation);
+}
+
+.button.confirmation:hover {
+  color: var(--color-confirmation);
+}
+
+.button.confirmation:hover svg {
+  color: inherit;
+}

package/gui/v1/src/style/code.css

@@ -0,0 +1,4 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+liquid+markup-templating&plugins=line-numbers+normalize-whitespace */
+code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}
+pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}

package/gui/v1/src/style/config.css

@@ -0,0 +1,186 @@
+/*
+  stores all configurable variables used for styling
+
+  colors
+  spacings
+  fonts
+*/
+
+
+
+:root,
+::backdrop {
+
+
+  /* colors
+  ============================================================================ */
+
+  /* light theme
+  ========================== */
+  /* typography */
+  --color-light-rgb-text: 74, 74, 74;
+  --color-light-rgb-text-secondary: 146, 146, 146;
+  --color-light-rgb-text-inverted: 255, 255, 255;
+
+  /* interaction */
+  --color-light-rgb-interaction: 25, 79, 144;
+  --color-light-rgb-interaction-hover: 58, 141, 222;
+  --color-light-rgb-interaction-active: 50, 130, 210;
+
+  /* backgrounds and frames */
+  --color-light-rgb-frame: 221, 221, 221;
+
+  --color-light-rgb-page: 255, 255, 255;
+  --color-light-rgb-background: 245, 246, 252;
+  --color-light-rgb-middleground: 235, 236, 242;
+  --color-light-rgb-context: 53, 55, 57;
+
+  /* attention colors */
+  --color-light-rgb-confirmation: 30, 142, 73;
+  --color-light-rgb-danger: 199, 46, 46;
+  --color-light-rgb-highlight: 250, 240, 211;
+
+  /* forms */
+  --color-light-context-input-background: 87, 90, 92;
+
+  /* buttons */
+  --color-light-context-button-background: 28, 29, 30;
+  --color-light-context-button-background-hover: 36, 42, 49;
+  --color-light-context-button-text: 255, 255, 255;
+
+
+  /* dark theme
+  ========================== */
+  /* typography */
+  --color-dark-rgb-text: 208, 212, 218;
+  --color-dark-rgb-text-secondary: 114, 148, 152;
+  --colot-light-rgb-text-inverted: 0, 0, 0;
+
+  /* interaction */
+  --color-dark-rgb-interaction: 100, 180, 200;
+  --color-dark-rgb-interaction-hover: 130, 210, 230;
+  --color-dark-rgb-interaction-active: 115, 195, 215;
+
+  /* backgrounds and frames */
+  --color-dark-rgb-frame: 47, 61, 76;
+
+  --color-dark-rgb-page: 29, 40, 51;
+  --color-dark-rgb-background: 19, 32, 45;
+  --color-dark-rgb-middleground: 15, 25, 35;
+  --color-dark-rgb-context: 21, 29, 38;
+
+  /* attention colors */
+  --color-dark-rgb-confirmation: 30, 142, 73;
+  --color-dark-rgb-danger: 221, 89, 89;
+  --color-dark-rgb-highlight: 106, 62, 10;
+
+  /* forms */
+  --color-dark-context-input-background: 87, 90, 92;
+
+  /* buttons */
+  --color-dark-context-button-background: 41, 48, 57;
+  --color-dark-context-button-background-hover: 61, 68, 78;
+  --color-dark-context-button-text: 255, 255, 255;
+
+}
+
+/* rbg parts based on the theme choosen */
+:root,
+::backdrop {
+  --color-rgb-text: var(--color-light-rgb-text);
+  --color-rgb-text-secondary: var(--color-light-rgb-text-secondary);
+  --color-rgb-text-inverted: var(--color-light-rgb-text-inverted);
+
+  --color-rgb-interaction: var(--color-light-rgb-interaction);
+  --color-rgb-interaction-hover: var(--color-light-rgb-interaction-hover);
+  --color-rgb-interaction-active: var(--color-light-rgb-interaction-active);
+
+  --color-rgb-frame: var(--color-light-rgb-frame);
+
+  --color-rgb-page: var(--color-light-rgb-page);
+  --color-rgb-background: var(--color-light-rgb-background);
+  --color-rgb-middleground: var(--color-light-rgb-middleground);
+  --color-rgb-context: var(--color-light-rgb-context);
+
+  --color-rgb-confirmation: var(--color-light-rgb-confirmation);
+  --color-rgb-danger: var(--color-light-rgb-danger);
+  --color-rgb-highlight: var(--color-light-rgb-highlight);
+
+  --color-rgb-context-input-background: var(--color-light-context-input-background);
+
+  --color-rgb-context-button-background: var(--color-light-context-button-background);
+  --color-rgb-context-button-background-hover: var(--color-light-context-button-background-hover);
+  --color-rgb-context-button-text: var(--color-light-context-button-text);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root,
+  ::backdrop {
+    --color-rgb-text: var(--color-dark-rgb-text);
+    --color-rgb-text-secondary: var(--color-dark-rgb-text-secondary);
+    --color-rgb-text-inverted: var(--color-dark-rgb-text-inverted);
+
+    --color-rgb-interaction: var(--color-dark-rgb-interaction);
+    --color-rgb-interaction-hover: var(--color-dark-rgb-interaction-hover);
+    --color-rgb-interaction-active: var(--color-dark-rgb-interaction-active);
+
+    --color-rgb-frame: var(--color-dark-rgb-frame);
+
+    --color-rgb-page: var(--color-dark-rgb-page);
+    --color-rgb-background: var(--color-dark-rgb-background);
+    --color-rgb-middleground: var(--color-dark-rgb-middleground);
+    --color-rgb-context: var(--color-dark-rgb-context);
+
+    --color-rgb-confirmation: var(--color-dark-rgb-confirmation);
+    --color-rgb-danger: var(--color-dark-rgb-danger);
+    --color-rgb-highlight: var(--color-dark-rgb-highlight);
+
+    --color-rgb-context-input-background: var(--color-dark-context-input-background);
+
+    --color-rgb-context-button-background: var(--color-dark-context-button-background);
+    --color-rgb-context-button-background-hover: var(--color-dark-context-button-background-hover);
+    --color-rgb-context-button-text: var(--color-dark-context-button-text);
+  }
+}
+
+/* negotiated rgb parts to an actual color */
+:root {
+  --color-text: rgb(var(--color-rgb-text));
+  --color-text-secondary: rgb(var(--color-rgb-text-secondary));
+  --color-text-inverted: rgb(var(--color-rgb-text-inverted));
+
+  --color-interaction: rgb(var(--color-rgb-interaction));
+  --color-interaction-hover: rgb(var(--color-rgb-interaction-hover));
+  --color-interaction-active: rgb(var(--color-rgb-interaction-active));
+
+  --color-frame: rgb(var(--color-rgb-frame));
+
+  --color-page: rgb(var(--color-rgb-page));
+  --color-background: rgb(var(--color-rgb-background));
+  --color-middleground: rgb(var(--color-rgb-middleground));
+  --color-context: rgb(var(--color-rgb-context));
+
+  --color-confirmation: rgb(var(--color-rgb-confirmation));
+  --color-danger: rgb(var(--color-rgb-danger));
+  --color-highlight: rgb(var(--color-rgb-highlight));
+
+  --color-context-input-background: rgb(var(--color-rgb-context-input-background));
+
+  --color-context-button-background: rgb(var(--color-rgb-context-button-background));
+  --color-context-button-background-hover: rgb(var(--color-rgb-context-button-background-hover));
+  --color-context-button-text: rgb(var(--color-rgb-context-button-text));
+}
+
+
+/* spacings
+============================================================================ */
+:root {
+  --space-page: 2rem;
+}
+
+
+/* fonts
+============================================================================ */
+:root {
+  --font-normal: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}