@muze-nl/simplystore 0.4.1 → 0.4.2

package/www/codemirror/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "codemirror",
+  "version": "5.65.11",
+  "main": "lib/codemirror.js",
+  "style": "lib/codemirror.css",
+  "author": {
+    "name": "Marijn Haverbeke",
+    "email": "marijnh@gmail.com",
+    "url": "http://marijnhaverbeke.nl"
+  },
+  "description": "Full-featured in-browser code editor",
+  "license": "MIT",
+  "directories": {
+    "lib": "./lib"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -w -c",
+    "prepare": "npm run-script build",
+    "test": "node ./test/run.js",
+    "lint": "bin/lint"
+  },
+  "devDependencies": {
+    "@rollup/plugin-buble": "^0.21.3",
+    "blint": "^1.1.2",
+    "cm5-vim": "^0.0.5",
+    "node-static": "0.7.11",
+    "puppeteer": "^1.20.0",
+    "rollup": "^1.26.3",
+    "rollup-plugin-copy": "^3.4.0"
+  },
+  "bugs": "http://github.com/codemirror/CodeMirror/issues",
+  "keywords": [
+    "JavaScript",
+    "CodeMirror",
+    "Editor"
+  ],
+  "homepage": "https://codemirror.net/5/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codemirror/CodeMirror.git"
+  },
+  "jspm": {
+    "directories": {},
+    "dependencies": {},
+    "devDependencies": {}
+  },
+  "dependencies": {},
+  "publishConfig": {
+    "tag": "version5"
+  }
+}

package/www/codemirror/theme/material-ocean.css

@@ -0,0 +1,141 @@
+/*
+  Name:       material
+  Author:     Mattia Astorino (http://github.com/equinusocio)
+  Website:    https://material-theme.site/
+*/
+
+.cm-s-material-ocean.CodeMirror {
+  background-color: #0F111A;
+  color: #8F93A2;
+}
+
+.cm-s-material-ocean .CodeMirror-gutters {
+  background: #0F111A;
+  color: #464B5D;
+  border: none;
+}
+
+.cm-s-material-ocean .CodeMirror-guttermarker,
+.cm-s-material-ocean .CodeMirror-guttermarker-subtle,
+.cm-s-material-ocean .CodeMirror-linenumber {
+  color: #464B5D;
+}
+
+.cm-s-material-ocean .CodeMirror-cursor {
+  border-left: 1px solid #FFCC00;
+}
+.cm-s-material-ocean.cm-fat-cursor .CodeMirror-cursor {
+  background-color: #a2a8a175 !important;
+}
+.cm-s-material-ocean .cm-animate-fat-cursor {
+  background-color: #a2a8a175 !important;
+}
+
+.cm-s-material-ocean div.CodeMirror-selected {
+  background: rgba(113, 124, 180, 0.2);
+}
+
+.cm-s-material-ocean.CodeMirror-focused div.CodeMirror-selected {
+  background: rgba(113, 124, 180, 0.2);
+}
+
+.cm-s-material-ocean .CodeMirror-line::selection,
+.cm-s-material-ocean .CodeMirror-line>span::selection,
+.cm-s-material-ocean .CodeMirror-line>span>span::selection {
+  background: rgba(128, 203, 196, 0.2);
+}
+
+.cm-s-material-ocean .CodeMirror-line::-moz-selection,
+.cm-s-material-ocean .CodeMirror-line>span::-moz-selection,
+.cm-s-material-ocean .CodeMirror-line>span>span::-moz-selection {
+  background: rgba(128, 203, 196, 0.2);
+}
+
+.cm-s-material-ocean .CodeMirror-activeline-background {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.cm-s-material-ocean .cm-keyword {
+  color: #C792EA;
+}
+
+.cm-s-material-ocean .cm-operator {
+  color: #89DDFF;
+}
+
+.cm-s-material-ocean .cm-variable-2 {
+  color: #EEFFFF;
+}
+
+.cm-s-material-ocean .cm-variable-3,
+.cm-s-material-ocean .cm-type {
+  color: #f07178;
+}
+
+.cm-s-material-ocean .cm-builtin {
+  color: #FFCB6B;
+}
+
+.cm-s-material-ocean .cm-atom {
+  color: #F78C6C;
+}
+
+.cm-s-material-ocean .cm-number {
+  color: #FF5370;
+}
+
+.cm-s-material-ocean .cm-def {
+  color: #82AAFF;
+}
+
+.cm-s-material-ocean .cm-string {
+  color: #C3E88D;
+}
+
+.cm-s-material-ocean .cm-string-2 {
+  color: #f07178;
+}
+
+.cm-s-material-ocean .cm-comment {
+  color: #464B5D;
+}
+
+.cm-s-material-ocean .cm-variable {
+  color: #f07178;
+}
+
+.cm-s-material-ocean .cm-tag {
+  color: #FF5370;
+}
+
+.cm-s-material-ocean .cm-meta {
+  color: #FFCB6B;
+}
+
+.cm-s-material-ocean .cm-attribute {
+  color: #C792EA;
+}
+
+.cm-s-material-ocean .cm-property {
+  color: #C792EA;
+}
+
+.cm-s-material-ocean .cm-qualifier {
+  color: #DECB6B;
+}
+
+.cm-s-material-ocean .cm-variable-3,
+.cm-s-material-ocean .cm-type {
+  color: #DECB6B;
+}
+
+
+.cm-s-material-ocean .cm-error {
+  color: rgba(255, 255, 255, 1.0);
+  background-color: #FF5370;
+}
+
+.cm-s-material-ocean .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}

package/www/index.html

@@ -0,0 +1,359 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/assets/css/style.css">
+<style>
+	:root {
+		--ds-primary: var(--ds-simplystore);
+		--ds-primary-contrast: var(--ds-simplystore-contrast);
+		--ds-primary-gradient: var(--ds-simplystore-gradient);
+		--ds-primary-gradient-bump: var(--ds-simplystore-gradient-bump);
+	}
+	body {
+		position: fixed;
+		width: 100%;
+		display: grid;
+		grid-template:
+			"header header" 65px
+			"code data" auto / 1fr 1fr;
+		height: 100%;
+		column-gap: 5px;
+	}
+	header {
+		grid-area: header;
+	}
+	form.Query {
+		grid-area: code;
+		overflow: auto;
+	}
+	.dataBrowser {
+		position: relative;
+		grid-area: data;
+		overflow: auto;
+	}
+	.CodeMirror {
+		height: 100% !important;
+	}
+
+	.ds-visible {
+		display: block;
+	}
+	.help {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: var(--ds-black);
+		color: var(--ds-white);
+		margin:0;
+		padding:0;
+		overflow: hidden;
+	}
+	iframe.full {
+		border: 0;
+		height: calc(100% + 1px);
+		width: calc(100% + 1px);
+		border: 0;
+	}
+	.ds-close {
+		position: absolute;
+		z-index: 1000;
+		top: 0;
+		right: 0;
+	}
+	dialog {
+		border: 0;
+		margin: 0;
+	}
+</style>
+<body class="ds-nightmode">
+<header>
+    <nav class="ds-toolbar">
+        <div class="simply-title">
+            <img src="/assets/img/simplystore-narrow.svg" alt="SimplyStore">
+        </div>
+        <button data-simply-command="run-query" class="ds-button ds-button-icon">
+            <svg class="ds-icon ds-icon-feather">
+                <use xlink:href="/assets/feather-sprite.svg#search">
+            </use></svg>
+            Run
+        </button>
+        <button data-simply-command="load-query-dropdown" class="ds-button ds-button-icon">
+            <svg class="ds-icon ds-icon-feather">
+                <use xlink:href="/assets/feather-sprite.svg#download">
+            </use></svg>
+            Load
+		    <nav class="ds-dropdown-nav">
+		        <ul class="ds-dropdown-list" data-simply-list="queries">
+		        	<template>
+			            <li class="ds-dropdown-item" data-simply-command="load-query"><span data-simply-field="name">Query</span></li>
+		            </template>
+		        </ul>
+		    </nav>
+        </button>
+        <button data-simply-command="save-query" class="ds-button ds-button-icon">
+            <svg class="ds-icon ds-icon-feather">
+                <use xlink:href="/assets/feather-sprite.svg#bookmark">
+            </use></svg>
+            Save
+        </button>
+        <button data-simply-command="delete-query" class="ds-button ds-button-icon" disabled>
+            <svg class="ds-icon ds-icon-feather">
+                <use xlink:href="/assets/feather-sprite.svg#trash-2">
+            </use></svg>
+            Delete
+        </button>
+        <button data-simply-command="load-fixtures" class="ds-button ds-button-icon">
+            <svg class="ds-icon ds-icon-feather">
+                <use xlink:href="/assets/feather-sprite.svg#briefcase">
+            </use></svg>
+            Fixtures        	
+        </button>
+        <span class="ds-push-right"></span>
+        <button data-simply-command="download" class="ds-button ds-button-icon">
+            <svg class="ds-icon ds-icon-feather">
+                <use xlink:href="/assets/feather-sprite.svg#download">
+            </use></svg>
+            Download
+        </button>
+        <button data-simply-command="help" class="ds-button ds-button-icon">
+            <svg class="ds-icon ds-icon-feather">
+                <use xlink:href="/assets/feather-sprite.svg#help-circle">
+            </use></svg>
+            Help
+        </button>
+    </nav>
+</header>
+
+<form data-simply-command="query" class="Query" data-simply-keyboard="query">
+<textarea name="query" id="codeEditor" class="CodeMirror"></textarea>
+</form>
+
+<div class="dataBrowser">
+	<textarea id="databrowser" class="CodeMirror" data-simply-field="data"></textarea>
+	<dialog class="help">
+		<button data-simply-command="close" class="ds-button ds-button-naked ds-close" data-simply-value="button[data-simply-command=help]">
+            <svg class="ds-icon ds-icon-feather">
+                <use xlink:href="/assets/feather-sprite.svg#x">
+            </use></svg>			
+		</button>
+		<iframe class="full" src="/help/"></iframe>
+	<dialog>
+</div>
+
+<script src="/codemirror/lib/codemirror.js"></script>
+<link rel="stylesheet" href="/codemirror/lib/codemirror.css">
+<link rel="stylesheet" href="/codemirror/addon/lint/lint.css">
+<script src="/codemirror/mode/javascript/javascript.js"></script>
+<link rel="stylesheet" href="/codemirror/theme/material-ocean.css">
+<script src="https://unpkg.com/jshint@2.13.6/dist/jshint.js"></script>
+<script src="/codemirror/addon/lint/lint.js"></script>
+<script src="/codemirror/addon/lint/javascript-lint.js"></script>
+<script src="https://unpkg.com/@muze-nl/jsontag@0.8.3/dist/browser.js"></script>
+<script src="https://cdn.simplyedit.io/1/simply-edit.js"></script>
+<script src="https://unpkg.com/simplyview@2.0.3/dist/simply.everything.js"></script>
+<script>
+	var codeEditor = CodeMirror.fromTextArea(document.getElementById('codeEditor'), {
+		lineNumbers: true,
+		styleActiveLine: true,
+		matchBrackets: true,
+		theme: 'material-ocean',
+		mode: 'javascript'
+	})
+	codeEditor.focus()
+	var browser = CodeMirror.fromTextArea(document.getElementById('databrowser'), {
+		theme: 'material-ocean',
+		readOnly: true
+	})
+</script>
+<script>
+	const databrowser = simply.app({
+		routes: {
+			'/:*': async (params) => {
+				await databrowser.actions.query(window.location.pathname)
+				browser.setValue(databrowser.view.data)
+			}
+		},
+		commands: {
+			'run-query': async function(button, value) {
+				await this.app.actions.query(window.location.pathname, codeEditor.getValue())
+				browser.setValue(databrowser.view.data)
+			},
+			query: async function(form, values) {
+				await this.app.actions.query(window.location.pathname, values.query)
+				browser.setValue(databrowser.view.data)
+			},
+			'load-query-dropdown': async function(button) {
+				button.querySelector('nav.ds-dropdown-nav').classList.toggle('ds-visible')
+			},
+			'load-query': async function(el, value) {
+				let query = await this.app.actions.loadQuery(el.innerText)
+				codeEditor.setValue(query)
+				let button = el.closest('.ds-button')
+				button.querySelector('nav.ds-dropdown-nav').classList.remove('ds-visible')
+				this.app.actions.toggleDelete('on')
+				codeEditor.focus()
+			},
+			'save-query': async function() {
+				let name = prompt('Enter the query name:',this.app.view.queryName || 'query')
+				if (name) {
+					this.app.actions.saveQuery(name, codeEditor.getValue())
+					this.app.actions.toggleDelete('on')
+				}
+			},
+			'delete-query': async function() {
+				if (confirm('Delete this query: '+this.app.view.queryName+'?')) {
+					this.app.actions.deleteQuery(this.app.view.queryName)
+					this.app.view.queryName = ''
+					this.app.actions.toggleDelete('off')
+				}
+			},
+			'load-fixtures': async function() {
+				let fixtures = await this.app.actions.loadFixtures()
+				codeEditor.setValue(fixtures)
+				codeEditor.focus()
+			},
+			'help': async function(el) {
+				let help = document.querySelector('.help');
+				if (help.open) {
+					help.removeAttribute('open')
+					el.classList.remove('ds-selected')
+				} else {
+					help.setAttribute('open','open')
+					el.classList.add('ds-selected')
+				}
+			},
+			'close': async function(el, value) {
+				el.closest('dialog').removeAttribute('open')
+				document.querySelector(value).classList.remove('ds-selected')
+			}
+		},
+		actions: {
+			start: async function() {
+				this.app.view.queries = JSON.parse(localStorage.getItem('queries') || '[]')
+			},
+			loadQuery: async function(name) {
+				this.app.view.queryName = name
+				return this.app.actions.getQuery(name)
+			},
+			saveQuery: async function(name, query) {
+				this.app.view.queryName = name
+				this.app.view.queries = this.app.view.queries.filter(q => q.name!=name)
+				this.app.view.queries.push({
+					name: name,
+					query: codeEditor.getValue()
+				})
+				localStorage.setItem('queries',JSON.stringify(this.app.view.queries))
+			},
+			deleteQuery: async function(name) {
+				this.app.view.queries = this.app.view.queries.filter(q => q.name!=name)
+				localStorage.setItem('queries',JSON.stringify(this.app.view.queris))
+			},
+			toggleDelete: async function(state) {
+				let deleteButtons = document.querySelectorAll('.ds-button[data-simply-command="delete-query"]')
+				if (deleteButtons) {
+					if (state==='on') {
+						deleteButtons.forEach(b => b.removeAttribute('disabled'))
+					} else if (state==='off') {
+						deleteButtons.forEach(b => b.setAttribute('disabled','disabled'))
+					}
+				}
+			},
+			loadFixtures: async function() {
+				return this.app.actions.loadQuery('Fixtures')
+			},
+			getQuery: async function(name) {
+				let query = this.app.view.queries.filter(q => q.name===name)
+				if (query && query[0]) {
+					return query[0].query 
+				}
+				return ''	
+			},
+			query: async function(path, query) {
+				try {
+					let data;
+					if (query) {
+						query = await this.app.actions.getQuery('Fixtures')+';'+query
+						data = await api.post(path, query)
+					} else {
+						data = await api.get(path)
+					}
+					databrowser.view.data = JSONTag.stringify(data, null, 4)
+					return data
+				} catch(err) {
+					databrowser.view.data = JSONTag.stringify(err, null, 4)
+					return err
+				}
+			}
+		},
+		keyboard: {
+			query: {
+				'Control+Enter': async function() {
+					await databrowser.actions.query(window.location.pathname, codeEditor.getValue())
+					browser.setValue(databrowser.view.data)
+				}
+			}
+		},
+		view: {
+			queries: [
+				{
+					name: 'Test Query',
+					query: 'from(data.persons).select({name:_})'
+				}
+			]
+		}
+	})
+
+	const apiBase = window.location.protocol+'//'+window.location.host;
+	const api = {
+		get: function(path, params) {
+			let url = apiBase+path;
+			if (!params && window.location.search) {
+				url += window.location.search
+			}
+			if (params) {
+				var args = Object.keys(params).map(param => encodeURIComponent(param)+'='+encodeURIComponent(params[param])).join('&')
+				url += '?' + args
+			}
+			return fetch(url, {
+				headers: {
+					'Accept': 'application/jsontag'
+				}
+			})
+			.then(response => {
+				let jsontag = response.text().then(JSONTag.parse)
+				if (response.ok) {
+					return jsontag
+				}
+				return jsontag.then(Promise.reject.bind(Promise))
+			})
+		},
+		post: function(path, query, params) {
+			let url = apiBase+path;
+			if (!params && window.location.search) {
+				url += window.location.search
+			}
+			if (params) {
+				var args = Object.keys(params).map(param => encodeURIComponent(param)+'='+encodeURIComponent(params[param])).join('&')
+				url += '?' + args
+			}
+			
+			return fetch(url, {
+				method: 'POST',
+				headers: {
+					'Accept': 'application/jsontag'
+				},
+				body: query
+			})
+			.then(response => {
+				let jsontag = response.text().then(JSONTag.parse)
+				if (response.ok) {
+					return jsontag
+				}
+				return jsontag.then(Promise.reject.bind(Promise))
+			})	
+		}
+	}
+
+	databrowser.actions.start()
+</script>