298 lines
7.1 KiB
JavaScript
298 lines
7.1 KiB
JavaScript
/*
|
|
* FlipClock component for FTUI version 3
|
|
* based on clock component from Mario Stephan <mstephan@shared-files.de>
|
|
* Copyright (c) 2020 Mario Stephan <mstephan@shared-files.de>
|
|
* Copyright (c) 2020 Torsten Rywelski <torsten.rywelski@gmail.com>
|
|
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
|
|
*
|
|
* https://github.com/knowthelist/ftui
|
|
* https://git.rywelski.de/FHEM/ftui_components_flipclock
|
|
*/
|
|
|
|
import { FtuiElement } from '../element.component.js';
|
|
import { fhemService } from '../../modules/ftui/fhem.service.js';
|
|
import { dateFormat } from '../../modules/ftui/ftui.helper.js';
|
|
|
|
export class FtuiFlipClock extends FtuiElement {
|
|
|
|
constructor(properties) {
|
|
|
|
super(Object.assign(FtuiFlipClock.properties, properties));
|
|
|
|
this.stime = [];
|
|
this.dots();
|
|
this.update();
|
|
this.startInterval();
|
|
this.setcolor(this.clockbg, this.clockfontcolor);
|
|
this.getFhemTime();
|
|
}
|
|
|
|
template() {
|
|
return `<style> @import "components/flipclock/flipclock.component.css"; </style>
|
|
<div class="clock-container">
|
|
<ul class="clockfl go one" style="display: none;">
|
|
<li class="clock-before">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="clock-active hourten">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="clockfl go two" style="display: none;">
|
|
<li class="clock-before">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="clock-active hourone">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<span class="clock-divider doth">
|
|
<span class="clock-label"></span>
|
|
<span class="clock-dot top"></span>
|
|
<span class="clock-dot bottom"></span>
|
|
</span>
|
|
<ul class="clockfl go three" style="display: none;">
|
|
<li class="clock-before">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="clock-active ten">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="clockfl go four" style="display: none;">
|
|
<li class="clock-before">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="clock-active min">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<span class="clock-divider dots">
|
|
<span class="clock-label"></span>
|
|
<span class="clock-dot top"></span>
|
|
<span class="clock-dot bottom"></span>
|
|
</span>
|
|
<ul class="clockfl go five" style="display: none;">
|
|
<li class="clock-before">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="clock-active ten">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="clockfl go six" style="display: none;">
|
|
<li class="clock-before">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="clock-active min">
|
|
<a href="#">
|
|
<div class="up">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="shadow"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
format: 'hh:mm:ss',
|
|
serverDiff: 0,
|
|
offset: 0,
|
|
isFhemTime: false,
|
|
clockbg: '#333',
|
|
clockfontcolor: '#cccccc',
|
|
clocksize: 'normal'
|
|
}
|
|
}
|
|
|
|
getFhemTime() {
|
|
if (this.isFhemTime) {
|
|
fhemService.sendCommand('{localtime}', '1')
|
|
.then(res => res.text())
|
|
.then((result) => {
|
|
const fhemTime = new Date(result);
|
|
this.serverDiff = Date.now() - fhemTime.getTime();
|
|
});
|
|
}
|
|
}
|
|
dots() {
|
|
var i = this.format.length;
|
|
if (i >= 3 && i <= 5 ) {
|
|
this.el = this.shadowRoot.querySelector('.dots');
|
|
this.el.setAttribute("style", "display: none;");
|
|
}
|
|
if (i <= 2){
|
|
this.el = this.shadowRoot.querySelector('.dots');
|
|
this.el.setAttribute("style", "display: none;");
|
|
this.el = this.shadowRoot.querySelector('.doth');
|
|
this.el.setAttribute("style", "display: none;");
|
|
}
|
|
}
|
|
|
|
update() {
|
|
let time = [];
|
|
let i = [];
|
|
for( i = 0; i < dateFormat(this.getDateTime(), this.format).length; ++i) {
|
|
time[i] = dateFormat(this.getDateTime(), this.format)[i];
|
|
if (this.stime[i] != time[i]) {
|
|
this.flip_card (i, parseInt(time[i]) + 20);
|
|
}
|
|
}
|
|
this.stime = time.slice();
|
|
}
|
|
// Setting Color
|
|
setcolor (bg, fc){
|
|
this.el = this.shadowRoot.querySelector('.clock-container');
|
|
this.el.setAttribute("style", "--clock-flip-bg:" + bg + "; --clock-flip-font-color:" + fc + ";" );
|
|
this.el.className += " " + this.clocksize;
|
|
}
|
|
// Flip the card
|
|
flip_card(cl, digit){
|
|
switch (cl){
|
|
case 0:
|
|
cl = '.one';
|
|
break;
|
|
case 1:
|
|
cl = '.two';
|
|
break;
|
|
case 2:
|
|
cl = '.three';
|
|
break;
|
|
case 3:
|
|
cl = '.four';
|
|
break;
|
|
case 4:
|
|
cl = '.five';
|
|
break;
|
|
case 5:
|
|
cl = '.six';
|
|
break;
|
|
}
|
|
this.replace (cl + " .down",null, digit);
|
|
this.replace (cl + " .up",null, digit);
|
|
this.replace (cl + " li.clock-active a div.up", digit);
|
|
this.replace (cl + " li.clock-active .down", digit);
|
|
this.replace(cl + " .clock-active");
|
|
}
|
|
|
|
// Replace the element to start the animation
|
|
replace (cl, aattr, battr){
|
|
this.el = this.shadowRoot.querySelector(cl);
|
|
this.newel = this.el.cloneNode(true);
|
|
//before
|
|
if (battr) {
|
|
if (cl.includes('.five') || cl.includes('.three')){if (battr === 20 ) {battr = 26; }} //workarround count 59
|
|
this.newel.setAttribute("data-num", (parseInt(battr) - 1).toString()[1]);
|
|
}
|
|
//active
|
|
if (aattr) {
|
|
this.newel.setAttribute("data-num", (parseInt(aattr).toString()[1]));
|
|
}
|
|
this.el.parentNode.setAttribute("style", "display: '';");
|
|
this.el.parentNode.replaceChild(this.newel, this.el);
|
|
|
|
}
|
|
|
|
|
|
getDateTime() {
|
|
return new Date(Date.now() - Number(this.serverDiff) + 3600000 * Number(this.offset));
|
|
}
|
|
|
|
startInterval() {
|
|
const now = this.getDateTime();
|
|
const s = now.getSeconds();
|
|
const ms = now.getMilliseconds();
|
|
const waitMs = this.format.includes('s') ? 1000 - ms * 1 : 60000 - s * 1000 - ms * 1;
|
|
setTimeout(() => {
|
|
this.update();
|
|
this.startInterval();
|
|
}, waitMs);
|
|
}
|
|
|
|
}
|
|
|
|
window.customElements.define('ftui-flipclock', FtuiFlipClock);
|