frappe / gantt

Open Source Javascript Gantt
https://frappe.io/gantt
MIT License
4.6k stars 1.02k forks source link

[Feature Request] Highlight curret time in Quarter Day and Half Day view modes #405

Open vipperxvr opened 2 months ago

vipperxvr commented 2 months ago

First I would like to thank everyone for this great project.

Please would you create a vertical line to highlight the current time in the Quarter Day and Half Day view modes ?

Thanks in advance.

vipperxvr commented 2 months ago

First time with javascript, I did the following:

Created the function below in index.js

  make_grid_current_time(view_mode) {
    let tick_x = 0;
    let tick_y = this.options.header_height + this.options.padding / 2;
    let tick_height = (this.options.bar_height + this.options.padding) * this.tasks.length;
    let $current_time = createSVG("g", { class: 'current_time', append_to: this.layers.grid });

    let today = date_utils.today();
    for (let date of this.dates) {
      if (date.toString() === today.toString()) {
        let current_time_class = "current-time";
        let day_columns = 1;
        if (view_mode === VIEW_MODE.HOUR) {
          day_columns = 24;
        }
        if (view_mode === VIEW_MODE.QUARTER_DAY) {
          day_columns = 4;
        }
        if (view_mode === VIEW_MODE.HALF_DAY) {
          day_columns = 2;
        }
        let tick_secs = (this.options.column_width * day_columns) / 86400;
        let timestamp = Math.floor(new Date().getTime()) / 1000;
        let today_timestamp = Math.floor(new Date(today).getTime()) / 1000;
        let today_secs = timestamp - today_timestamp;
        tick_x += today_secs * tick_secs;

        createSVG("path", {
          d: `M ${tick_x} ${tick_y} v ${tick_height}`,
          class: current_time_class,
          append_to: this.layers.grid,
        });
        return;
      }
      tick_x += this.options.column_width;
    }
  }

And call it on make_grid_extras();

  make_grid_extras() {
    this.make_grid_highlights();
    this.make_grid_ticks();
    this.make_grid_current_time(this.options.view_mode);
  }

Worked on modes Hour, Day, Quarter Day and Half Day (Weed, Month and Year didn't have the date array) but in Half Day it is showing on 12 instead of 00. The code logic is the same, so looks like there is a problem in this view mode.

image

image

Almost forget to add the CSS:

        .gantt .current-time {
            stroke: red;
            stroke-width: 1px;
        }
DavidHernandez commented 1 month ago

It would be great if we could highlight today in the rest of view modes. This would make the solution provided in this comment work for all the view modes: https://github.com/frappe/gantt/issues/112#issuecomment-1431341918

vipperxvr commented 1 month ago

I implemented the current hour highlight, there is a highlight for today on Day and Week view modes.

image

image