time_table 0.1.4 → 0.1.6

data/app/helpers/time_table/timetable_calendar_helper.rb

@@ -0,0 +1,206 @@
+module TimeTable 
+  module TimetableCalendarHelper
+    def timetable_calendar(bounds:, range: 7, scale: 60, clip: 15, frozen: false, **options, &block)
+      timetable_calendar = TimetableCalendar.new(bounds: bounds, range: range, view: self, query_params: request.query_parameters)
+      timetable_calendar.set_multi_timetable(scale: scale, clip: clip, frozen: frozen, view: self)
+
+      options[:class] = "#{options[:class]} timetable-calendar"
+      content_tag :div, **options do 
+        yield timetable_calendar
+      end
+    end
+
+    class Timetable
+      attr_accessor :start_date, :end_date, :start_time, :end_time, :dates, :scale, :clip, :frozen, :view, :events, :template_event
+
+      def initialize(start_date:, end_date:, view:, start_time: nil, end_time: nil, scale: 60, clip: 15, frozen: false)
+        @start_date = start_date 
+        @end_date = end_date
+        @dates = start_date..end_date
+        @scale = scale
+        @clip = clip
+        @frozen = frozen
+        @view = view
+        @events = {}
+        @start_time = start_time || start_date.beginning_of_day
+        @end_time = end_time || start_date.end_of_day
+      end
+
+      def register_events_template(model)
+        @template_event = model 
+      end
+
+      def register_events_for_column(day, events)
+        @events[day] = events
+      end
+
+      def render_timetable_with_events(&block)
+        @view.render(layout: "time_table/timetable", locals: { timetable: self }, &block)
+      end
+    end 
+
+    class TimetableCalendar 
+      attr_accessor :calendar_boundaries, :current_date_range, :view, :query_params, :multi_timetable
+
+      delegate :register_events_for_column, :render_timetable_with_events, :register_events_template, to: :multi_timetable
+
+      MAX_NUMBER_OF_DAYS = 7
+
+      def initialize(bounds:, range: 7, query_params: {}, view: nil)
+        @calendar_boundaries = bounds
+        @query_params = query_params 
+        @view = view 
+
+        @current_date_range = get_bounded_date_range(range)
+      end
+
+      def set_multi_timetable(**options)
+        @multi_timetable = Timetable.new(start_date: current_start_date, end_date: current_end_date, view: view, **options)
+      end
+
+      ######################
+      ## HEADER RENDERING ##
+      ######################
+
+      def render_days(&block)
+        @view.content_tag :div, class: "timetable-headers" do 
+          @view.concat(current_date_range.map do |day| 
+            @view.content_tag :div, class: "timetable-header" do 
+              yield(day)
+            end
+          end.join("").html_safe)
+        end
+      end
+
+      #################
+      ## INFORMATION ##
+      #################
+
+      def months_string 
+        if current_start_date.year == current_end_date.year
+          if current_start_date.month == current_end_date.month
+            "#{current_start_date.strftime('%B %Y')}"
+          else
+            "#{current_start_date.strftime('%B')} - #{current_end_date.strftime('%B %Y')}"
+          end
+        else 
+          "#{current_start_date.strftime('%B %Y')} - #{current_end_date.strftime('%B %Y')}"
+        end
+      end
+
+      #################
+      ## QUERY LINKS ##
+      #################
+
+      def query_link(text = nil, query:, **params, &block)
+        active = query.reduce(true) do |acc, (key, value)|
+          acc && send(key) == value
+        end
+
+        params[:class] = "#{params[:class]} active" if active
+        link_to(text, @query_params.merge(query), **params, &block)
+      end
+
+      ######################
+      ## NAVIGATION LINKS ##
+      ######################
+
+      def previous_link(text = nil, **params, &block)
+        if current_start_date == calendar_start_boundary
+          return disabled_nav_link(text, **params, &block) 
+        end
+        
+        previous_day = current_start_date - current_number_of_days
+        previous_day = calendar_start_boundary if previous_day < calendar_start_boundary
+
+        link_to(text, @query_params.merge(start_date: previous_day), **params, &block)
+      end
+
+      def next_link(text = nil, **params, &block)
+        if current_start_date + current_number_of_days.days > calendar_end_boundary
+          return disabled_nav_link(text, **params, &block)
+        end
+
+        next_day = current_start_date + current_number_of_days.days
+        next_day = calendar_end_boundary - current_number_of_days.days + 1 if next_day + current_number_of_days.days > calendar_end_boundary
+
+        link_to(text, @query_params.merge(start_date: next_day), **params, &block)
+      end
+
+      def disabled_nav_link(text = nil, **params, &block)
+        params[:class] = "#{params[:class]} disabled"
+        link_to(text, "", **params, &block)
+      end
+
+      def link_to(*args, **params, &block)
+        @view.link_to *args.compact, **params, &block
+      end
+
+      #######################
+      ## ATTRIBUTE READERS ##
+      #######################
+
+      def current_start_date
+        @current_start_date ||= @current_date_range.first
+      end
+
+      alias_method :start_date, :current_start_date
+
+      def current_end_date
+        @current_end_date ||= @current_date_range.last
+      end
+
+      alias_method :end_date, :current_end_date
+
+      def current_number_of_days 
+        @current_number_of_days ||= @current_date_range.count
+      end
+
+      alias_method :number_of_days, :current_number_of_days
+
+      def calendar_start_boundary
+        @calendar_start_boundary ||= calendar_boundaries.first 
+      end
+
+      def calendar_end_boundary
+        @calendar_end_boundary ||= calendar_boundaries.last
+      end
+
+      def calendar_limit 
+        @calendar_limit ||= calendar_boundaries.count
+      end
+
+      private 
+
+      ############################
+      ## DATE RANGE CALCULATION ##
+      ############################
+
+      def get_bounded_date_range(range) 
+        bounded_number_of_days = bounded_number_of_days(range)
+        bounded_start_date = bounded_start_date(bounded_number_of_days)
+        computed_end_date = computed_end_date(bounded_start_date, bounded_number_of_days)
+
+        (bounded_start_date..computed_end_date)
+      end
+
+      def bounded_number_of_days(range)
+        selected_number_of_days = query_params[:number_of_days]&.to_i || range
+        max_number_of_days = [MAX_NUMBER_OF_DAYS, calendar_limit].min 
+        selected_number_of_days.clamp(1, max_number_of_days)
+      end
+
+      def bounded_start_date(range)
+        selected_start_date = query_params[:start_date]&.to_date || calendar_start_boundary
+        max_start_date = calendar_end_boundary - range.days + 1 # Should this use .days?
+        selected_start_date.clamp(calendar_start_boundary, max_start_date)
+      end
+
+      def computed_end_date(start_date, range)
+        selected_end_date = query_params[:end_date]&.to_date || start_date + range.days - 1
+        min_end_date = calendar_start_boundary + range.days - 1
+        selected_end_date.clamp(min_end_date, calendar_end_boundary)
+      end
+    end
+  end
+end

data/app/views/time_table/{_time_table.html.erb → _time_table_old.html.erb}

@@ -6,6 +6,7 @@
       mousemove->time-table#drag
     ",
     time_table_drag_event_param: "create",
+    timetable_frozen_param: timetable.frozen,
     timetable_clip_size: timetable.clip_size, 
     timetable_scale: timetable.segment_scale,
     timetable_start_time: timetable.start_time.iso8601,
@@ -22,11 +23,5 @@
     <% end %>
   </div>
 
-  <div class="timetable-canvas" data-time-table-target="canvas">
-    <div class="timetable-events" data-time-table-target="eventsList">
-      <% events.each do |event| %>
-        <%= yield event %>
-      <% end %>
-    </div>
-  </div>
+  <%= yield timetable %>
 <% end %>

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

@@ -0,0 +1,49 @@
+<%= content_tag(:div, class: "timetable loading #{'frozen' if timetable.frozen}", data: { 
+    controller: "timetable", 
+    timetable_frozen_param: timetable.frozen,
+    timetable_clip_size: timetable.clip, 
+    timetable_start_time: timetable.start_time.iso8601,
+    timetable_end_time: timetable.end_time.iso8601,
+  }, style: "--hour-scale: #{timetable.scale}; --timestamp-width: 20px;") do %>
+  <%= content_tag(:div, class: "timestamps") do %>
+    <% 24.times do |hour| %>
+      <div class="timestamp" data-timetable-target="timestamp">
+        <div class="label" data-action="mousedown->timetable#startDragEvent" data-time-table-drag-event-param="rescale">
+          <%= hour == 0 ? "12 AM" : (hour > 12 ? "#{hour - 12} PM" : "#{hour} AM") %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+
+  <%= content_tag(:div, class: "timetable-canvas", data: {
+    timetable_target: "canvas"
+  }) do %>
+    <% timetable.dates.each do |column| %>
+      <%= content_tag(:div, class: "timetable-column column", data: {
+        action: "
+          mousedown->timetable#startDragEvent 
+          mouseup->timetable#stopDragEvent 
+          mousemove->timetable#drag
+          mouseenter->timetable#changeColumn
+        ",
+        timetable_drag_event_param: "create",
+        timetable_column_param: "#{column}",
+        timetable_target: "column",
+      }) do %> 
+        <%= content_tag :div, class: "timetable-skins", data: { timetable_target: "skins" } do %>
+          <%= content_tag :div, "", class: "timetable-skin", data: { timetable_target: "skin" } %>
+        <% end %>
+        <%= content_tag :div, class: "timetable-events", data: { timetable_target: "eventsList", timetable_event_list: column } do %>
+          <% timetable.events[column].each do |event, timetable| %>
+            <%= yield event %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= content_tag :template, class: "timetable-event-template hidden", data: { timetable_target: "template" } do %>
+      <%= yield timetable.template_event %>
+    <% end %>
+  <% end %>
+<% end %>
+

data/lib/time_table/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: time_table
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.6
 platform: ruby
 authors:
 - Joshua Hadik
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-01 00:00:00.000000000 Z
+date: 2025-05-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -38,23 +38,24 @@ files:
 - app/assets/javascript/time_table/application.js
 - 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/controllers/timetable_controller.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/assets/stylesheets/time_table/timetable.css
 - app/controllers/time_table/application_controller.rb
 - app/helpers/time_table/application_helper.rb
-- app/helpers/time_table/time_table_helper.rb
+- app/helpers/time_table/time_table_old_helper.rb
+- app/helpers/time_table/timetable_calendar_helper.rb
 - app/jobs/time_table/application_job.rb
 - app/mailers/time_table/application_mailer.rb
 - app/models/time_table/application_record.rb
 - app/views/layouts/time_table/application.html.erb
-- app/views/time_table/_time_table.html.erb
+- app/views/time_table/_time_table_old.html.erb
+- app/views/time_table/_timetable.html.erb
 - config/importmap.rb
 - config/routes.rb
 - lib/tasks/time_table_tasks.rake

data/app/assets/javascript/time_table/controllers/time_table_controller_pre_time_keeper.js

@@ -1,350 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-import ScrollFrame from "../helpers/scroll_frame.js"
-import TimeTableRenderer from "../helpers/time_table_renderer.js"
-
-export default class extends Controller {
-  static targets = ["canvas", "eventsList", "event", "eventName", "eventTime", "timestamp"]
-
-  static UNITS = {
-    hours: 3_600_000,
-    minutes: 60_000,
-    seconds: 1_000
-  }
-
-  connect() {
-    this.startTime = new Date(this.element.dataset.timetableStartTime);
-    this.endTime = new Date(this.element.dataset.timetableEndTime);
-    this.extendedStartTime = this.startTime;
-    this.extendedEndTime = this.endTime;
-    this.clipSize = this.element.dataset.timetableClipSize;
-
-    let topPadding = parseInt(window.getComputedStyle(this.element).paddingTop, 10);
-
-    this.scrollHeight = this.element.scrollHeight - topPadding;
-    this.scrollFrame = new ScrollFrame(this.element, { origin: topPadding });
-
-    this.dragging = false;
-    this.dragEvent = {};
-    this.scrollEvent = {};
-
-    this.timeScope = this.constructor.UNITS.hours;
-    this.timeMetric = this.constructor.UNITS.minutes;
-    this.metricConversion = this.timeScope / this.timeMetric;
-
-    this.scale = 60;
-
-    this.eventTargets.forEach((event) => {
-      TimeTableRenderer.setSpecialClasses(event);
-    });
-  }
-
-  dragScreenShot(event) {
-    let relativePosition = this.scrollFrame.relativeCursorPosition(event);
-    
-    return {
-      position: relativePosition,
-      time: this.#timeAtPosition(relativePosition.scroll.y),
-      target: this.targetScreenShot(this.dragEvent.target)
-    }
-  }
-
-  targetScreenShot(target) {
-    if(!target) {
-      return null;
-    }
-    
-    let relativePosition = this.scrollFrame.relativePosition(target.getBoundingClientRect().left, target.getBoundingClientRect().top);
-
-    let height = target.offsetHeight;
-
-    return {
-      height: height, 
-      position: relativePosition,
-      startTime: this.#timeAtPosition(relativePosition.scroll.y),
-      endTime: this.#timeAtPosition(relativePosition.scroll.y + height),
-    }
-  }
-
-  startDragEvent(event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    this.dragging = true;
-
-    this.dragEvent.type = event.params.dragEvent;
-    this.dragEvent.target = event.currentTarget.closest(".event");
-    this.dragEvent.origin = this.dragScreenShot(event);
-    this.dragEvent.current = this.dragEvent.origin;
-
-    // this.dragEventObject = new DragState({
-    //   type: event.params.dragEvent,
-    //   scrollFrame: this.scrollFrame, 
-    //   target: event.currentTarget.closest(".event"), 
-    //   event: event
-    // })
-
-    // console.log(this.dragEventObject);
-
-    // this.dragEvent = new DragEvent({
-    //  scrollFrame: this.scrollFrame, event: event, target: event.currentTarget.closest(".event")});
-
-
-    
-    this.#setDragEventListeners();
-  }
-
-  stopDragEvent(event) {
-    event.preventDefault();
-
-    this.dragging = false;
-    this.dragEvent = {};
-
-    this.stopScroll();
-    this.#removeDragEventListeners();
-  }
-
-  drag(event) {
-    if(this.dragging) {
-      this.dragEvent.previous = this.dragEvent.current;
-      this.dragEvent.current = this.dragScreenShot(event);
-      this.dragEvent.event = event;
-
-      // Calls dragResize, dragMove, dragCreate, etc.
-      this.#invokeDragMethodFor(this.dragEvent.type); 
-
-      if(this.dragEvent.type != undefined && this.dragEvent.type != "rescale") {
-        this.checkScroll();
-      }
-    }
-  }
-
-  //////////////////
-  // Drag Methods //
-  //////////////////
-
-  dragCreate(event) {
-    let timeBoundaries = this.#timeBoundaries(this.dragEvent.current.time.clipped, this.dragEvent.origin.time.clipped);
-    let eventElement = TimeTableRenderer.createEventElement(timeBoundaries);
-
-    this.eventsListTarget.appendChild(eventElement);
-    this.dragEvent.target = eventElement;
-    this.dragEvent.origin.target = this.targetScreenShot(eventElement);
-    this.dragEvent.current.target = this.dragEvent.origin.target;
-    this.dragEvent.type = "resize";
-  }
-
-  dragResize(event) {
-    let timeBoundaries = this.#timeBoundaries(this.dragEvent.current.time.clipped, this.dragEvent.origin.target.startTime.real);
-    TimeTableRenderer.updateEventElement(this.dragEvent.target, timeBoundaries);
-    this.dragEvent.current.target = this.targetScreenShot(this.dragEvent.target);
-  }
-
-  dragMove(event) {
-    let timeChange = (this.dragEvent.current.time.clipped - this.dragEvent.origin.time.clipped);
-    let updatedStartTime = new Date(this.dragEvent.origin.target.startTime.real.getTime() + timeChange)
-    let updatedEndTime = new Date(this.dragEvent.origin.target.endTime.real.getTime() + timeChange);
-
-    let timeBoundaries = this.#timeBoundaries(updatedStartTime, updatedEndTime);
-
-    TimeTableRenderer.updateEventElement(this.dragEvent.target, timeBoundaries);
-    this.dragEvent.current.target = this.targetScreenShot(this.dragEvent.target);
-  }
-
-  dragRescale(event) {
-    let delta = this.dragEvent.previous.position.scroll.y - this.dragEvent.current.position.scroll.y;
-    let newScale = Math.max(30, Math.min(300, this.scale - (delta)));
-    this.element.style.setProperty("--hour-scale", newScale);
-    let scaleChange = newScale / this.scale;
-
-    this.scrollHeight = this.element.scrollHeight - 20;
-    this.scale = newScale;
-    this.setClipSize(newScale);
-
-    this.eventTargets.forEach((event) => {
-      event.style.setProperty("height", `${event.offsetHeight * (scaleChange)}px`);
-      event.style.setProperty("top", `${event.offsetTop * (scaleChange)}px`);
-      TimeTableRenderer.setSpecialClasses(event);
-    });
-  }
-
-  ////////////////////
-  // Scroll Methods //
-  ////////////////////
-
-  checkScroll() {
-    // TODO - Refactor
-    let currentFrameY = this.dragEvent.current.position.frame.y;
-    if(currentFrameY < 30) {
-      let distance = Math.abs(currentFrameY - 30);
-      let direction = -1;
-      this.setScroll(distance, direction);
-    } else if (currentFrameY > this.scrollFrame.frame.height - 30) {
-      let distance = Math.abs(currentFrameY - (this.scrollFrame.frame.height - 30));
-      let direction = +1;
-      this.setScroll(distance, direction);
-    } else {
-      this.stopScroll();
-    }
-  }
-
-  static SCROLL_SPEEDS = [
-    { max: 30, speed: 1 },
-    { max: 50, speed: 2 },
-    { max: 100, speed: 3 },
-    { max: 150, speed: 5 }, 
-    { max: 250, speed: 10 },
-    { max: Infinity, speed: 15}
-  ]
-
-  setScroll(distance, direction) {
-    this.scrollEvent.step = (this.constructor.SCROLL_SPEEDS.find(range => distance < range.max)?.speed || 10) * direction;
-
-    if(!this.scrollEvent.timeout) {
-      this.scroll();
-    }
-  }
-
-  scroll() {
-    this.scrollEvent.timeout = setTimeout(() => {
-      this.element.scrollTop += this.scrollEvent.step;
-      if(this.element.scrollTop == 0) {
-        this.insertTimestampAbove();
-      }
-
-      if(this.element.scrollTop + this.element.clientHeight >= this.scrollHeight) {
-        this.insertTimestampBelow();
-      }
-
-      this.scroll();
-      this.drag(this.dragEvent.event);
-    }, 1);
-  }
-
-  insertTimestampAbove() {
-  }
-
-  insertTimestampBelow() {
-    // this.dragEvent.inserting = true;
-    // Add 1 hour
-    let time = new Date(this.endTime.getTime());
-    time.setHours(time.getHours() + 1);
-    this.endTime = time;
-    let timestampDiv = TimeTableRenderer.timestamp(time);
-    console.log(timestampDiv);
-    this.element.querySelector(".timestamps").appendChild(timestampDiv);
-    this.scrollHeight = this.element.scrollHeight - 20;
-  }
-
-  stopScroll() {
-    if(this.scrollEvent.timeout) {
-      clearTimeout(this.scrollEvent.timeout);
-      this.scrollEvent = {};
-    }
-  }
-
-  /////////////////////
-  // Time & Position //
-  /////////////////////
-
-  #timeBoundaries(timeA, timeB) {
-    let startTime = new Date(Math.min(timeA, timeB));
-    let endTime = new Date(Math.max(timeA, timeB));
-
-    if (endTime - startTime < this.clipSize * 60 * 1000) {
-      endTime = new Date(startTime.getTime() + (this.clipSize * 60 * 1000));
-    }
-
-    return { 
-      start: { time: startTime, location: this.#positionOfTime(startTime) }, 
-      end: { time: endTime, location: this.#positionOfTime(endTime) }
-    };
-  }
-
-  #timeAtPosition(relativeScrollY) {
-    let scopeOrdinal = Math.trunc(relativeScrollY / this.scale); // Eg "Hours from start"
-    let positionInScope = (relativeScrollY % this.scale) / this.scale;
-    let scopeMeasure = Math.trunc(positionInScope * this.metricConversion)
-    let clippedScopeMeasure = Math.floor(scopeMeasure / this.clipSize) * this.clipSize;
-    let millisecondsFromStart = (scopeOrdinal * this.timeScope) + (scopeMeasure * this.timeMetric);
-    let clippedMillisecondsFromStart = (scopeOrdinal * this.timeScope) + (clippedScopeMeasure * this.timeMetric);
-
-    return {
-      real: new Date(this.startTime.getTime() + millisecondsFromStart), // For some reason 1 second is added to real each time you change it.
-      clipped: new Date(this.startTime.getTime() + clippedMillisecondsFromStart),
-    }
-  }
-
-  #positionOfTime(time) {
-    let timeFromStart = time - this.startTime;
-    let scopeFromStart = Math.floor(timeFromStart / this.timeScope);
-    let metricFromScope = Math.floor((timeFromStart % this.timeScope) / this.timeMetric);
-    let pixelsFromStart = (scopeFromStart * this.scale) + (metricFromScope * this.scale / this.metricConversion);
-    return pixelsFromStart;
-  }
-
-
-  ////////////////
-  // Invokation //
-  ////////////////
-
-  #invokeDragMethodFor(type) {
-    if(!type) {
-      console.error("No drag type provided");
-      return;
-    }
-    let capitalizedType = type.charAt(0).toUpperCase() + type.slice(1);
-
-    if (this[`drag${capitalizedType}`]) {
-      this[`drag${capitalizedType}`]();
-    } else {
-      console.error(`No drag method found for type: ${type}`);
-    }
-  }
-
-  /////////////
-  // Helpers //
-  /////////////
-
-  static CLIP_SCALES = [
-    { max: 40, clipSize: 60 },
-    { max: 50, clipSize: 30 },
-    { max: 150, clipSize: 15 },
-    { max: 280, clipSize: 5 },
-    { max: Infinity, clipSize: 1}
-  ]
-
-  setClipSize(scale) {
-    this.clipSize = this.constructor.CLIP_SCALES.find(range => scale < range.max)?.clipSize || 15;
-  }
-
-  #setDragEventListeners() {
-    document.addEventListener("mousemove", this.drag.bind(this));
-    document.addEventListener("mouseup", this.stopDragEvent.bind(this));
-    document.addEventListener("mouseleave", this.stopDragEvent.bind(this));
-  }
-
-  #removeDragEventListeners() {
-    document.removeEventListener("mousemove", this.drag.bind(this));
-    document.removeEventListener("mouseup", this.stopDragEvent.bind(this));
-    document.removeEventListener("mouseleave", this.stopDragEvent.bind(this));
-  }
-}
-
-// class DragState {
-//   constructor({ type, scrollFrame, target, event }) {
-//     this.type = type;
-//     this.scrollFrame = scrollFrame;
-//     this.target = target;
-//     this.event = event;
-//     this.captureOriginSnapshot();
-//   }
-
-//   captureOriginSnapshot() {
-//     this.current = this.origin;
-//   }
-
-//   captureSnapshot() {
-//     this.previous = this.current;
-    
-//   }
-// }