@muze-nl/simplystore 0.1.2

package/www/codemirror/theme/xq-dark.css

@@ -0,0 +1,53 @@
+/*
+Copyright (C) 2011 by MarkLogic Corporation
+Author: Mike Brevoort <mike@brevoort.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+.cm-s-xq-dark.CodeMirror { background: #0a001f; color: #f8f8f8; }
+.cm-s-xq-dark div.CodeMirror-selected { background: #27007A; }
+.cm-s-xq-dark .CodeMirror-line::selection, .cm-s-xq-dark .CodeMirror-line > span::selection, .cm-s-xq-dark .CodeMirror-line > span > span::selection { background: rgba(39, 0, 122, 0.99); }
+.cm-s-xq-dark .CodeMirror-line::-moz-selection, .cm-s-xq-dark .CodeMirror-line > span::-moz-selection, .cm-s-xq-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(39, 0, 122, 0.99); }
+.cm-s-xq-dark .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
+.cm-s-xq-dark .CodeMirror-guttermarker { color: #FFBD40; }
+.cm-s-xq-dark .CodeMirror-guttermarker-subtle { color: #f8f8f8; }
+.cm-s-xq-dark .CodeMirror-linenumber { color: #f8f8f8; }
+.cm-s-xq-dark .CodeMirror-cursor { border-left: 1px solid white; }
+
+.cm-s-xq-dark span.cm-keyword { color: #FFBD40; }
+.cm-s-xq-dark span.cm-atom { color: #6C8CD5; }
+.cm-s-xq-dark span.cm-number { color: #164; }
+.cm-s-xq-dark span.cm-def { color: #FFF; text-decoration:underline; }
+.cm-s-xq-dark span.cm-variable { color: #FFF; }
+.cm-s-xq-dark span.cm-variable-2 { color: #EEE; }
+.cm-s-xq-dark span.cm-variable-3, .cm-s-xq-dark span.cm-type { color: #DDD; }
+.cm-s-xq-dark span.cm-property {}
+.cm-s-xq-dark span.cm-operator {}
+.cm-s-xq-dark span.cm-comment { color: gray; }
+.cm-s-xq-dark span.cm-string { color: #9FEE00; }
+.cm-s-xq-dark span.cm-meta { color: yellow; }
+.cm-s-xq-dark span.cm-qualifier { color: #FFF700; }
+.cm-s-xq-dark span.cm-builtin { color: #30a; }
+.cm-s-xq-dark span.cm-bracket { color: #cc7; }
+.cm-s-xq-dark span.cm-tag { color: #FFBD40; }
+.cm-s-xq-dark span.cm-attribute { color: #FFF700; }
+.cm-s-xq-dark span.cm-error { color: #f00; }
+
+.cm-s-xq-dark .CodeMirror-activeline-background { background: #27282E; }
+.cm-s-xq-dark .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; }

package/www/codemirror/theme/xq-light.css

@@ -0,0 +1,43 @@
+/*
+Copyright (C) 2011 by MarkLogic Corporation
+Author: Mike Brevoort <mike@brevoort.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+.cm-s-xq-light span.cm-keyword { line-height: 1em; font-weight: bold; color: #5A5CAD; }
+.cm-s-xq-light span.cm-atom { color: #6C8CD5; }
+.cm-s-xq-light span.cm-number { color: #164; }
+.cm-s-xq-light span.cm-def { text-decoration:underline; }
+.cm-s-xq-light span.cm-variable { color: black; }
+.cm-s-xq-light span.cm-variable-2 { color:black; }
+.cm-s-xq-light span.cm-variable-3, .cm-s-xq-light span.cm-type { color: black; }
+.cm-s-xq-light span.cm-property {}
+.cm-s-xq-light span.cm-operator {}
+.cm-s-xq-light span.cm-comment { color: #0080FF; font-style: italic; }
+.cm-s-xq-light span.cm-string { color: red; }
+.cm-s-xq-light span.cm-meta { color: yellow; }
+.cm-s-xq-light span.cm-qualifier { color: grey; }
+.cm-s-xq-light span.cm-builtin { color: #7EA656; }
+.cm-s-xq-light span.cm-bracket { color: #cc7; }
+.cm-s-xq-light span.cm-tag { color: #3F7F7F; }
+.cm-s-xq-light span.cm-attribute { color: #7F007F; }
+.cm-s-xq-light span.cm-error { color: #f00; }
+
+.cm-s-xq-light .CodeMirror-activeline-background { background: #e8f2ff; }
+.cm-s-xq-light .CodeMirror-matchingbracket { outline:1px solid grey;color:black !important;background:yellow; }

package/www/codemirror/theme/yeti.css

@@ -0,0 +1,44 @@
+/*
+
+    Name:       yeti
+    Author:     Michael Kaminsky (http://github.com/mkaminsky11)
+
+    Original yeti color scheme by Jesse Weed (https://github.com/jesseweed/yeti-syntax)
+
+*/
+
+
+.cm-s-yeti.CodeMirror {
+  background-color: #ECEAE8 !important;
+  color: #d1c9c0 !important;
+  border: none;
+}
+
+.cm-s-yeti .CodeMirror-gutters {
+  color: #adaba6;
+  background-color: #E5E1DB;
+  border: none;
+}
+.cm-s-yeti .CodeMirror-cursor { border-left: solid thin #d1c9c0; }
+.cm-s-yeti .CodeMirror-linenumber { color: #adaba6; }
+.cm-s-yeti.CodeMirror-focused div.CodeMirror-selected { background: #DCD8D2; }
+.cm-s-yeti .CodeMirror-line::selection, .cm-s-yeti .CodeMirror-line > span::selection, .cm-s-yeti .CodeMirror-line > span > span::selection { background: #DCD8D2; }
+.cm-s-yeti .CodeMirror-line::-moz-selection, .cm-s-yeti .CodeMirror-line > span::-moz-selection, .cm-s-yeti .CodeMirror-line > span > span::-moz-selection { background: #DCD8D2; }
+.cm-s-yeti span.cm-comment { color: #d4c8be; }
+.cm-s-yeti span.cm-string, .cm-s-yeti span.cm-string-2 { color: #96c0d8; }
+.cm-s-yeti span.cm-number { color: #a074c4; }
+.cm-s-yeti span.cm-variable { color: #55b5db; }
+.cm-s-yeti span.cm-variable-2 { color: #a074c4; }
+.cm-s-yeti span.cm-def { color: #55b5db; }
+.cm-s-yeti span.cm-operator { color: #9fb96e; }
+.cm-s-yeti span.cm-keyword { color: #9fb96e; }
+.cm-s-yeti span.cm-atom { color: #a074c4; }
+.cm-s-yeti span.cm-meta { color: #96c0d8; }
+.cm-s-yeti span.cm-tag { color: #96c0d8; }
+.cm-s-yeti span.cm-attribute { color: #9fb96e; }
+.cm-s-yeti span.cm-qualifier { color: #96c0d8; }
+.cm-s-yeti span.cm-property { color: #a074c4; }
+.cm-s-yeti span.cm-builtin { color: #a074c4; }
+.cm-s-yeti span.cm-variable-3, .cm-s-yeti span.cm-type { color: #96c0d8; }
+.cm-s-yeti .CodeMirror-activeline-background { background: #E7E4E0; }
+.cm-s-yeti .CodeMirror-matchingbracket { text-decoration: underline; }

package/www/codemirror/theme/yonce.css

@@ -0,0 +1,59 @@
+/*
+
+    Name:       yoncé
+    Author:     Thomas MacLean (http://github.com/thomasmaclean)
+
+    Original yoncé color scheme by Mina Markham (https://github.com/minamarkham)
+
+*/
+
+.cm-s-yonce.CodeMirror { background: #1C1C1C; color: #d4d4d4; } /**/
+.cm-s-yonce div.CodeMirror-selected { background: rgba(252, 69, 133, 0.478); } /**/
+.cm-s-yonce .CodeMirror-selectedtext,
+.cm-s-yonce .CodeMirror-selected,
+.cm-s-yonce .CodeMirror-line::selection,
+.cm-s-yonce .CodeMirror-line > span::selection,
+.cm-s-yonce .CodeMirror-line > span > span::selection,
+.cm-s-yonce .CodeMirror-line::-moz-selection,
+.cm-s-yonce .CodeMirror-line > span::-moz-selection,
+.cm-s-yonce .CodeMirror-line > span > span::-moz-selection { background: rgba(252, 67, 132, 0.47); }
+
+.cm-s-yonce.CodeMirror pre { padding-left: 0px; }
+.cm-s-yonce .CodeMirror-gutters {background: #1C1C1C; border-right: 0px;}
+.cm-s-yonce .CodeMirror-linenumber {color: #777777;  padding-right: 10px; }
+.cm-s-yonce .CodeMirror-activeline .CodeMirror-linenumber.CodeMirror-gutter-elt { background: #1C1C1C; color: #fc4384; }
+.cm-s-yonce .CodeMirror-linenumber { color: #777; }
+.cm-s-yonce .CodeMirror-cursor { border-left: 2px solid #FC4384; }
+.cm-s-yonce .cm-searching { background: rgba(243, 155, 53, .3) !important; outline: 1px solid #F39B35; }
+.cm-s-yonce .cm-searching.CodeMirror-selectedtext { background: rgba(243, 155, 53, .7) !important; color: white; }
+
+.cm-s-yonce .cm-keyword { color: #00A7AA; } /**/
+.cm-s-yonce .cm-atom { color: #F39B35; }
+.cm-s-yonce .cm-number, .cm-s-yonce span.cm-type { color:  #A06FCA; } /**/
+.cm-s-yonce .cm-def { color: #98E342; }
+.cm-s-yonce .cm-property,
+.cm-s-yonce span.cm-variable { color: #D4D4D4; font-style: italic; }
+.cm-s-yonce span.cm-variable-2 { color: #da7dae; font-style: italic; }
+.cm-s-yonce span.cm-variable-3 { color: #A06FCA; }
+.cm-s-yonce .cm-type.cm-def { color: #FC4384; font-style: normal; text-decoration: underline; }
+.cm-s-yonce .cm-property.cm-def { color: #FC4384; font-style: normal; }
+.cm-s-yonce .cm-callee { color: #FC4384; font-style: normal; }
+.cm-s-yonce .cm-operator { color: #FC4384; } /**/
+.cm-s-yonce .cm-qualifier,
+.cm-s-yonce .cm-tag { color: #FC4384; }
+.cm-s-yonce .cm-tag.cm-bracket { color: #D4D4D4; }
+.cm-s-yonce .cm-attribute { color: #A06FCA; }
+.cm-s-yonce .cm-comment { color:#696d70; font-style:italic; font-weight:normal; } /**/
+.cm-s-yonce .cm-comment.cm-tag { color: #FC4384 }
+.cm-s-yonce .cm-comment.cm-attribute { color: #D4D4D4; }
+.cm-s-yonce .cm-string { color:#E6DB74; } /**/
+.cm-s-yonce .cm-string-2 { color:#F39B35; } /*?*/
+.cm-s-yonce .cm-meta { color: #D4D4D4; background: inherit; }
+.cm-s-yonce .cm-builtin { color: #FC4384; } /*?*/
+.cm-s-yonce .cm-header { color: #da7dae; }
+.cm-s-yonce .cm-hr { color: #98E342; }
+.cm-s-yonce .cm-link { color:#696d70; font-style:italic; text-decoration:none; } /**/
+.cm-s-yonce .cm-error { border-bottom: 1px solid #C42412; }
+
+.cm-s-yonce .CodeMirror-activeline-background { background: #272727; }
+.cm-s-yonce .CodeMirror-matchingbracket { outline:1px solid grey; color:#D4D4D4 !important; }

package/www/codemirror/theme/zenburn.css

@@ -0,0 +1,37 @@
+/**
+ * "
+ *  Using Zenburn color palette from the Emacs Zenburn Theme
+ *  https://github.com/bbatsov/zenburn-emacs/blob/master/zenburn-theme.el
+ *
+ *  Also using parts of https://github.com/xavi/coderay-lighttable-theme
+ * "
+ * From: https://github.com/wisenomad/zenburn-lighttable-theme/blob/master/zenburn.css
+ */
+
+.cm-s-zenburn .CodeMirror-gutters { background: #3f3f3f !important; }
+.cm-s-zenburn .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { color: #999; }
+.cm-s-zenburn .CodeMirror-cursor { border-left: 1px solid white; }
+.cm-s-zenburn.CodeMirror { background-color: #3f3f3f; color: #dcdccc; }
+.cm-s-zenburn span.cm-builtin { color: #dcdccc; font-weight: bold; }
+.cm-s-zenburn span.cm-comment { color: #7f9f7f; }
+.cm-s-zenburn span.cm-keyword { color: #f0dfaf; font-weight: bold; }
+.cm-s-zenburn span.cm-atom { color: #bfebbf; }
+.cm-s-zenburn span.cm-def { color: #dcdccc; }
+.cm-s-zenburn span.cm-variable { color: #dfaf8f; }
+.cm-s-zenburn span.cm-variable-2 { color: #dcdccc; }
+.cm-s-zenburn span.cm-string { color: #cc9393; }
+.cm-s-zenburn span.cm-string-2 { color: #cc9393; }
+.cm-s-zenburn span.cm-number { color: #dcdccc; }
+.cm-s-zenburn span.cm-tag { color: #93e0e3; }
+.cm-s-zenburn span.cm-property { color: #dfaf8f; }
+.cm-s-zenburn span.cm-attribute { color: #dfaf8f; }
+.cm-s-zenburn span.cm-qualifier { color: #7cb8bb; }
+.cm-s-zenburn span.cm-meta { color: #f0dfaf; }
+.cm-s-zenburn span.cm-header { color: #f0efd0; }
+.cm-s-zenburn span.cm-operator { color: #f0efd0; }
+.cm-s-zenburn span.CodeMirror-matchingbracket { box-sizing: border-box; background: transparent; border-bottom: 1px solid; }
+.cm-s-zenburn span.CodeMirror-nonmatchingbracket { border-bottom: 1px solid; background: none; }
+.cm-s-zenburn .CodeMirror-activeline { background: #000000; }
+.cm-s-zenburn .CodeMirror-activeline-background { background: #000000; }
+.cm-s-zenburn div.CodeMirror-selected { background: #545454; }
+.cm-s-zenburn .CodeMirror-focused div.CodeMirror-selected { background: #4f4f4f; }

package/www/index.html

@@ -0,0 +1,216 @@
+<!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);
+	}
+	#databrowser {
+		border:  0;
+		margin:  0;
+		padding: 0;
+		width: 50%;
+		height: 80vh;
+	}
+	form.Query {
+		width: 49%;
+		float: left;
+		height: calc(100vh - 65px);		
+		margin-right: 1%;
+		margin-top: 65px;
+	}
+	.CodeMirror {
+		height: 100% !important;
+	}
+	.dataBrowser {
+		height: calc(100vh - 65px);
+		margin-top: 65px;
+	}
+	body {
+		position: fixed;
+		width: 100%;
+	}
+</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 Query
+        </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 Query
+		    <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="query">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 Query
+        </button>
+        <span class="ds-push-right"></span>
+        <button 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>
+</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').style='display:block'
+			}
+		},
+		actions: {
+			query: async function(path, query) {		
+				try {
+					let data;
+					if (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: [
+				{
+					query: 'Test Query'
+				}
+			]
+		}
+	})
+
+	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))
+			})	
+		}
+	}
+</script>