Resource total event duration widget

[peter@tjecco.com]

I am trying to add a widget in the resource header (next to the calendar resource name). Every time the duration of the event has changed or an event has been dropped inside the resource canvas, I want to update the counter. I have a problem updating html, how do I do that?

this is my code example:

{
      modeDefaults: {
        timeFormat: "HH:mm",
        view: {
          strips: {
            // A simple widget showing total planned calendar events' hours for each resource
            resourceInfo: {
              type: "widget",
              dock: "header",
              cls: "b-total-events-duration-header",
              // This method gets called when the panel is created and we return some meta data about the
              // resource, like "8h". Will be found on the Calendar
              html: "up.getSubViewTotalHoursCountHeader"
            }
          }
        }
      },
      

   validateDrag(event) {
    const calendarEvents = calendar.events;

    if (me.doIntervalsOverlap(event.eventRecord, calendarEvents)) {
      return false;
    }

    calendar.modeDefaults.view.strips.resourceInfo.html = calendar.getSubViewTotalHoursCountHeader(
      null,
      event.eventRecord.data.resourceId
    );
    return true;
  },
  
  getSubViewTotalHoursCountHeader(widget, resourceId) {
    let id = null;
    
    if (widget) {
      id = widget.owner.resourceId;
    }

    const events = calendar.events;

    if (!resourceId) {
      resourceId = id;
    }

    let totalEventsDuration = 0;

    for (const event of events) {
      if (event && event.resourceId === resourceId) {
        totalEventsDuration = totalEventsDuration + event.data.duration;
      }
    }

    if (totalEventsDuration) {
      totalEventsDuration = "--";
    }

    return `<span class="total-event-duration blue fat">${totalEventsDuration} ${App.util.Translator.translate(
      "hours_short"
    )}</span>`;
  }
}

[ghulam.ghous]

Hi Peter,

In order to update html, you will have to rerender the widget. I am going to give you a pretty basic example here. Hopefully you can build upon it:

    modeDefaults : {
        view : {
            strips : {
                resourceInfo : {
                    type : 'widget',
                    dock : 'header',
                    cls  : 'b-resource-location',
                    html : 'up.getSubViewHeader'
                }
            }
        }
    },
    

listeners : {
    dragResizeEnd : (data) => {
        calendar.resourceStore.getById(data.eventRecord.data.resourceId).count += 1;
        calendar.widgetMap.resourceInfo.html = StringHelper.xss`
        <div>
            <span>${
              calendar.resourceStore.getById(
                  data.eventRecord.data.resourceId
              ).count
            }</span>
        </div>`;
    }
},

getSubViewHeader(resource) {
    return StringHelper.xss`
        <div>
            <span>${resource.count}</span>
        </div>`;
},

Hope this helps.

Screen Recording 2023-12-08 at 4.53.56 PM.mov

(8.3 MiB) Downloaded 70 times

Regards,
Ghous

[Animal]

I wouldn't wrap it up in so many HTML elements. I'd use this:

    modeDefaults : {
        view : {
            strips : {
                resourceInfo : {
                    type : 'widget',
                    dock : 'header',
                    cls  : 'b-resource-count',
                    html : 'up.getSubViewHeader'
                }
            }
        }
    },
    
listeners : {
    dragResizeEnd : (data) => {
        const c = (calendar.resourceStore.getById(data.eventRecord.data.resourceId).count += 1);
        calendar.widgetMap.resourceInfo.html = c;
    }
},

getSubViewHeader(resource) {
    return resource.count};
},

[Animal]

But remember that calendar.widgetMap.resourceInfo would have to be unique. If you are using resource view, there would be one per subView, so you'd have to think about that.

[peter@tjecco.com]

Hi,

it works very well!

Only I need to update the counter per resource, so yes, what you (Animal) say is exactly my problem now, calendar.widgetMap.resourceInfo is not unique and only the first widget gets updated.

Does anyone have an idea how to update my widget per resource?

[Animal]

You have context in that event:

Screenshot 2023-12-11 at 15.52.45.png (673.67 KiB) Viewed 1270 times

[peter@tjecco.com]

Hi,

thank you! It works