Timeline update

This commit is contained in:
Ruben van de Ven 2019-05-15 16:03:51 +02:00
parent f33a634902
commit 0d3a57794f
3 changed files with 41 additions and 9 deletions

View file

@ -95,7 +95,8 @@ def getWebSocketHandler(central_command):
return msg return msg
def msgStatus(self, selected_id = None): def msgStatus(self, selected_id = None):
self.send(self.getStatusMsg(selected_id)) self.write_to_clients(self.getStatusMsg(selected_id))
# self.send()
def msgInit(self): def msgInit(self):
msg = self.getStatusMsg() msg = self.getStatusMsg()

View file

@ -17,7 +17,7 @@ class Timeline{
this.eventDataSet = new vis.DataSet([ this.eventDataSet = new vis.DataSet([
{content: '.', start: new Date(), type: 'point', group: 1} {content: '.', start: new Date(), type: 'point', group: 1}
]); ]);
console.log('init timeline'); // console.log('init timeline');
let groups = []; let groups = [];
for(let hid = 1; hid<=this.count; hid++) { for(let hid = 1; hid<=this.count; hid++) {
@ -25,13 +25,13 @@ class Timeline{
this.eventDataSet.add({content: 'initiate', start: new Date(), type: 'point', group: parseInt(hid)}) this.eventDataSet.add({content: 'initiate', start: new Date(), type: 'point', group: parseInt(hid)})
} }
let dataGroups = new vis.DataSet(groups); this.dataGroups = new vis.DataSet(groups);
let options = { let options = {
// 'rollingMode': {'follow': true, 'offset': .8 } // 'rollingMode': {'follow': true, 'offset': .8 }
}; };
console.log('groups', dataGroups, groups, options); // console.log('groups', this.dataGroups, groups, options);
this.timeline = new vis.Timeline(this.el, this.eventDataSet, dataGroups, options); this.timeline = new vis.Timeline(this.el, this.eventDataSet, this.dataGroups, options);
let tl = this.timeline; let tl = this.timeline;
let startDate = new Date(); let startDate = new Date();
@ -69,7 +69,7 @@ checkbox.addEventListener('change', (event) => {
} }
handleEvent(e) { handleEvent(e) {
console.log('handle', e, this); // console.log('handle it', e, this);
if(e.type == 'message') { if(e.type == 'message') {
this.wsOnMessage(e) this.wsOnMessage(e)
} }
@ -82,6 +82,14 @@ checkbox.addEventListener('change', (event) => {
console.error( "not a valid message: " + e.data ); console.error( "not a valid message: " + e.data );
return; return;
} }
if(msg['action'] == 'status') {
for(let hv of msg['hugveys']){
console.log(hv['language'], hv['status']);
let evenOdd = parseInt(hv['id'])%2 ? 'odd': 'even'
this.dataGroups.update({id: parseInt(hv['id']), content: 'Hugvey #'+hv['id'], className: `status-${hv['status']} lang-${hv['language']} ${evenOdd}`})
}
}
if(msg['action'] != 'log') { if(msg['action'] != 'log') {
return; return;

View file

@ -17,7 +17,7 @@
width: 180%; width: 180%;
} }
.vis-item{ .vis-item{
color:#999; color:#ccc;
} }
.vis-item.message { .vis-item.message {
background: lightgray; background: lightgray;
@ -35,10 +35,10 @@
} }
.vis-text,.vis-labelset .vis-label { .vis-text,.vis-labelset .vis-label {
color: #999; color: #ccc;
} }
.vis-time-axis .vis-text{ .vis-time-axis .vis-text{
color: #999; color: #ccc;
} }
.vis-grid, .vis-foreground .vis-group{ .vis-grid, .vis-foreground .vis-group{
@ -78,6 +78,29 @@ font-size: 4.5pt;
z-index: 99999; z-index: 99999;
padding: 5px; padding: 5px;
} }
.vis-group{
transition: background-color 1s;
}
.status-gone{
background-color: #774d00;
}
.status-blocked{
background-color:gray;
}
.status-available{
background-color: #660;
}
.status-running.lang-en-GB{
background-color: #02547e;
}
.status-running.lang-fr-FR{
background: #5a434d;
}
.status-running.lang-de-DE{
background: slategray;
}
</style> </style>
</head> </head>
<body id='timeline'> <body id='timeline'>