ftui_components_flipclock/www/ftui/components/flipclock/flipclock.component.js

/*
* Clock component for FTUI version 3
*
* Copyright (c) 2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* https://github.com/knowthelist/ftui
*/

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.smten=0;
	this.smone=0;
	this.shten=0;
	this.shone=0;
    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 hourten">
			<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 hourone">
			<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 ">
			<span class="clock-label"></span>
			<span class="clock-dot top"></span>
			<span class="clock-dot bottom"></span>
		</span>
		<ul class="clockfl go ten">
			<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 min">
			<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();
        });
    }
  }


  update() {
	var mone = parseInt(dateFormat(this.getDateTime(), this.format).toString()[3]) + 20;
	var mten = parseInt(dateFormat(this.getDateTime(), this.format).toString()[2]) + 20;
	var hone = parseInt(dateFormat(this.getDateTime(), this.format).toString()[1]) + 20;
	var hten = parseInt(dateFormat(this.getDateTime(), this.format).toString()[0]) + 20;
	// this.beforeup = this.shadowRoot.querySelector('.up');
	// this.beforedown = this.shadowRoot.querySelector('.down');
	// this.activeup = this.shadowRoot.querySelector('li.clock-active a div.up');
	// this.activedown = this.shadowRoot.querySelector('li.clock-active .down');
	console.log(this.clocksize + hten + " " + hone + ":" + mten + " " + mone + " smten: " + this.smten );
	if (this.smone != mone){
		this.flip_card(".min", mone);
	}
	if (this.smten != mten) {
		this.flip_card(".ten", mten);
	}
	if (this.shone != hone) {
		this.flip_card(".hourone", hone);
	}
	if (this.shten != hten) {
		this.flip_card(".hourten", hten);
	}
	this.smone = mone;
	this.smten = mten;
	this.shone = hone;
	this.shten = hten;
  }
  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_card(cl, digit){
	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");  
  }
  // flip_minten(digit){
	// this.replace ('.ten .down',null, digit);
	// this.replace ('.ten .up',null, digit);
	// this.replace ('.ten li.clock-active a div.up', digit);
	// this.replace ('.ten li.clock-active .down', digit);
	// this.replace('.ten .clock-active');
  // }
  
  replace (cl, aattr, battr){
	this.el = this.shadowRoot.querySelector(cl);
	this.newel = this.el.cloneNode(true);
	if (aattr) {
		this.newel.setAttribute("data-num", (parseInt(aattr).toString()[1]));
	}
	if (battr) {
		this.newel.setAttribute("data-num", (parseInt(battr) - 1).toString()[1]);
	}
	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);