left iconbar

package.json

@@ -10,6 +10,7 @@
     "start:api:portal": "yarn workspace dbgate-api start:portal",
     "start:api:covid": "yarn workspace dbgate-api start:covid",
     "start:web": "yarn workspace dbgate-web start",
+    "start:web2": "yarn workspace dbgate-web-svelte dev",
      "start:sqltree": "yarn workspace dbgate-sqltree start",
     "start:tools": "yarn workspace dbgate-tools start",
     "start:datalib": "yarn workspace dbgate-datalib start",

packages/web-svelte/README.md

@@ -0,0 +1,105 @@
+*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+## Using TypeScript
+
+This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
+
+```bash
+node scripts/setupTypeScript.js
+```
+
+Or remove the script via:
+
+```bash
+rm scripts/setupTypeScript.js
+```
+
+## Deploying to the web
+
+### With [Vercel](https://vercel.com)
+
+Install `vercel` if you haven't already:
+
+```bash
+npm install -g vercel
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+vercel deploy --name my-project
+```
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```

packages/web-svelte/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "dbgate-web-svelte",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public",
+    "validate": "svelte-check"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@tsconfig/svelte": "^1.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "svelte": "^3.0.0",
+    "svelte-check": "^1.0.0",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.3"
+  },
+  "dependencies": {
+    "@mdi/font": "^5.9.55",
+    "rollup-plugin-copy": "^3.3.0",
+    "sirv-cli": "^1.0.0"
+  }
+}

packages/web-svelte/public/global.css

@@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}

packages/web-svelte/public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/global.css'>
+	<link rel='stylesheet' href='/theme-light.css'>
+	<link rel='stylesheet' href='/theme-dark.css'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+	<link rel='stylesheet' href='/build/fonts/materialdesignicons.css'>
+	
+
+	<script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>

packages/web-svelte/public/theme-dark.css

@@ -0,0 +1,5 @@
+.theme-dark .statusbar { background-color: blue }
+.theme-dark .iconbar { 
+    background-color: #222;
+    color: #b3b3b3;
+}

packages/web-svelte/public/theme-light.css

@@ -0,0 +1,5 @@
+.theme-light .statusbar { background-color: blue }
+.theme-dark .iconbar { 
+    background-color: #222;
+    color: #b3b3b3;
+}

packages/web-svelte/rollup.config.js

@@ -0,0 +1,99 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import copy from 'rollup-plugin-copy';
+import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
+import css from 'rollup-plugin-css-only';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+  let server;
+
+  function toExit() {
+    if (server) server.kill(0);
+  }
+
+  return {
+    writeBundle() {
+      if (server) return;
+      server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+        stdio: ['ignore', 'inherit', 'inherit'],
+        shell: true,
+      });
+
+      process.on('SIGTERM', toExit);
+      process.on('exit', toExit);
+    },
+  };
+}
+
+export default {
+  input: 'src/main.ts',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/build/bundle.js',
+  },
+  plugins: [
+    copy({
+      targets: [
+        {
+          src:
+            '../../node_modules/@mdi/font/css/materialdesignicons.css',
+          dest: 'public/build/fonts/',
+        },
+        {
+			src:
+			  '../../node_modules/@mdi/font/fonts/*',
+			dest: 'public/build/fonts/',
+		  },
+		],
+    }),
+
+    svelte({
+      preprocess: sveltePreprocess({ sourceMap: !production }),
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+      },
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: 'bundle.css' }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ['svelte'],
+    }),
+    commonjs(),
+    typescript({
+      sourceMap: !production,
+      inlineSources: !production,
+    }),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
+};

packages/web-svelte/src/App.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import Screen from './Screen.svelte';
+
+</script>
+
+<Screen />

packages/web-svelte/src/Screen.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
+</script>
+
+<div class="theme-dark">
+  <div class="iconbar">
+    <WidgetIconPanel />
+  </div>
+  <div class="statusbar" />
+</div>
+
+<style>
+  :root {
+    --widget-icon-size: 50px;
+    --statusbar-height: 20px;
+  }
+  .iconbar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: var(--statusbar-height);
+    width: var(--widget-icon-size);
+  }
+  .statusbar {
+    position: fixed;
+    height: var(--statusbar-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+</style>

packages/web-svelte/src/icons/FontIcon.svelte

@@ -0,0 +1,104 @@
+<script>
+  export let icon;
+
+  const iconNames = {
+    'icon minus-box': 'mdi mdi-minus-box-outline',
+    'icon plus-box': 'mdi mdi-plus-box-outline',
+    'icon invisible-box': 'mdi mdi-minus-box-outline icon-invisible',
+    'icon cloud-upload': 'mdi mdi-cloud-upload',
+    'icon import': 'mdi mdi-application-import',
+    'icon export': 'mdi mdi-application-export',
+    'icon new-connection': 'mdi mdi-database-plus',
+    'icon tables': 'mdi mdi-table-multiple',
+    'icon favorite': 'mdi mdi-star',
+    'icon share': 'mdi mdi-share-variant',
+    'icon add': 'mdi mdi-plus-circle',
+    'icon connection': 'mdi mdi-connection',
+
+    'icon database': 'mdi mdi-database',
+    'icon server': 'mdi mdi-server',
+    'icon table': 'mdi mdi-table',
+    'icon archive': 'mdi mdi-archive',
+    'icon file': 'mdi mdi-file',
+    'icon loading': 'mdi mdi-loading mdi-spin',
+    'icon close': 'mdi mdi-close',
+    'icon filter': 'mdi mdi-filter',
+    'icon filter-off': 'mdi mdi-filter-off',
+    'icon reload': 'mdi mdi-reload',
+    'icon undo': 'mdi mdi-undo',
+    'icon redo': 'mdi mdi-redo',
+    'icon save': 'mdi mdi-content-save',
+    'icon account': 'mdi mdi-account',
+    'icon sql-file': 'mdi mdi-file',
+    'icon web': 'mdi mdi-web',
+    'icon home': 'mdi mdi-home',
+    'icon query-design': 'mdi mdi-vector-polyline-edit',
+    'icon form': 'mdi mdi-form-select',
+
+    'icon edit': 'mdi mdi-pencil',
+    'icon delete': 'mdi mdi-delete',
+    'icon arrow-up': 'mdi mdi-arrow-up',
+    'icon arrow-down': 'mdi mdi-arrow-down',
+    'icon arrow-left': 'mdi mdi-arrow-left',
+    'icon arrow-begin': 'mdi mdi-arrow-collapse-left',
+    'icon arrow-end': 'mdi mdi-arrow-collapse-right',
+    'icon arrow-right': 'mdi mdi-arrow-right',
+    'icon format-code': 'mdi mdi-code-tags-check',
+    'icon show-wizard': 'mdi mdi-comment-edit',
+    'icon disconnected': 'mdi mdi-lan-disconnect',
+    'icon theme': 'mdi mdi-brightness-6',
+    'icon error': 'mdi mdi-close-circle',
+    'icon ok': 'mdi mdi-check-circle',
+    'icon markdown': 'mdi mdi-application',
+    'icon preview': 'mdi mdi-file-find',
+    'icon eye': 'mdi mdi-eye',
+
+    'icon run': 'mdi mdi-play',
+    'icon chevron-down': 'mdi mdi-chevron-down',
+    'icon chevron-left': 'mdi mdi-chevron-left',
+    'icon chevron-right': 'mdi mdi-chevron-right',
+    'icon chevron-up': 'mdi mdi-chevron-up',
+    'icon plugin': 'mdi mdi-toy-brick',
+    'icon menu': 'mdi mdi-menu',
+
+    'img ok': 'mdi mdi-check-circle color-green-8',
+    'img alert': 'mdi mdi-alert-circle color-blue-6',
+    'img error': 'mdi mdi-close-circle color-red-7',
+    'img warn': 'mdi mdi-alert color-gold-7',
+    // 'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',
+
+    'img archive': 'mdi mdi-table color-gold-7',
+    'img archive-folder': 'mdi mdi-database-outline color-green-7',
+    'img autoincrement': 'mdi mdi-numeric-1-box-multiple-outline',
+    'img column': 'mdi mdi-table-column',
+    'img server': 'mdi mdi-server color-blue-7',
+    'img primary-key': 'mdi mdi-key-star color-yellow-7',
+    'img foreign-key': 'mdi mdi-key-link',
+    'img sql-file': 'mdi mdi-file',
+    'img shell': 'mdi mdi-flash color-blue-7',
+    'img chart': 'mdi mdi-chart-bar color-magenta-7',
+    'img markdown': 'mdi mdi-application color-red-7',
+    'img preview': 'mdi mdi-file-find color-red-7',
+    'img favorite': 'mdi mdi-star color-yellow-7',
+    'img query-design': 'mdi mdi-vector-polyline-edit color-red-7',
+
+    'img free-table': 'mdi mdi-table color-green-7',
+    'img macro': 'mdi mdi-hammer-wrench',
+
+    'img database': 'mdi mdi-database color-gold-7',
+    'img table': 'mdi mdi-table color-blue-7',
+    'img view': 'mdi mdi-table color-magenta-7',
+    'img procedure': 'mdi mdi-cog color-blue-7',
+    'img function': 'mdi mdi-function-variant',
+
+    'img sort-asc': 'mdi mdi-sort-alphabetical-ascending color-green',
+    'img sort-desc': 'mdi mdi-sort-alphabetical-descending color-green',
+
+    'img reference': 'mdi mdi-link-box',
+    'img link': 'mdi mdi-link',
+    'img filter': 'mdi mdi-filter',
+    'img group': 'mdi mdi-group',
+  };
+</script>
+
+<span class={iconNames[icon] || icon} />

packages/web-svelte/src/main.ts

@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;

packages/web-svelte/src/widgets/WidgetIconPanel.svelte

@@ -0,0 +1,59 @@
+<script>
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  const widgets = [
+    {
+      icon: 'icon database',
+      name: 'database',
+      title: 'Database connections',
+    },
+    // {
+    //   icon: 'fa-table',
+    //   name: 'table',
+    // },
+    {
+      icon: 'icon file',
+      name: 'file',
+      title: 'Closed tabs & Saved SQL files',
+    },
+    {
+      icon: 'icon archive',
+      name: 'archive',
+      title: 'Archive (saved tabular data)',
+    },
+    {
+      icon: 'icon plugin',
+      name: 'plugins',
+      title: 'Extensions & Plugins',
+    },
+    {
+      icon: 'icon favorite',
+      name: 'favorites',
+      title: 'Favorites',
+    },
+    // {
+    //   icon: 'fa-cog',
+    //   name: 'settings',
+    // },
+    // {
+    //   icon: 'fa-check',
+    //   name: 'settings',
+    // },
+  ];
+</script>
+
+{#each widgets as item}
+  <div class="wrapper">
+    <FontIcon icon={item.icon} />
+  </div>
+{/each}
+
+<style>
+  .wrapper {
+    font-size: 23pt;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

packages/web-svelte/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}