@muze-nl/simplystore 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/www/index.html +67 -7
  3. package/todo.txt +0 -151
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muze-nl/simplystore",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "main": "src/server.mjs",
5
5
  "type": "module",
6
6
  "scripts": {
package/www/index.html CHANGED
@@ -33,6 +33,9 @@
33
33
  position: fixed;
34
34
  width: 100%;
35
35
  }
36
+ .ds-visible {
37
+ display: block;
38
+ }
36
39
  </style>
37
40
  <body class="ds-nightmode">
38
41
  <header>
@@ -44,17 +47,17 @@
44
47
  <svg class="ds-icon ds-icon-feather">
45
48
  <use xlink:href="/assets/feather-sprite.svg#search">
46
49
  </use></svg>
47
- Run Query
50
+ Run
48
51
  </button>
49
52
  <button data-simply-command="load-query-dropdown" class="ds-button ds-button-icon">
50
53
  <svg class="ds-icon ds-icon-feather">
51
54
  <use xlink:href="/assets/feather-sprite.svg#download">
52
55
  </use></svg>
53
- Load Query
56
+ Load
54
57
  <nav class="ds-dropdown-nav">
55
58
  <ul class="ds-dropdown-list" data-simply-list="queries">
56
59
  <template>
57
- <li class="ds-dropdown-item" data-simply-command="load-query"><span data-simply-field="query">Query</span></li>
60
+ <li class="ds-dropdown-item" data-simply-command="load-query"><span data-simply-field="name">Query</span></li>
58
61
  </template>
59
62
  </ul>
60
63
  </nav>
@@ -63,9 +66,21 @@
63
66
  <svg class="ds-icon ds-icon-feather">
64
67
  <use xlink:href="/assets/feather-sprite.svg#bookmark">
65
68
  </use></svg>
66
- Save Query
69
+ Save
70
+ </button>
71
+ <button data-simply-command="load-fixtures" class="ds-button ds-button-icon">
72
+ <svg class="ds-icon ds-icon-feather">
73
+ <use xlink:href="/assets/feather-sprite.svg#briefcase">
74
+ </use></svg>
75
+ Fixtures
67
76
  </button>
68
77
  <span class="ds-push-right"></span>
78
+ <button class="ds-button ds-button-icon">
79
+ <svg class="ds-icon ds-icon-feather">
80
+ <use xlink:href="/assets/feather-sprite.svg#download">
81
+ </use></svg>
82
+ Download
83
+ </button>
69
84
  <button class="ds-button ds-button-icon">
70
85
  <svg class="ds-icon ds-icon-feather">
71
86
  <use xlink:href="/assets/feather-sprite.svg#help-circle">
@@ -126,11 +141,53 @@
126
141
  browser.setValue(databrowser.view.data)
127
142
  },
128
143
  'load-query-dropdown': async function(button) {
129
- button.querySelector('nav.ds-dropdown-nav').style='display:block'
144
+ button.querySelector('nav.ds-dropdown-nav').classList.toggle('ds-visible')
145
+ },
146
+ 'load-query': async function(el, value) {
147
+ let query = await this.app.actions.loadQuery(el.innerText)
148
+ codeEditor.setValue(query)
149
+ let button = el.closest('.ds-button')
150
+ button.querySelector('nav.ds-dropdown-nav').classList.remove('ds-visible')
151
+ codeEditor.focus()
152
+ },
153
+ 'save-query': async function() {
154
+ let name = prompt('Enter the query name:',this.app.view.queryName || 'query')
155
+ this.app.actions.saveQuery(name, codeEditor.getValue())
156
+ },
157
+ 'load-fixtures': async function() {
158
+ let fixtures = await this.app.actions.loadFixtures()
159
+ codeEditor.setValue(fixtures)
160
+ codeEditor.focus()
130
161
  }
131
162
  },
132
163
  actions: {
133
- query: async function(path, query) {
164
+ start: async function() {
165
+ this.app.view.queries = JSON.parse(localStorage.getItem('queries') || '[]')
166
+ },
167
+ loadQuery: async function(name) {
168
+ this.app.view.queryName = name
169
+ return this.app.actions.getQuery(name)
170
+ },
171
+ saveQuery: async function(name, query) {
172
+ this.app.view.queries = this.app.view.queries.filter(q => q.name!=name)
173
+ this.app.view.queries.push({
174
+ name: name,
175
+ query: codeEditor.getValue()
176
+ })
177
+ localStorage.setItem('queries',JSON.stringify(this.app.view.queries))
178
+ },
179
+ loadFixtures: async function() {
180
+ return this.app.actions.loadQuery('Fixtures')
181
+ },
182
+ getQuery: async function(name) {
183
+ let query = this.app.view.queries.filter(q => q.name===name)
184
+ if (query && query[0]) {
185
+ return query[0].query
186
+ }
187
+ return ''
188
+ },
189
+ query: async function(path, query) {
190
+ query = await this.app.actions.getQuery('Fixtures')+';'+query
134
191
  try {
135
192
  let data;
136
193
  if (query) {
@@ -157,7 +214,8 @@
157
214
  view: {
158
215
  queries: [
159
216
  {
160
- query: 'Test Query'
217
+ name: 'Test Query',
218
+ query: 'from(data.persons).select({name:_})'
161
219
  }
162
220
  ]
163
221
  }
@@ -213,4 +271,6 @@
213
271
  })
214
272
  }
215
273
  }
274
+
275
+ databrowser.actions.start()
216
276
  </script>
package/todo.txt DELETED
@@ -1,151 +0,0 @@
1
- jsontag rest api server UI
2
-
3
- net als graphql een default query UI versturen op een get requestr met accept text/html
4
-
5
- dit vormt ook een stuk documentatie
6
-
7
- dus drie onderdelen:
8
- - edit scherm voor query
9
- - resultaten van query
10
- - help / documentatie / bladeren
11
-
12
- 1) korte inleiding / beschrijving van de api
13
- linkt door naar uitgebreidere help en voorbeeld queries
14
- 2) edit scherm
15
- 3) resultaten
16
- 4) referentie / help
17
-
18
- +--------------------------+
19
- | Beschrijving van de api |
20
- +---------------+----------+
21
- | editor |resultaten|
22
- | |en help |
23
- +---------------+----------+
24
- | errors |console |
25
- +--------------------------+
26
-
27
- in localstorage/local filesystem een bibliotheek van code bijhouden, waar je doorheen kunt bladeren en die je kunt importeren/includen
28
- bij get request worden deze imports opgezocht en ingevoegd.
29
-
30
- help beschrijft schema's en standaard aanwezige functies en indexen
31
-
32
- console op de server
33
-
34
- console.log/warning/error functies maken
35
- die sturen een console header in de response
36
- die headers toon je in de console drawer
37
-
38
- request object in vm2
39
- JSONTag in vm2
40
-
41
- simplyStore als basis voor een eigen server gebruiken
42
-
43
- dus:
44
- import simplyStore from 'simplyStore'
45
-
46
- simplyStore.plugin=iets
47
-
48
- simplyStore.run({
49
- ...options
50
- })
51
-
52
- simplyStore is een express applicatie
53
- dus die returnen uit de simplyStore library export?
54
-
55
- nu wordt daar main() aangeroepen,
56
- wat als je daar server.run van maakt
57
- en export default server doet?
58
-
59
- alle configurabele opties moet je dan aan de run() functie mee kunnen geven
60
-
61
- queries opslaan in localstorage en weer opvragen (en verwijderen)
62
- meerdere queries in tabs open hebben staan, makkelijk switchen
63
-
64
- elke succesvolle query in een log opslaan, lokaal
65
- met ctrl-up/down er doorheen bladeren en weer verder gaan/opnieuw runnen, aanpassingen weer in de log opslaan, maar zonder andere queries uit de log te gooien
66
- query log clearen op commando
67
-
68
- syntax controle van de javascript, met highlighten van fouten in de editor
69
-
70
- -----
71
-
72
- save query
73
- load query (undo to show previous contents?)
74
- show console (single console right side only)
75
- show errors in console
76
- manual with code samples
77
- movies.json movies+actors+directors?
78
-
79
- jsontag viewer
80
- - uitklappen van <link>s
81
- - andere weergaves op basis van <tag>
82
-
83
- ---
84
-
85
- import server from 'simplystore'
86
-
87
- server.get('/pad/', (req,res) => {
88
-
89
- })
90
-
91
- server.run({
92
- dataspace: JSONTag.parse(file),
93
- port: 3000,
94
- wwwroot: process.cwd()+'/www'
95
- })
96
-
97
- ---
98
-
99
- simplystore als npm package
100
- default wwwroot op basis van de filename/pad van de server.mjs
101
- import { fileURLToPath } from 'url'
102
- const __dirname = dirname(fileURLToPath(import.meta.url))
103
-
104
- ----
105
-
106
- jsontag.parse meta.index bevat lege objecten... fix dat
107
- test maken
108
- controleren dat het stuk is
109
- fixen
110
- als niet stuk, dan zit het in de simplystore kant?
111
-
112
- console drawer maken in simplystore ui
113
-
114
- simplystore main scherm designen voor '/'
115
-
116
- help scherm ontwerpen voor simplystore
117
- help vullen
118
- jsontag
119
- root, data en array-where-select
120
- request
121
- meta
122
- accept header application/json of application/jsontag
123
-
124
- ---
125
-
126
- select({
127
- $type: _.$type,
128
- $class: _.$class,
129
- $$ref: _.$$ref
130
- })
131
-
132
- meta.index.id.get('iets').deref()?. -> index(id)?.
133
-
134
- <object base="url">{
135
-
136
- }
137
- <array base="url">[
138
-
139
- ]
140
- als root object in alle resultaten
141
- automatisch door JSONTag.stringify toe laten voegen
142
-
143
- ---
144
-
145
- ldk_vakleergebied -> ldkVakleergebied bij tojsontag.mjs
146
-
147
- graphqlQuery -> storeQuery
148
-
149
- opendata.*.js -> queries naar store queries
150
- rest server -> storeQuery gebruiken waar gezet
151
-