III: Testausgabe

Für die Berechnung der einzelnen Teile der aktuellen Zeit brauchen wir einen Zeitstempel (Zeilen 69-104. Danach wird für jeden Block geprüft, ob er angezeigt werden soll bzw. inaktiv ist. Es handelt sich dann um eine Liste von Wahrheitswerten, die als Objekt gespeichert werden, die zu Testzwecken ausgegeben werden (Zeilen 60-62).

<template>
  <div class="berlinclock">
    <h1>Berlin-Clock</h1>
    <div class="content">
      <div id="background">
	<img id="second"
             src="/static/clockimages/second.png" />
	<img id="hour05"
      	     src="/static/clockimages/hour-left.png" />
	<img id="hour10"
      	     src="/static/clockimages/hour-middle.png" />
	<img id="hour15"
      	     src="/static/clockimages/hour-middle.png" />
	<img id="hour20"
      	     src="/static/clockimages/hour-right.png" />
	<img id="hour01"
	     src="/static/clockimages/hour-left.png" />
	<img id="hour02"
	     src="/static/clockimages/hour-left.png" />
	<img id="hour03"
	     src="/static/clockimages/hour-left.png" />
	<img id="hour04"
	     src="/static/clockimages/hour-left.png" />
	<img id="minute05"
	     src="/static/clockimages/minute-small-left.png" />
	<img id="minute10"
	     src="/static/clockimages/minute-small-yellow.png" />
	<img id="minute15"
	     src="/static/clockimages/minute-small-red.png" />
	<img id="minute20"
	     src="/static/clockimages/minute-small-yellow.png" />
	<img id="minute25"
	     src="/static/clockimages/minute-small-yellow.png" />
	<img id="minute30"
	     src="/static/clockimages/minute-small-red.png" />
	<img id="minute35"
	     src="/static/clockimages/minute-small-yellow.png" />
	<img id="minute40"
	     src="/static/clockimages/minute-small-yellow.png" />
	<img id="minute45"
	     src="/static/clockimages/minute-small-red.png" />
	<img id="minute50"
	     src="/static/clockimages/minute-small-yellow.png" />
	<img id="minute55"
	     src="/static/clockimages/minute-small-right.png" />
	<img id="minute01"
	     src="/static/clockimages/minute-left.png" />
	<img id="minute02"
	     src="/static/clockimages/minute-middle.png" />
	<img id="minute03"
	     src="/static/clockimages/minute-middle.png" />
	<img id="minute04"
	     src="/static/clockimages/minute-right.png" />
      </div>
    </div>
    <p><b>Autor:</b></p>
    <p>Rüdiger Appel</p>
    <p><b>Quelle:</b></p>
    <p>http://www.3quarks.com/de/Mengenlehreuhr/index.html</p>
    <p>
      {{ getTimeStamp()}}
    </p>
</template>

<script>
export default {
  name: 'berlinclock',
  methods: {
    getTimeStamp: function () {
      // check if parts of the time in or out of the
      // current datetime

      var datum = new Date()
      var timestamp = {}
      // Sekunden
      timestamp.seconds = datum.getSeconds() % 2 > '0'
      // 5-hour parts
      timestamp.hour05 = datum.getHours() > '4'
      timestamp.hour10 = datum.getHours() > '9'
      timestamp.hour15 = datum.getHours() > '14'
      timestamp.hour20 = datum.getHours() > '19'
      // 1-hour parts
      timestamp.hour01 = datum.getHours() % 5 > '0'
      timestamp.hour02 = datum.getHours() % 5 > '1'
      timestamp.hour03 = datum.getHours() % 5 > '2'
      timestamp.hour04 = datum.getHours() % 5 > '3'
      //  5-minute parts
      timestamp.minute05 = datum.getMinutes() > '4'
      timestamp.minute10 = datum.getMinutes() > '9'
      timestamp.minute15 = datum.getMinutes() > '14'
      timestamp.minute20 = datum.getMinutes() > '19'
      timestamp.minute25 = datum.getMinutes() > '24'
      timestamp.minute30 = datum.getMinutes() > '29'
      timestamp.minute35 = datum.getMinutes() > '34'
      timestamp.minute40 = datum.getMinutes() > '39'
      timestamp.minute45 = datum.getMinutes() > '44'
      timestamp.minute50 = datum.getMinutes() > '49'
      timestamp.minute55 = datum.getMinutes() > '54'
      //  1-minute parts
      timestamp.minute01 = datum.getMinutes() % 5 > '0'
      timestamp.minute02 = datum.getMinutes() % 5 > '1'
      timestamp.minute03 = datum.getMinutes() % 5 > '2'
      timestamp.minute04 = datum.getMinutes() % 5 > '3'
      return timestamp
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#background {
  width: 190px;
  height: 265px;
  margin: auto;
  position: relative;
  background: transparent url(/static/clockimages/background.png)
  no-repeat top right;
 }
 #second{
  position: absolute;
  left: 70px;
  top: 10px;
  width: 50px;
  height: 50px;
  visibility:hidden;
}
#hour05{
  position: absolute;
  left: 10px; top: 78px;
  width: 38px; height: 27px;
  visibility:hidden;
}
#hour10{
  position: absolute;
  left: 54px;
  top: 78px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour15{
  position: absolute;
  left: 98px;
  top: 78px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour20{
  position: absolute;
  left: 142px;
  top: 78px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour01{
  position: absolute;
  left: 10px;
  top: 127px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour02{
  position: absolute;
  left: 54px;
  top: 127px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour03{ 
  position: absolute;
  left: 98px;
  top: 127px;
  width: 38px;
  height: 27px;
 visibility:hidden;
}
#hour04{
  position: absolute;
  left: 142px;
  top: 127px;
  width: 38px;
  height: 27px;
 visibility:hidden;
}
#minute05{
  position: absolute;
  left: 10px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute10{
  position: absolute;
  left: 26px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute15{
  position: absolute;
  left: 42px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute20{
  position: absolute;
  left: 58px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute25{
  position: absolute;
  left: 74px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute30{
  position: absolute;
  left: 90px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute35{
  position: absolute;
  left: 106px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute40{
  position: absolute;
  left: 122px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute45{
  position: absolute;
  left: 138px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute50{
  position: absolute;
  left: 154px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute55{
  position: absolute;
  left: 170px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute01{
  position: absolute;
  left: 10px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#minute02{
  position: absolute;
  left: 54px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#minute03{
  position: absolute;
  left: 98px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#minute04{
  position: absolute;
  left: 142px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
</style>