From b7356c7cf1f3c9547d72494bedc35a6869170652 Mon Sep 17 00:00:00 2001
From: Joerg Lehmann <joerg.lehmann@nbit.ch>
Date: Fri, 12 Mar 2021 11:54:05 +0100
Subject: [PATCH] slider experiments

---
 snippets/tracker.html              |  53 ++++++++++++++++++++++++++++-
 static/css/wo-bisch-web-custom.css |  37 ++++++++++++++++++++
 static/images/marker.png           | Bin 0 -> 1449 bytes
 3 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 static/images/marker.png

diff --git a/snippets/tracker.html b/snippets/tracker.html
index 7b6d129..6a3edf5 100644
--- a/snippets/tracker.html
+++ b/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>
diff --git a/static/css/wo-bisch-web-custom.css b/static/css/wo-bisch-web-custom.css
index 32240a2..ab06708 100644
--- a/static/css/wo-bisch-web-custom.css
+++ b/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;
+}
diff --git a/static/images/marker.png b/static/images/marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..629e8e8e1d5f305f3362127a0298487722efd084
GIT binary patch
literal 1449
zcmV;a1y=frP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF0004mX+uL$Nkc;*
zaB^>EX>4Tx04R}tkv&MmKpe$iQ>CIUf_4yb$WWauNELC^DionYs1;guFuC*#nlvOS
zE{=k0!NHHks)LKOt`4q(Aou~|=H{g6A|?JWDYS_7;J6>}?mh0_0YbgZG^=X@&~)2O
zCE{WxyDA1=;YS|^5JO02mN6$uNpu`v_we!cF3PhypZjx!)SSftpGZ8*4AUmwAfDc|
z4bJ<-VOEq?;&bA0lP*a7$aTfzH_io@1)do;)2VslFtJ!@W2KE*(bR~ih$E_|Q@)V#
zSmnIMSu0mr^Pc>L!JNLb%ypV0NMI35kRU=q6(y8mBTB1IiiH&I$2<6kUB5&wg<K^t
zax9<%4YKP8|AXJ%TKUPCmlTWx-7k*wF$x5Bfkw@7zK<QJaRT_Cfh)b`uhfB=Ptt2G
zEpi0(Zvz+CElt@2E_Z;TCqp)6SMt*o@_FF>jJ_!g4Bi60YhG{7eVjf3Y3eF@0~{Oz
zV+G1y@9^%P_TK(I)9mjDS`Tuae1(qg00006VoOIv0RI600RN!9r;`8x010qNS#tmY
z4c7nw4c7reD4Tcy000McNliru<pT>6GdZp>M`i#31ExttK~#9!?VHO>6>${DKXda{
zp%I0VrAR_lD1{Id6hTGQrcGsq)iMG>$V4L{2x<`pZL+NB0YNQvRY)3T{Q*T`wJ6e_
z-X5zIANf3OMz~1ooSFH}%)R=Bv$>o*=lA{o9`~FxzYDXN*|35RC=dgRfIJ|_{<sI|
z0y-@iOF5MV3IwVIo(c2{$RyS)&?azPAU_p|mkKlqj7&j#G8-0X6evwb;)@0D2#mTQ
zKG8-6ZVN0*7V<j;;yw_cXk7x^qfY*)y>!KpjR;gmmHb(Q#3$OBsFAM=ko>rviVFFC
z0%IWvFeY#?Z1N=n10j$fw?2V2VUf=iXb+M6xV;j{bju^ng9f!giHq-b1CM}rz<2wz
z<v=m86Ih^p-a4QfI2YvX7Yg(%XR1@6Tp(kL=Vk~T68Pj|D-;ANz)j@<>!%_<$@Xec
z#<(72VWUZQPI!n_qlhyUNC72qS}~~0KE%7Kh*xKtye06_;b1;_Ih`k*3muAc#xg0u
z7R79o`xy7IBJO6B0$g!8h(DS`&*7oiZDQNSlw;ZE(67aUAs_p8gFvf8_pL?*up1I9
z9lF0UumIZ~`mGXJXkrBvD}3Vy1c*CdFwQenjR1KecbhE}W7P<t`AJ)9K!9Zm-wYE1
zq$_+&3<ywcVyqegekgo*`Ta9!SBg&2WkP`W3f~-{%*WZ^4`eI+KbS~@(v;mFzf$2W
zfiKF^c#f$|uvJ;2-tr;lHD%0Zlc{i}i<VW5hj=Gl#H%nVzzUZg;0Dchu$TP}m!0B5
z(<Sk9m(9!1c2$=-P0@2ix#tt@smbhWe2@o#`yMpx0a}2!2~E-bgr;b=hi8{r&}dqK
z4B#uUglOR>P+-BZ$#NLG%)LbPa8XO%b<rX)ALs;fBQ*O(7W8Ys7;_WNf<E9vgl7M|
z8}fc+Xq^#wHP+!r#_3jsJrNLKcc^R6MSAR~JqdmD39J_Q8v^-$ao(deE<zYLL~0^)
z1ly(Zi-7M0q!T3wtPN-@42Z5h7N`hS0SFMyYjU;#mO!&X@{c8i3*K50as|E_ARiYq
z?RFy~Y!Ddqk^GRrCXxvP6+Q}ZjAVp;%iAmYyCf^@g6X9P@~;Kvk<73gslQ#2|7E<v
z8K4O3?H3lBJbxpp1cAK{|3MP|C1`^p)H)ELnpDO#_x|chbqK@+?)`^+ld+eY5fmX^
z;9&y!2azjp0}x@Z{YT0+fh=Ys1hU23tFT$j!Xy3xryc<n;#<SX00000NkvXXu0mjf
Dc1ePd

literal 0
HcmV?d00001