From 7c6047462fb89791cf1e024044678e0330399f52 Mon Sep 17 00:00:00 2001 From: STEINNI Date: Mon, 22 Sep 2025 19:49:33 +0000 Subject: [PATCH] enter on login + animate in snaptobus --- app/libs/myUser.js | 27 +++-- app/thirdparty/Snaptobus/snaptobus.js | 11 +- app/views/dashboards/MainDashboardView.js | 8 +- test.js | 117 ---------------------- 4 files changed, 30 insertions(+), 133 deletions(-) delete mode 100644 test.js diff --git a/app/libs/myUser.js b/app/libs/myUser.js index f5b018c..3f73f1e 100755 --- a/app/libs/myUser.js +++ b/app/libs/myUser.js @@ -93,16 +93,7 @@ class myUser extends app.LoadedClasses.User { const startbtn = document.querySelector('#startbtn') const gobtn = document.querySelector('#login-dialog button') - gobtn.addEventListener('click', async () => { - gobtn.disabled = true - if(await this.login()) { - document.querySelector('div.loginerr').classList.remove('show') - console.log('Successful login !!!') - callBack() - } else { - gobtn.disabled = false - } - }) + gobtn.addEventListener('click', () => this.launchLogin(callBack)) startbtn.addEventListener('click', async () => { startbtn.disabled = true @@ -116,6 +107,9 @@ class myUser extends app.LoadedClasses.User { } else if(!jsonresp.payload.authenticated){ document.querySelector('div.loginerr').classList.remove('show') document.getElementById('login-dialog').classList.add('show') + document.getElementById('login-dialog').addEventListener('keyup',(event)=>{ + if(event.key=='Enter') this.launchLogin(callBack) + }) if(jsonresp.payload.locked){ document.querySelector('div.loginerr').classList.add('show') document.querySelector('div.loginerr').innerHTML = ` @@ -134,6 +128,19 @@ class myUser extends app.LoadedClasses.User { }) } + + async launchLogin(callBack){ + const gobtn = document.querySelector('#login-dialog button') + gobtn.disabled = true + if(await this.login()) { + document.querySelector('div.loginerr').classList.remove('show') + console.log('Successful login !!!') + callBack() + } else { + gobtn.disabled = false + } + } + /** * * @returns {string} diff --git a/app/thirdparty/Snaptobus/snaptobus.js b/app/thirdparty/Snaptobus/snaptobus.js index 314257a..79d61ad 100644 --- a/app/thirdparty/Snaptobus/snaptobus.js +++ b/app/thirdparty/Snaptobus/snaptobus.js @@ -115,8 +115,15 @@ class Snaptobus{ console.log(`found ${snaps.length} snaps`) snaps.forEach(snapEl => { const newAttr = this.assignFromConfig(payload, snapDef.assign) - console.log('newAttr:',newAttr) - snapEl.attr(newAttr) + if(snapDef.animate){ + snapEl.animate( + newAttr, + 400, + mina.linear + ) + } else { + snapEl.attr(newAttr) + } }) } } diff --git a/app/views/dashboards/MainDashboardView.js b/app/views/dashboards/MainDashboardView.js index ed76ba2..193e003 100644 --- a/app/views/dashboards/MainDashboardView.js +++ b/app/views/dashboards/MainDashboardView.js @@ -42,15 +42,15 @@ class MainDashboardView extends EICDomContent { { chan: 'gps:agents', // What to subscribe to events: [ // What to select on this chan - { eventName: 'moving', + { eventName: 'moving', // which event will trigger a change snaps: [ { - selector: '#${aid}', - assign: { + selector: '#${aid}', // what svg elements do we change ? + assign: { // what do we change and with what from the payload ? cx: 'attrs.x', cy: 'attrs.y', }, - animate: true + animate: true } ] }, diff --git a/test.js b/test.js deleted file mode 100644 index daca351..0000000 --- a/test.js +++ /dev/null @@ -1,117 +0,0 @@ -class SnapToBus{ - constructor(config){ - this._curBusConfig = [] - this._stagedBusConfig = config // null Means nothing uncommitted - this.commitConfig() - } - - get busConfig() { return this._stagedBusConfig } - get liveBusConfig() { return this._curBusConfig } - set busConfig(newConfig) { this._stagedBusConfig = newConfig } - - async commitConfig(){ - const chansToAdd = [] - const chansToKeep = [] - console.log('=======>_stagedBusConfig', this._stagedBusConfig) - for(const chanObj of this._stagedBusConfig){ - console.log('staged chan:',chanObj.chan,' current ones:', this._curBusConfig.map(item => item.chan)) - if(this._curBusConfig.map(item => item.chan).includes(chanObj.chan)) chansToKeep.push(chanObj) - else chansToAdd.push(chanObj) - } - const chansToDel = this._curBusConfig.filter(item => (!chansToKeep.map(c=>c.chan).includes(item.chan) && !chansToAdd.map(c=>c.chan).includes(item.chan))) - app.MessageBus.subscribe(chansToAdd.map(item => item.chan)) - app.MessageBus.unSubscribe(chansToDel.map(item => item.chan)) - // console.log('subscribe:', chansToAdd.map(item => item.chan)) - // console.log('unSubscribe:', chansToDel) - - const eventsToAdd = chansToAdd.flatMap(item => item.events.map(ev => ({ chan:item.chan, eventName:ev.eventName }))) - let eventsToDel = []//= chansToDel.flatMap(item => item.events.map(ev => ({ chan:item.chan, eventName:ev.eventName }))) - for(const oldChan of this._curBusConfig){ - for(const oldEvent of oldChan.events){ - for(const keepChan of chansToKeep){ - if(!keepChan.events.map(item=>item.eventName).includes(oldEvent.eventName)) eventsToDel.push({chan: oldChan.chan, eventName: oldEvent.eventName}) - } - } - } - - // console.log('eventsToAdd:', eventsToAdd) - // console.log('eventsToDel:', eventsToDel) - for(const eventToAdd of eventsToAdd){ - app.MessageBus.addBusListener(eventToAdd.eventName, [eventToAdd.chan], this.processBus.bind(this), 'snaptobus') - } - for(const eventToDel of eventsToDel){ - app.MessageBus.removeBusListener(eventToDel.eventName, this.processBus.bind(this), 'snaptobus') - } - - this._curBusConfig = this.deepClone(this._stagedBusConfig) - } - - deepClone(obj) { // Needed because structuredClone doesn't take functions (and we have transformers) - if (obj === null || typeof obj !== 'object') { - return obj - } - if (Array.isArray(obj)) { - return obj.map((el => this.deepClone(el))) - } - const clone = {} - for (const key in obj) { - clone[key] = this.deepClone(obj[key]) - } - return clone - } -} -const s2bConfig = [ - { chan: 'gps:agents', // What to subscribe to - events: [ // What to select on this chan - { eventName: 'moving', - snaps: [ - { - // selector will be used as css selector for a snap element / group, - // with LAST MINUTE template resolving of event properties (with eventual dots) - selector: '#${aid}', - assign: { - x: 'coords.x', // type string: event property, eventual dots to go down object - y: 'coords.y', - }, - animate: true - } - ] - }, - { eventName: 'rotating', - snaps: [ - { - selector: '#${aid}', - assign: { - r: 'rotangle' - }, - animate: true - } - ] - }, - ] - }, - { chan: 'agent:*', // wildcards allowed - events: [ - { eventName: 'aging', - snaps: [ - { - selector: '#{aid}', - assign: { - fill: { // transformer function - arguments: [ 'age' ], // What to give from the event as function's params - transformer: i => `rgb(${Math.round(255 * i / 10)},0,${Math.round(255 * (1 - i / 10))})` - }, - }, - } - ] - }, - ] - }, -] - -t = new SnapToBus(s2bConfig) -console.log('----------------------------------------') -t.busConfig.splice(1, 1) -t.busConfig[0].events.splice(1, 1) -t.commitConfig() -