enter on login + animate in snaptobus
This commit is contained in:
STEINNI
+17
-10
@@ -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}
|
||||
|
||||
+9
-2
@@ -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)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user