timeline: add switches (#39)

v6ak · Sep 27, 2023 · 0a91997 · 0a91997
1 parent 561341a
commit 0a91997
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/client/src/main/scala/com/v6ak/zbdb/Renderer.scala b/client/src/main/scala/com/v6ak/zbdb/Renderer.scala
@@ -276,6 +276,7 @@ final class Renderer private(participantTable: ParticipantTable, processingError
         val (dialog, jqModal, modalBodyId) = modal(s"Časová osa pro #${row.id}: ${row.fullNameWithNick}")
         dom.document.body.appendChild(dialog)
         dom.document.getElementById(modalBodyId).appendChild(timeLineRenderer.timeLine(row).render)
+        timeLineRenderer.bodyClasses.foreach(dom.document.body.classList.add)
         jqModal.modal(js.Dictionary("keyboard" -> true))
       }
     )

diff --git a/client/src/main/scala/com/v6ak/zbdb/TimeLineRenderer.scala b/client/src/main/scala/com/v6ak/zbdb/TimeLineRenderer.scala
@@ -9,6 +9,7 @@ import Bootstrap._
 import org.scalajs.dom
 import scalatags.JsDom.all.{i => iTag, name => _, _}
 import scala.scalajs.js
+import org.scalajs.dom.raw._
 
 
 final case class FullPartInfo(
@@ -22,6 +23,13 @@ final class TimeLineRenderer(participantTable: ParticipantTable, plotRenderer: P
   import participantTable._
   import plotRenderer.{Plots, initializePlot}
 
+  val switchesState = collection.mutable.Map[String, String](
+    "speed" -> "with-speed",
+    "time" -> "with-clock-time",
+  )
+
+  def bodyClasses = switchesState.values
+
   val brief = true
 
   def verbose(f: Frag) = if (brief) "" else f
@@ -82,6 +90,21 @@ final class TimeLineRenderer(participantTable: ParticipantTable, plotRenderer: P
 
     private def finish(time: Moment, content: Frag) = timePoint(time, content, className = "finish")
 
+    private def classSelect(switchName: String)(items: (String, String)*) = select(
+      onchange := { e: Event =>
+        val el = e.currentTarget.asInstanceOf[HTMLSelectElement]
+        val newClass = el.value
+        val oldClasses = items.map(_._1).toSet - newClass
+        val classList = dom.document.body.classList
+        classList.add(newClass)
+        oldClasses.foreach(classList.remove)
+        switchesState(switchName) = newClass
+      }
+    )(
+      for ( (cls, name) <- items) yield
+        option(value := cls, if(cls == switchesState(switchName)) selected := true else "")(name)
+    )
+
     def timeLine = {
       val prevParts = Seq(None) ++ parts.map(Some(_))
       val nextPartInfos: Seq[Option[PartTimeInfo]] = row.partTimes.drop(1).map(Some(_)) ++ Seq(None)
@@ -90,7 +113,16 @@ final class TimeLineRenderer(participantTable: ParticipantTable, plotRenderer: P
           h2("Legenda"),
           legendTable,
         ),
-        // TODO: buttons for swithching clock/relTime and pace/speed
+        div(`class` := "timeline-switches")(
+          classSelect("time")(
+            "with-relative-time" -> "Čas od startu",
+            "with-clock-time" -> "Skutečný čas",
+          ),
+          classSelect("speed")(
+            "with-speed" -> "rychlost (km/h)",
+            "with-pace" -> "tempo (mm:ss / km)",
+          )
+        ),
         table(
           `class` := "timeline timeline-real",
           (

diff --git a/server/app/assets/main.less b/server/app/assets/main.less
@@ -246,8 +246,23 @@ body{
             display: none;
         }
     }
+
+    &.timeline-real {
+        .with-relative-time & .clock-time,
+        .with-clock-time & .relative-time,
+        .with-pace & .speed,
+        .with-speed & .pace,
+        {
+            display: none;
+        }
+    }
 }
 
+.timeline-switches {
+    margin-bottom: 20px;
+}
+
+
 @media screen {
     .age{
         display: block;