time_table 0.1.5 → 0.1.6

data/app/assets/javascript/time_table/controllers/{time_table_controller.js → timetable_controller.js}

@@ -5,9 +5,19 @@ import DragEventState from "../helpers/drag_event_state.js"
 import TimeTableRenderer from "../helpers/time_table_renderer.js"
 
 export default class extends Controller {
-  static targets = ["canvas", "eventsList", "event", "eventName", "eventTime", "timestamp"]
+  // static targets = ["canvas", "eventsList", "event", "eventName", "eventTime", "timestamp", "template"]
+
+  static targets = ["event", "template", "eventsList", "eventActionMenu"]
 
   connect() {
+    this.renderer = new TimeTableRenderer(this.templateTarget);
+    this.eventTargets.forEach((event) => {
+      this.renderer.setSpecialClasses(event);
+    });
+
+    // A little hacky
+    this.element.classList.remove("loading");
+
     this.timeKeeper = new TimeKeeper({
       start: new Date(this.element.dataset.timetableStartTime),
       end: new Date(this.element.dataset.timetableEndTime),
@@ -21,10 +31,16 @@ export default class extends Controller {
     this.scrollFrame = new ScrollFrame(this.element, { origin: topPadding });
 
     this.dragEvent = null;
+  }
 
-    this.eventTargets.forEach((event) => {
-      TimeTableRenderer.setSpecialClasses(event);
-    });
+  changeColumn(event) {
+    if(this.dragEvent && this.dragEvent.type == "move") {
+      let currentEvent = this.dragEvent.target;
+      this.dragEvent.column = event.currentTarget.closest(".column");
+      this.dragEvent.date = event.params.column
+      // TODO: Change query method
+      this.dragEvent.column.querySelector(".timetable-events").appendChild(currentEvent);
+    }
   }
 
   startDragEvent(event) {
@@ -36,10 +52,12 @@ export default class extends Controller {
     }
 
     this.dragEvent = new DragEventState({
+      date: event.params.column || event.target.closest(".column").dataset.timetableColumnParam,
       type: event.params.dragEvent,
       scrollFrame: this.scrollFrame,
       timeKeeper: this.timeKeeper,
-      target: event.currentTarget.closest(".event")
+      target: event.currentTarget.closest(".event"),
+      column: event.currentTarget.closest(".column")
     });
 
     this.dragEvent.captureOriginSnapshot(event);
@@ -50,8 +68,21 @@ export default class extends Controller {
   drag(event) {
     if(this.dragEvent) {
 
+      if(this.dragEvent.prevent) {
+        this.dragEvent = null;
+        return;
+      }
+
       this.dragEvent.captureSnapshot(event);
+      if(this.dragEvent.current.realTime - this.dragEvent.origin.realTime < 100) {
+        return;
+      }
 
+      // HACKY
+      this.dragEvent.dragging = true;
+      if(this.dragEvent.type != "create" && this.dragEvent.target) {
+        this.#dispatchDragClick(this.dragEvent.target);
+      }
       // Calls dragResize, dragMove, dragCreate, etc.
       this.#invokeDragMethodFor(this.dragEvent.type); 
 
@@ -63,6 +94,27 @@ export default class extends Controller {
 
   stopDragEvent(event) {
     event.preventDefault();
+    event.stopPropagation();
+
+    // HACK - Should come up with system of determining form target to submit (ADD CREATE CHECK TO DELETE UNSET EVENT HERE)
+    if(this.dragEvent && (this.dragEvent.type == "move" || this.dragEvent.type == "resize") && this.dragEvent.origin.type != "create") {
+      if(Math.abs(this.dragEvent.origin.time.real - this.dragEvent.current.time.real) > 100 || this.dragEvent.origin.column != this.dragEvent.current.column) {
+        console.log("Submitting form");
+        let form = this.dragEvent.target.querySelector(".calendar-event-form");
+        form.requestSubmit();
+      }
+    }
+
+    if(this.dragEvent && !this.dragEvent.dragging && this.dragEvent.target) {
+      this.#dispatchStillClick(this.dragEvent.target)
+    }
+
+    if(this.dragEvent && this.dragEvent.origin.type == "create" && this.dragEvent.previous) {
+      let target = this.dragEvent.target;
+      setTimeout(() => {
+        this.#dispatchStillClick(target);
+      }, 100);
+    }
 
     this.dragEvent = null;
 
@@ -70,6 +122,12 @@ export default class extends Controller {
     this.#removeDragEventListeners();
   }
 
+  preventDragEvent(event) {
+    event.stopPropagation();
+    if(this.dragEvent) {
+      this.dragEvent.prevent = true;
+    }
+  }
 
   //////////////////
   // Drag Methods //
@@ -77,17 +135,23 @@ export default class extends Controller {
 
   dragCreate(event) {
     let timeBoundaries = this.timeKeeper.timeBoundaries(this.dragEvent.current.time.clipped, this.dragEvent.origin.time.clipped);
-    let eventElement = TimeTableRenderer.createEventElement(timeBoundaries);
+
+    let eventElement = this.renderer.createEventElement(this.dragEvent.date, timeBoundaries);
 
     this.eventsListTarget.appendChild(eventElement);
 
+    // Come up with better way to select events list, maybe remove child div all together
+    this.dragEvent.column.querySelector(".timetable-events").appendChild(eventElement);
+    // this.eventsListTarget
+
     this.dragEvent.shift({ type: "resize", target: eventElement });
     this.handleOverlap(eventElement);
   }
 
   dragResize(event) {
     let timeBoundaries = this.timeKeeper.timeBoundaries(this.dragEvent.current.time.clipped, this.dragEvent.origin.target.startTime.real);
-    TimeTableRenderer.updateEventElement(this.dragEvent.target, timeBoundaries);
+
+    this.renderer.updateEventElement(this.dragEvent.target, this.dragEvent.date, timeBoundaries);
     this.handleOverlap(this.dragEvent.target);
   } 
 
@@ -98,7 +162,7 @@ export default class extends Controller {
 
     let timeBoundaries = this.timeKeeper.timeBoundaries(updatedStartTime, updatedEndTime);
 
-    TimeTableRenderer.updateEventElement(this.dragEvent.target, timeBoundaries);
+    this.renderer.updateEventElement(this.dragEvent.target, this.dragEvent.date, timeBoundaries);
     this.handleOverlap(this.dragEvent.target);
   }
 
@@ -113,31 +177,31 @@ export default class extends Controller {
     this.eventTargets.forEach((event) => {
       event.style.setProperty("height", `${event.offsetHeight * (scaleChange)}px`);
       event.style.setProperty("top", `${event.offsetTop * (scaleChange)}px`);
-      TimeTableRenderer.setSpecialClasses(event);
+      this.renderer.setSpecialClasses(event);
     });
   }
 
   handleOverlap(element) {
     let eventTop = element.offsetTop;
     let eventBottom = eventTop + element.offsetHeight;
-
-    this.eventTargets.forEach((event) => {
-      if(event != element) {
-        let top = event.offsetTop;
-        let bottom = top + event.offsetHeight;
-
-        if(eventTop >= top && eventBottom <= bottom) {
-          element.style.setProperty("left", "50px");
-          event.style.setProperty("right", "20px");
-        } else if(eventTop < bottom && eventBottom > top) {
-          element.style.setProperty("left", "50%");
-          event.style.setProperty("right", "50%");
-        } else {
-          element.style.setProperty("left", "50px");
-          event.style.setProperty("right", "20px");
-        }
-      }
-    });
+    // TODO: Change query method
+    // this.dragEvent.column.querySelector(".timetable-events").querySelectorAll(".event").forEach((event) => {
+    //   if(event != element) {
+    //     let top = event.offsetTop;
+    //     let bottom = top + event.offsetHeight;
+
+    //     if(eventTop >= top && eventBottom <= bottom) {
+    //       element.style.setProperty("left", "50px");
+    //       event.style.setProperty("right", "20px");
+    //     } else if(eventTop < bottom && eventBottom > top) {
+    //       element.style.setProperty("left", "50%");
+    //       event.style.setProperty("right", "50%");
+    //     } else {
+    //       element.style.setProperty("left", "50px");
+    //       event.style.setProperty("right", "20px");
+    //     }
+    //   }
+    // });
   }
 
 
@@ -147,6 +211,7 @@ export default class extends Controller {
   ////////////////////
 
   handleScroll(status) {
+    console.log("SHOULD BE SCROLLING");
     if(status == "ABOVE") {
       console.log("ABOVE");
       this.insertTimestampAbove();
@@ -168,7 +233,7 @@ export default class extends Controller {
     let time = new Date(this.timeKeeper.endTime.getTime());
     time.setHours(time.getHours() + 1);
     this.timeKeeper.endTime = time;
-    let timestampDiv = TimeTableRenderer.timestamp(time);
+    let timestampDiv = this.renderer.timestamp(time);
     this.element.querySelector(".timestamps").appendChild(timestampDiv);
   }
 
@@ -185,7 +250,7 @@ export default class extends Controller {
 
     if (this[`drag${capitalizedType}`]) {
       this[`drag${capitalizedType}`]();
-    } else {
+    } else { 
       console.error(`No drag method found for type: ${type}`);
     }
   }
@@ -194,6 +259,30 @@ export default class extends Controller {
   // Helpers //
   /////////////
 
+  #dispatchStillClick(target) {
+    target.dispatchEvent(this.#stillClickEvent());
+  }
+
+  #stillClickEvent() {
+    return new CustomEvent("still:click", {
+      detail: {
+        dragEvent: this.dragEvent
+      }
+    })
+  }
+
+  #dispatchDragClick(target) {
+    target.dispatchEvent(this.#dragClickEvent());
+  }
+
+  #dragClickEvent() {
+    return new CustomEvent("drag:click", {
+      detail: {
+        dragEvent: this.dragEvent
+      }
+    })
+  }
+
   #setDragEventListeners() {
     document.addEventListener("mousemove", this.drag.bind(this));
     document.addEventListener("mouseup", this.stopDragEvent.bind(this));

data/app/assets/javascript/time_table/helpers/drag_event_state.js

@@ -1,9 +1,13 @@
 export default class DragEventState {
-  constructor({ type, scrollFrame, timeKeeper, target }) {
+  constructor({ type, scrollFrame, timeKeeper, target, column, prevent = false, date }) {
     this.type = type;
     this.scrollFrame = scrollFrame;
     this.timeKeeper = timeKeeper;
     this.target = target;
+    // TODO: Reconsider this
+    this.column = column;
+    this.date = date;
+    this.prevent = prevent; // Kinda hacky
   }
 
   captureOriginSnapshot(event) {
@@ -27,12 +31,17 @@ export default class DragEventState {
     let relativePosition = this.scrollFrame.relativeCursorPosition(event);
     return {
       event: event,
+      type: this.type,
+      date: this.date,
       position: relativePosition,
       time: this.timeKeeper.timeAtPosition(relativePosition.scroll.y),
-      target: this.targetSnapshot(this.target)
+      column: this.column,
+      target: this.targetSnapshot(this.target),
+      realTime: new Date(),
     }
   }
 
+  // Probably want to add column here
   targetSnapshot(target) {
     if(!target) {
       return null;

data/app/assets/javascript/time_table/helpers/time_table_renderer.js

@@ -1,28 +1,29 @@
-class TimeTableRenderer {
-  createEventElement({start, end}) {
-    const element = document.createElement("div");
-
-    element.classList.add("event");
-    element.setAttribute("data-time-table-target", "event");
-    element.setAttribute("data-action", "mousedown->time-table#startDragEvent");
-    element.setAttribute("data-time-table-drag-event-param", "move");
-
-    element.innerHTML = `
-      <div class="event-name"><span style="font-weight: 400; color: gray;">(No Title)</span></div>
-      <div class="event-time" data-action="mousedown->time-table#startDragEvent" data-time-table-drag-event-param="resize">
-        ${ this.#durationString(start.time, end.time) }
-      </div>
-    `;
-
-    this.updateEventElement(element, {start, end});
+export default class TimeTableRenderer {
+  constructor(template) {
+    this.template = template;
+  }
 
+  createEventElement(date, {start, end}) {
+    const element = this.template.content.cloneNode(true).firstElementChild;
+    this.updateEventElement(element, date, {start, end});
     return element;
   }
 
-  updateEventElement(element, {start, end}) {
+  // TODO: Move all app specific logic to rails app
+  // Should move updater to a delegate controller in rails app, maybe creater to
+  updateEventElement(element, date, {start, end}) {
     element.style.setProperty("top", `${start.location}px`); 
     element.style.setProperty("height", `${end.location - start.location}px`);
 
+    let form = element.querySelector(".calendar-event-form");
+    // This shouldn't happen here
+    if(form.querySelector("#event_date_string")) {
+      form.querySelector("#event_date_string").setAttribute("value", date);
+      form.querySelector("#event_date_string").dispatchEvent(new CustomEvent("value:change", { bubbles: true, detail: { value: date }}));
+    }
+    form.querySelector("#event_start_time").value = this.getMilitaryTime(start.time);
+    form.querySelector("#event_end_time").value = this.getMilitaryTime(end.time);
+
     this.setSpecialClasses(element);
 
     element.querySelector(".event-time").innerHTML = this.#durationString(start.time, end.time);
@@ -30,16 +31,24 @@ class TimeTableRenderer {
     return element;
   }
 
+  getMilitaryTime(date) {
+    let hours = date.getUTCHours();
+    let minutes = date.getUTCMinutes();
+    minutes = minutes < 10 ? '0' + minutes : minutes; // Ensure two-digit minutes
+    hours = hours < 10 ? '0' + hours : hours; // Ensure two-digit hours
+    return `${hours}:${minutes}`;
+  }
+
   timestamp(time) {
     let timestampeElement = document.createElement("div");
     timestampeElement.classList.add("timestamp");
     timestampeElement.classList.add("out-of-bounds");
-    timestampeElement.setAttribute("data-time-table-target", "timestamp");
-    timestampeElement.setAttribute("data-action", "mousedown->time-table#startDragEvent");
-    timestampeElement.setAttribute("data-time-table-drag-event-param", "rescale");
+    timestampeElement.setAttribute("data-timetable-target", "timestamp");
+    timestampeElement.setAttribute("data-action", "mousedown->timetable#startDragEvent");
+    timestampeElement.setAttribute("data-timetable-drag-event-param", "rescale");
 
     timestampeElement.innerHTML = `
-      <div class="label" data-action="mousedown->time-table#startDragEvent" data-time-table-drag-event-param="rescale">
+      <div class="label" data-action="mousedown->timetable#startDragEvent" data-timetable-drag-event-param="rescale">
         ${this.#timeString(time, "short")}
       </div>
     `;
@@ -48,8 +57,10 @@ class TimeTableRenderer {
   }
 
   setSpecialClasses(element) {
-    element.classList.toggle("tiny", element.offsetHeight < 15);
-    element.classList.toggle("small", element.offsetHeight < 45);
+    element.classList.toggle("no-content", element.offsetHeight < 15);
+    element.classList.toggle("tiny", element.offsetHeight < 30);
+    element.classList.toggle("mini", element.offsetHeight < 45);
+    element.classList.toggle("small", element.offsetHeight < 75);
   }
 
   #timeString(date, format = "long") {
@@ -72,4 +83,4 @@ class TimeTableRenderer {
   }
 }
 
-export default new TimeTableRenderer();
+// export default new TimeTableRenderer();

data/app/assets/stylesheets/time_table/timetable.css

@@ -0,0 +1,143 @@
+.timetable {
+  position: relative;
+  height: fit-content;
+  overflow: visible;
+  display: grid;
+}
+
+.timetable-calendar .timetable {
+  height: 100%;
+}
+
+.timetable > * {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.timetable-canvas {
+  height: calc(100%);
+  flex-grow: 1;
+  position: relative;
+  z-index: 1;
+}
+
+.timetable-column {
+  border-left: 1px solid var(--backdrop-5);
+  height: 100%;
+}
+
+.timetable-events {
+  width: 100%;
+  position: relative;
+}
+
+/**************/
+/* Timestamps */
+/**************/
+
+.timetable .timestamps {
+  z-index: 0;
+}
+
+.timetable .timestamp {
+  font-size: 0.8em;
+  width: 100%;
+  position: relative;
+  height: calc(var(--hour-scale) * 1px);
+  overflow: visible;
+}
+
+.timetable .timestamp.out-of-bounds {
+  color: rgb(168, 167, 167);
+}
+
+.timetable .timestamp .label {
+  margin-top: -0.5em;
+  height: 100%;
+  width: fit-content;
+  z-index: 5;
+  width: 45px !important;
+  text-align: right;
+  padding-right: 5px;
+}
+
+.timetable .timestamp .label:hover {
+  cursor: ns-resize;
+}
+
+.timetable .timestamp::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  left: 45px;
+  height: 1px;
+  background-color: var(--backdrop-7);
+  opacity: 0.5;
+}
+
+/************/
+/* Calendar */
+/************/
+
+.timetable-calendar .timetable-headers, 
+.timetable-calendar .timetable-canvas {
+  margin-left: 45px;
+  display: flex; 
+  flex-direction: row;
+}
+
+.timetable-calendar .timetable-header,
+.timetable-calendar .timetable-column {
+  flex: 1 1 0 !important;
+  /* overflow: hidden; */
+}
+
+.timetable-calendar .timetable-header {
+  display: flex;
+  flex-direction: column; 
+  justify-content: center;
+}
+
+.timetable-calendar .timetable-header:only-child {
+  align-items: flex-start;
+}
+
+/*********/
+/* SKINS */
+/*********/
+
+.timetable-column {
+  display: grid; 
+}
+
+.timetable-column > * {
+  grid-area: 1 / -1 / 1 / -1; /* Span the single column */
+  width: 100%; /* Ensure full width */
+}
+
+.timetable-skins {
+  width: 100%;
+  position: relative;
+}
+
+.timetable-skin {
+  width: 100%;
+  background-color: var(--backdrop-3);
+  position: absolute;
+  right: 0;
+  left: 0;
+  opacity: 0.5;
+}
+
+/* .timetable-skin:hover { */
+  /* background-color: var(--backdrop-5); */
+  /* opacity: 0.5; */
+/* } */
+
+.timetable-events {
+  pointer-events: none;
+}
+
+.timetable-events > * {
+  pointer-events: auto;
+}

data/app/helpers/time_table/{time_table_helper.rb → time_table_old_helper.rb}

@@ -1,18 +1,18 @@
 module TimeTable
-  module TimeTableHelper
+  module TimeTableOldHelper
     def time_table(date = nil, frozen: false, scale: 60, events: [], clip: 15, &block)
       # @time_table = TimeTable.new
       # @time_table.scale = scale
-      timetable = Timetable.new(date, scale: scale, clip_size: clip, frozen: frozen)
-      render "time_table/time_table", timetable: timetable, events: events, &block
+      timetable = TimeTable.new(date, scale: scale, clip_size: clip, frozen: frozen, events: events, view: self,)
+      render "time_table/time_table", timetable: timetable, &block
     end
 
     def hours_in_day
     end
 
 
-    class Timetable
-      attr_accessor :start_time, :end_time, :segment_size, :segment_scale, :clip_size, :clock_type, :frozen
+    class TimeTable
+      attr_accessor :start_time, :end_time, :segment_size, :segment_scale, :clip_size, :clock_type, :frozen, :events
 
       def initialize(date = nil, **options)
         @start_time = options[:start_time] || 0
@@ -24,6 +24,8 @@ module TimeTable
         @clip_size = options[:clip_size] || 15
         @clock_type = options[:clock_type] || :meridian
         @frozen = options[:frozen] || false
+        @events = options[:events] || []
+        @view = options[:view] || nil
       end
 
       def segments
@@ -36,6 +38,16 @@ module TimeTable
         end
       end
 
+      def render_events
+        @view.content_tag :div, class: "timetable-canvas", data: { time_table_target: "canvas" } do
+          @view.content_tag :div, class: "timetable-events", data: { time_table_target: "eventsList" } do
+            events.each do |event|
+              yield event
+            end 
+          end 
+        end 
+      end
+
       def time_in_meridian(time)
         hour = time / 60
         minute = time % 60