slider experiments

snippets/tracker.html

@@ -137,17 +137,68 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
     <div id="map_{{.Deveui}}" class="map"></div>
 
 <script>
+var position = ol.proj.fromLonLat([{{.LonJS}}, {{.LatJS}}], "EPSG:2056");
+
 var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
 var map_{{.DeveuiJS}} = new ga.Map({
   target: 'map_{{.Deveui}}',
   layers: [layer],
   view: new ol.View({
-    center: ol.proj.fromLonLat([{{.LonJS}}, {{.LatJS}}],"EPSG:2056"),
+    center: position,
     resolution: 20
   })
 });
+
+// Create the layer with the icon
+var vectorLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [new ol.Feature({
+      geometry: new ol.geom.Point(position)
+    })]
+  }),
+  style: new ol.style.Style({
+    image: new ol.style.Icon({
+      anchor: [0.5, 1],
+      anchorXUnits: 'fraction',
+      anchorYUnits: 'fraction',
+      src: '/static/images/marker.png'
+    })
+  })
+});
+map_{{.DeveuiJS}}.addLayer(vectorLayer);
 </script>
 
+
+    <div class="slidecontainer">
+      <input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="200000" step="1" value="100000" onchange="updateSlider(this)" ontouchmove="updateSliderTooltip(this)" onmousemove="updateSliderTooltip(this)" />
+
+<script>
+function updateSlider(c)
+{
+    if(c.value <=  50000)
+  {
+    if(c.step != 1)
+        c.step = 1;
+    alert(c.value);
+  }
+  else 
+  {
+     if(c.step != 3)
+        c.step = 3;
+    alert(c.value);
+  }
+}
+
+function updateSliderTooltip(c)
+{
+  $('#tooltiptext').html(c.value);
+}
+</script>
+    </div>
+    <div class="slidecontainer has-textcentered">
+      <span id="tooltiptext">0</span>
+    </div>
+
     <div class="has-text-centered">
       <span class="is-size-6 has-text-centered">Abo aktiv bis</span>
       <span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span>

static/css/wo-bisch-web-custom.css

@@ -86,3 +86,40 @@ input:focus,
   vertical-align: middle;
   margin-left: 5px;
 }
+
+.slidecontainer {
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 15px;
+  border-radius: 5px;  
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+  padding: 0 0;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%; 
+  background: #4CAF50;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: #4CAF50;
+  cursor: pointer;
+}