diff --git a/assets/js/app-demo.ts b/assets/js/app-demo.ts new file mode 100644 index 0000000..569874e --- /dev/null +++ b/assets/js/app-demo.ts @@ -0,0 +1,96 @@ +// app-demo.ts - petite-vue application using dummy localStorage backend + +import { createApp } from 'petite-vue' +import { Config, register, handle, createRandString, sleep} from './common' + +export const pvapp = { + run(conf: Config, components: any[]) { + appdata.conf = conf + for (const comp of components) { + appdata[comp.name] = comp + } + initData() + createApp(appdata).mount() + } +} + +const appdata = { + $delimiters: ['{|', '|}'], + conf: {} as Config, + components: {}, + register, + sendMsg +} + +const store_prefix = 'api.storage' + +// methods + +async function sendMsg(basemsg: string[], data: any) { + await sleep(50) + const [ domain, action, class_, item ] = basemsg + switch (action) { + case 'data': + handle(this, store(domain, class_, item, data)) + break + case 'delete': + handle(this, remove(domain, class_, item)) + break + case 'query': + handle(this, query(domain, class_, item)) + } +} + +// functions + +function initData() { + const data = { firstname: 'John', lastname: 'Doe', email: 'jd@example.org' } + store('demo', 'person', 'wrdlpr', data) +} + +function store(domain, class_, item: string, data: any) { + if (!item) { + item = createRandString(1) + } + console.log('store - item: ', item, ', data: ', data) + const key = [store_prefix, domain, class_].join('.') + const rawdata = localStorage.getItem(key) + const alldata = rawdata ? JSON.parse(rawdata) : {} + const exists = alldata[item] + alldata[item] = data + localStorage.setItem(key, JSON.stringify(alldata)) + const response = { RC: exists ? 3 : 2 } + const path = [domain, 'response', class_, item].join('/') + return { path: path, payload: JSON.stringify(response) } +} + +function remove(domain, class_, item: string) { + const key = [store_prefix, domain, class_].join('.') + const rawdata = localStorage.getItem(key) + const alldata = rawdata ? JSON.parse(rawdata) : {} + delete alldata[item] + localStorage.setItem(key, JSON.stringify(alldata)) + const response = { RC: 3, action: 'delete' } + const path = [domain, 'response', class_, item].join('/') + return { path: path, payload: JSON.stringify(response) } +} + +function query(domain, class_, item: string) { + const key = [store_prefix, domain, class_].join('.') + const rawdata = localStorage.getItem(key) + const alldata = rawdata ? JSON.parse(rawdata) : {} + if (!item) { + const res = [] + for (const key in alldata) { + const data = alldata[key] + data._item = key + res.push(JSON.stringify(data)) + } + const path = [domain, 'list', class_].join('/') + return { path: path, payload: res.join('\n') } + } + const path = [domain, 'data', class_, item].join('/') + const payload = alldata[item] || {} + console.log('query - key: ', key, ', payload: ', payload) + return { path: path, payload: JSON.stringify(payload) } +} diff --git a/assets/js/common.ts b/assets/js/common.ts index 9de3f75..95d0174 100644 --- a/assets/js/common.ts +++ b/assets/js/common.ts @@ -34,7 +34,7 @@ export function register(name: string, comp: any) { export function handle(app, msg) { const [ domain, action, class_, item ] = msg.path.split('/') const comp = app.components[class_ || 'data'] - if (domain && domain != comp.domain) { + if (domain && domain !== comp.domain) { return } if (comp) { @@ -42,7 +42,7 @@ export function handle(app, msg) { } } -function createRandString(size: number): string { +export function createRandString(size: number): string { const arr = new Uint32Array(size) crypto.getRandomValues(arr) const result: string[] = [] diff --git a/assets/js/comp-data.ts b/assets/js/comp-data.ts index a77044e..2f44bf1 100644 --- a/assets/js/comp-data.ts +++ b/assets/js/comp-data.ts @@ -29,6 +29,7 @@ export function Data(name: string, conf: any): object { function handle(domain, action, class_, item, payload: string) { const data = JSON.parse(payload) + console.log('handle - action: ', action, ', data: ', data) if (action === 'data') { // && this.state.id == item) { Object.assign(this.data, data) this.state.mode = 'view' diff --git a/assets/js/comp-list.ts b/assets/js/comp-list.ts index 7fc457f..ae77824 100644 --- a/assets/js/comp-list.ts +++ b/assets/js/comp-list.ts @@ -15,7 +15,7 @@ export function List(name: string, conf: any): object { handle, // handle incoming messages initField // initialize field (= @mounted) } - this.components[name] = comp + //this.components[name] = comp this.sendMsg([domain, 'query', name], {}) return comp } diff --git a/assets/js/main-demo.ts b/assets/js/main-demo.ts new file mode 100644 index 0000000..8ceffd3 --- /dev/null +++ b/assets/js/main-demo.ts @@ -0,0 +1,10 @@ +import { api } from './settings' +import { pvapp } from './app-demo' + +import { config } from './common' +import { Data } from './comp-data' +import { List } from './comp-list' + +pvapp.run(config(api), [Data, List]) + + diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 99d698a..83adb4d 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -27,7 +27,7 @@ params: api: domain: demo - module: main-ig.ts + module: main-demo.ts taxonomies: domain: domains