Add frontend for dashboard (bootstrap, turbo); make table of recordin…

…gs; touch session window (#20)

app/controllers/spectator_sport/dashboard/frontends_controller.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module SpectatorSport
+  module Dashboard
+    class FrontendsController < ActionController::Base # rubocop:disable Rails/ApplicationController
+      protect_from_forgery with: :exception
+      skip_after_action :verify_same_origin_request, raise: false
+
+      def self.asset_path(path)
+        Engine.root.join("app/frontend/spectator_sport/dashboard", path)
+      end
+
+      STATIC_ASSETS = {
+        css: {
+          bootstrap: asset_path("vendor/bootstrap/bootstrap.min.css"),
+          "rrweb-player": asset_path("vendor/rrweb-player/rrweb-player.min.css"),
+          style: asset_path("style.css")
+        },
+        js: {
+          bootstrap: asset_path("vendor/bootstrap/bootstrap.bundle.min.js"),
+          es_module_shims: asset_path("vendor/es_module_shims.js")
+        },
+        svg: {
+          icons: asset_path("icons.svg")
+        }
+      }.freeze
+
+      MODULE_OVERRIDES = {
+        application: asset_path("application.js"),
+        "rrweb-player": asset_path("vendor/rrweb-player/rrweb-player.min.js"),
+        stimulus: asset_path("vendor/stimulus.js"),
+        turbo: asset_path("vendor/turbo.js")
+      }.freeze
+
+      def self.js_modules
+        @_js_modules ||= asset_path("modules").children.select(&:file?).each_with_object({}) do |file, modules|
+          key = File.basename(file.basename.to_s, ".js").to_sym
+          modules[key] = file
+        end.merge(MODULE_OVERRIDES)
+      end
+
+      before_action do
+        expires_in 1.year, public: true
+      end
+
+      def static
+        file_path = STATIC_ASSETS.dig(params[:format]&.to_sym, params[:id]&.to_sym) || raise(ActionController::RoutingError, "Not Found")
+        send_file file_path, disposition: "inline"
+      end
+
+      def module
+        raise(ActionController::RoutingError, "Not Found") if params[:format] != "js"
+
+        file_path = self.class.js_modules[params[:id]&.to_sym] || raise(ActionController::RoutingError, "Not Found")
+        send_file file_path, disposition: "inline"
+      end
+    end
+  end
+end

app/controllers/spectator_sport/events_controller.rb

@@ -23,9 +23,11 @@ def create
       records_data = events.map do |event|
         { session_id: session.id, session_window_id: window.id, event_data: event, created_at: Time.at(event["timestamp"].to_f / 1000.0) }
       end.to_a
-
       Event.insert_all(records_data)
 
+      last_event = records_data.max_by { |data| data[:created_at] }
+      window.update(updated_at: last_event[:created_at]) if last_event
+
       render json: { message: "ok" }
     end
   end

app/frontend/spectator_sport/dashboard/application.js

@@ -0,0 +1,7 @@
+/*jshint esversion: 6, strict: false */
+
+import "turbo";
+import { Application } from "stimulus";
+import ThemeController from "theme_controller";
+window.Stimulus = Application.start();
+Stimulus.register("theme", ThemeController);

app/frontend/spectator_sport/dashboard/modules/theme_controller.js

@@ -0,0 +1,44 @@
+// hello_controller.js
+import { Controller } from "stimulus"
+export default class extends Controller {
+  static targets = [ "dropdown", "button" ]
+
+  connect() {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      const theme = localStorage.getItem('spectator_sport-theme');
+      if (!["light", "dark"].includes(theme)) {
+        this.setTheme(this.autoTheme());
+      }
+    });
+
+    this.setTheme(this.getStoredTheme() || 'light');
+  }
+
+  change(event) {
+    const theme = event.params.value;
+    localStorage.setItem('spectator_sport-theme', theme);
+    this.setTheme(theme);
+  }
+
+  setTheme(theme) {
+    document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? this.autoTheme() : theme);
+
+    this.buttonTargets.forEach((button) => {
+      button.classList.remove('active');
+      if (button.dataset.themeValueParam === theme) {
+        button.classList.add('active');
+      }
+    });
+
+    const svg = this.buttonTargets.filter(b => b.matches(".active"))[0]?.querySelector('svg');
+    this.dropdownTarget.querySelector('svg').outerHTML = svg.outerHTML;
+  }
+
+  getStoredTheme() {
+    return localStorage.getItem('spectator_sport-theme');
+  }
+
+  autoTheme() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+}

app/frontend/spectator_sport/dashboard/style.css

@@ -0,0 +1,66 @@
+.tooltip {
+  position: absolute;
+  z-index: 1;
+  padding: 5px;
+  background: rgba(0, 0, 0, 0.3);
+  opacity: 1;
+  border-radius: 3px;
+  text-align: center;
+  pointer-events: none;
+  color: white;
+  transition: opacity .1s ease-out;
+}
+
+.tooltip.tooltip-hidden {
+  opacity: 0;
+}
+
+.ct-label.ct-horizontal {
+  white-space: nowrap;
+}
+
+.chart-wrapper {
+  position: relative;
+  height: 200px;
+}
+
+.legend-item-color-box {
+  display: inline-block;
+  flex-shrink: 0;
+  height: 20px;
+  width: 20px;
+  border-style: solid;
+  margin-right: 3px;
+}
+
+#chart-legend-container {
+  height: 200px;
+}
+
+/* Break out of a container */
+.break-out {
+  width:100vw;
+  position:relative;
+  left:calc(-1 * (100vw - 100%)/2);
+}
+
+.toast-container {
+  z-index: 1;
+}
+
+.btn-outline-secondary {
+  border-color: #ced4da; /* $gray-400 */
+}
+
+.min-w-auto {
+  min-width: auto;
+}
+
+.w-fit-content {
+  width: fit-content
+}
+
+.svg-icon {
+  height: 1rem;
+  width: 1rem;
+}