Start to show presence

assets/js/pages/groups/pages/presence.js

@@ -17,6 +17,76 @@ class GroupPresencePage {
         const presence = await ForezPresenceHelper.GetList(group.id);
         const users = await getUsers([...new Set(presence.map(e => e.userID))]);
 
-        console.error(presence, users)
+        // Load template
+		const tpl = await Page.loadHTMLTemplate("pages/groups/pages/presence.html");
+		const el = document.createElement("div")
+		el.innerHTML = tpl;
+		target.appendChild(el);
+
+
+        Vue.createApp({
+            
+            data: () => {
+                return {
+                   
+                }
+            },
+
+            methods: {
+            }
+
+        }).mount(el);
+
+        
+        const calEvents = presence.map((e) => {
+            return {
+                title: users.get(e.userID).fullName,
+                start: new Date(e.year, e.month - 1, e.day),
+                backgroundColor: "#0073b7", //Blue
+                borderColor: "#0073b7", //Blue
+                editable: false,
+                allDay: true
+            }
+        })
+
+        $(el.getElementsByClassName("calendar")).fullCalendar({
+            header: {
+            },
+            buttonText: {
+              today: 'today',
+              month: 'month',
+              week: 'week',
+              day: 'day'
+            },
+            //Random default events
+            events: calEvents,
+            editable: true,
+            droppable: true, // this allows things to be dropped onto the calendar !!!
+            drop: function (date, allDay) { // this function is called when something is dropped
+      
+              // retrieve the dropped element's stored Event Object
+              var originalEventObject = $(this).data('eventObject');
+      
+              // we need to copy it, so that multiple events don't have a reference to the same object
+              var copiedEventObject = $.extend({}, originalEventObject);
+      
+              // assign it the date that was reported
+              copiedEventObject.start = date;
+              copiedEventObject.allDay = allDay;
+              copiedEventObject.backgroundColor = $(this).css("background-color");
+              copiedEventObject.borderColor = $(this).css("border-color");
+      
+              // render the event on the calendar
+              // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
+              $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
+      
+              // is the "remove after drop" checkbox checked?
+              if ($('#drop-remove').is(':checked')) {
+                // if so, remove the element from the "Draggable Events" list
+                $(this).remove();
+              }
+      
+            }
+          });
     }
 }

assets/templates/pages/groups/pages/presence.html

@@ -0,0 +1,15 @@
+<!-- Groups presence page -->
+<div class="row group-page about-group-page">
+    <div class="col-md-6">
+        <div class="box box-primary">
+            <div class="box-header">
+                <h3 class="box-title">tr("Presence in Forez")</h3>
+            </div>
+            <div class="box-body">
+
+                <div class="calendar"></div>
+                
+            </div>
+        </div>
+    </div>
+</div>

system/config/dev.config.php

@@ -78,6 +78,9 @@ class Dev {
 
 		// Color picker
 		"3rdparty/adminLTE/plugins/colorpicker/bootstrap-colorpicker.min.css",
+
+		// Calendar
+		"3rdparty/adminLTE/plugins/fullcalendar/fullcalendar.min.css",
 	);
 
 	/**
@@ -176,6 +179,10 @@ class Dev {
 
 		// Color picker
 		"3rdparty/adminLTE/plugins/colorpicker/bootstrap-colorpicker.min.js",
+
+		// Calendar
+		"3rdparty/adminLTE/plugins/moment.js/moment.min.js",
+		"3rdparty/adminLTE/plugins/fullcalendar/fullcalendar.min.js",
 	);
 
 	/**