time_table 0.1.3 → 0.1.4

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

@@ -0,0 +1,75 @@
+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});
+
+    return element;
+  }
+
+  updateEventElement(element, {start, end}) {
+    element.style.setProperty("top", `${start.location}px`); 
+    element.style.setProperty("height", `${end.location - start.location}px`);
+
+    this.setSpecialClasses(element);
+
+    element.querySelector(".event-time").innerHTML = this.#durationString(start.time, end.time);
+
+    return element;
+  }
+
+  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.innerHTML = `
+      <div class="label" data-action="mousedown->time-table#startDragEvent" data-time-table-drag-event-param="rescale">
+        ${this.#timeString(time, "short")}
+      </div>
+    `;
+
+    return timestampeElement;
+  }
+
+  setSpecialClasses(element) {
+    element.classList.toggle("tiny", element.offsetHeight < 15);
+    element.classList.toggle("small", element.offsetHeight < 45);
+  }
+
+  #timeString(date, format = "long") {
+    let hours = date.getUTCHours();
+    let minutes = date.getUTCMinutes();
+    let ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+
+    minutes = minutes < 10 ? '0' + minutes : minutes;
+    if(format == "long") {
+      return hours + ':' + minutes + ' ' + ampm;
+    } else if (format == "short") {
+      return hours + ampm
+    }
+  }
+
+  #durationString(startTime, endTime) {  
+    return `${this.#timeString(startTime)} - ${this.#timeString(endTime)}`;
+  }
+}
+
+export default new TimeTableRenderer();

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

@@ -15,9 +15,12 @@
   position: relative;
   height: calc(100%);
   flex-grow: 1;
+  /* padding-right: 20px; */
 }
 
 .timetable .timestamps {
+  /* width: 40px; */
+  /* overflow: show; */
 }
 
 .timetable:hover {
@@ -30,7 +33,8 @@
 
 .timestamps {
   position: absolute;
-  left: 5px;
+  left: 0;
+  padding-left: 5px;
   right: 0;
   display: flex;
   flex-direction: column;
@@ -39,7 +43,7 @@
   /* height: 50px; */
   justify-content: space-between;
   /* z-index: 100; */
-  overflow: visible;
+  /* overflow: visible; */
 }
 
 .timestamps .timestamp {
@@ -51,11 +55,21 @@
   overflow: visible;
 }
 
+.timestamps .timestamp.out-of-bounds {
+  color: rgb(168, 167, 167);
+}
+
 .timestamp .label {
   margin-top: -0.5em;
+  height: 100%;
+  width: fit-content;
+  z-index: 5;
   /* z-index: 1000; */
 }
 
+.timestamp .label:hover {
+  cursor: ns-resize;
+}
 
 .timestamps .timestamp::before {
   content: "";

data/app/helpers/time_table/time_table_helper.rb

@@ -1,9 +1,9 @@
 module TimeTable
   module TimeTableHelper
-    def time_table(date = nil, scale: 100, events: [], &block)
+    def time_table(date = nil, scale: 60, events: [], clip: 15, &block)
       # @time_table = TimeTable.new
       # @time_table.scale = scale
-      timetable = Timetable.new(date, scale: scale)
+      timetable = Timetable.new(date, scale: scale, clip_size: clip)
       render "time_table/time_table", timetable: timetable, events: events, &block
     end
 

data/app/views/time_table/_time_table.html.erb

@@ -14,8 +14,8 @@
 
   <div class="timestamps">
     <% 24.times do |hour| %>
-      <div class="timestamp">
-        <div class="label">
+      <div class="timestamp" data-time-table-target="timestamp">
+        <div class="label" data-action="mousedown->time-table#startDragEvent" data-time-table-drag-event-param="rescale">
           <%= hour == 0 ? "12 AM" : (hour > 12 ? "#{hour - 12} PM" : "#{hour} AM") %>
         </div>
       </div>

data/lib/time_table/version.rb

@@ -1,3 +1,3 @@
 module TimeTable
-  VERSION = "0.1.3"
+  VERSION = "0.1.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: time_table
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Joshua Hadik
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-28 00:00:00.000000000 Z
+date: 2025-05-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -39,6 +39,12 @@ files:
 - app/assets/javascript/time_table/controllers/application.js
 - app/assets/javascript/time_table/controllers/index.js
 - app/assets/javascript/time_table/controllers/time_table_controller.js
+- app/assets/javascript/time_table/controllers/time_table_controller_old.js
+- app/assets/javascript/time_table/controllers/time_table_controller_pre_time_keeper.js
+- app/assets/javascript/time_table/helpers/drag_event_state.js
+- app/assets/javascript/time_table/helpers/scroll_frame.js
+- app/assets/javascript/time_table/helpers/time_keeper.js
+- app/assets/javascript/time_table/helpers/time_table_renderer.js
 - app/assets/stylesheets/time_table/application.css
 - app/assets/stylesheets/time_table/time_table.css
 - app/controllers/time_table/application_controller.rb