From 5c73d245e06ef0fcd5d829ec66bf29b906116e58 Mon Sep 17 00:00:00 2001
From: Ulf Treger <ulf.treger@googlemail.com>
Date: Fri, 9 Feb 2024 19:08:18 +0100
Subject: [PATCH] Show places list timeline, plus basic approach w/foundation
 slider refs #301

---
 app/assets/javascripts/helpers/timeslider.js  | 14 +++++
 .../stylesheets/foundation_and_overrides.scss |  2 +-
 app/views/places/index.html.haml              | 51 ++++++++++++++++++-
 3 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/helpers/timeslider.js

diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js
new file mode 100644
index 00000000..184fff10
--- /dev/null
+++ b/app/assets/javascripts/helpers/timeslider.js
@@ -0,0 +1,14 @@
+
+jQuery(function ($) {
+    
+  
+  $(document).on('changed.zf.slider', '[data-slider]', function(event) {
+    var $slider = $(event.currentTarget);
+    var $numberInput = $slider.children('input');
+    console.log($numberInput.val())
+    $('#slider-selection').html($numberInput.val())
+    // TODO: create list of all places with startyear and endyear data values
+    // hide all
+    // show only those existing in the selected year
+  });
+});
\ No newline at end of file
diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss
index af3ba797..71ae3f1e 100644
--- a/app/assets/stylesheets/foundation_and_overrides.scss
+++ b/app/assets/stylesheets/foundation_and_overrides.scss
@@ -38,7 +38,7 @@
 @include foundation-orbit;
 // @include foundation-pagination;
 // @include foundation-progress-bar;
-// @include foundation-slider;
+@include foundation-slider;
 @include foundation-sticky;
 @include foundation-reveal;
 @include foundation-switch;
diff --git a/app/views/places/index.html.haml b/app/views/places/index.html.haml
index 1ec6ba2f..5eaefb1d 100644
--- a/app/views/places/index.html.haml
+++ b/app/views/places/index.html.haml
@@ -61,6 +61,55 @@
             All Images of this layer
   %p
     &nbsp;
+
+  %table
+    %thead
+      %tr
+        %th 
+          - minyear = @places.minimum(:startdate).year
+          - maxyear = @places.maximum(:enddate).year
+          %b
+            Timeline
+          from
+          = smart_date_display(@places.minimum(:startdate),nil) 
+          \—
+          = smart_date_display(@places.maximum(:enddate),nil)    
+          - timespan = maxyear-minyear
+          (#{timespan} years)
+
+        %th
+          &nbsp;
+    %tbody          
+      - @places.sort_by{ |e| e.startdate.nil? ? Date.new : e.startdate }.each do |place|
+        %tr 
+          %td
+            %p
+              = smart_date_display(place.startdate, place.enddate)
+              %em
+                = place.title
+          %td
+            - for i in minyear..maxyear
+              - if place.startdate && place.startdate.year == i
+                %span> &times;
+              - elsif place.startdate && place.startdate.year < i && place.enddate && place.enddate.year > i
+                %span> &times;
+              - else
+                %span>‒
+
+  %table  
+    %thead
+      %tr  
+        %th{colspan:2}
+          Slider
+          %p.float-right#slider-selection
+            %strong
+              = minyear
+          .slider.radius{"data-slider":true,"data-initial-start":minyear,"data-start":minyear,"data-end":maxyear,"data-step":1}
+            .slider-handle{"data-slider-handle":true,"role":"slider","tabindex":1}
+            .slider-fill{"data-slider-fill":true}
+            %input{"type":"hidden"}
+
+
   %table
     %thead
       %tr
@@ -70,7 +119,7 @@
 
     %tbody
       - @places.sort_by{ |e| e.startdate.nil? ? Date.new : e.startdate }.each do |place|
-        %tr
+        %tr{"data-startyear":(place.startdate ? place.startdate.year : ''),"data-endyear":(place.enddate ? place.enddate.year : '')}
           %td
             = smart_date_display(place.startdate, place.enddate)
             %p.show-for-small-only