group letters by day

The letters are now grouped by the creation day and wrapped around a orientation marker.

Author: TamaroWalter

classes/contentcontroller.php

@@ -39,7 +39,15 @@ class contentcontroller {
     /** @var array events that are relevant for the townsquare */
     public array $events;
 
-    /** @var array letters and other content that will be shown to the user */
+    /** @var array stores the letters in objects with the day the letters are from.
+     * The content is structured in a way that mustache can parse it easily:
+     *
+     * ['Y-m-d'] => {
+     *     string $day: 'Y-m-d;
+     *     array $letters: key => $letterobject
+     * }
+     * At the end, the array is normalized with array_values so mustache can iterate over it.
+     */
     public array $content;
 
     /** @var array courses that show content in townsquare (not the same as enrolled courses) */
@@ -66,13 +74,14 @@ public function build_content(): array {
 
         $index = 0;
         $appearedcourses = [];
+
         // Build a letter for each event.
         foreach ($this->events as $event) {
             match ($event->eventtype) {
-                'post' => $templetter = new local\letter\post_letter($index, $event),
-                'expectcompletionon' => $templetter = new local\letter\activitycompletion_letter($index, $event),
+                'post' => $templetter = new local\letter\post_letter($index++, $event),
+                'expectcompletionon' => $templetter = new local\letter\activitycompletion_letter($index++, $event),
                 default => $templetter = new local\letter\letter(
-                    $index,
+                    $index++,
                     $event->courseid,
                     $event->modulename,
                     $event->instancename,
@@ -82,17 +91,30 @@ public function build_content(): array {
                 ),
             };
             $templetter = $templetter->export_letter();
-            $this->content[$index] = $templetter;
+
+            // Group the letters by its day.
+            $day = date('d.m.Y', $templetter['createdtimestamp']);
+            if (!isset($this->content[$day])) {
+                $this->content[$day] = (object) [
+                    'day' => $day,
+                    'letters' => [],
+                ];
+                $tempcontent = new orientation_marker($index++, $day);
+                $this->content[$day]->letters[] = $tempcontent->export_data();
+
+            }
+            $this->content[$day]->letters[] = $templetter;
 
             // Collect the courses shown in the townsquare to be able to filter them afterwards.
-            if (!array_key_exists($this->content[$index]['courseid'], $appearedcourses)) {
-                $this->courses[] = ['courseid' => $this->content[$index]['courseid'],
-                                    'coursename' => $this->content[$index]['coursename'], ];
+            if (!array_key_exists($templetter['courseid'], $appearedcourses)) {
+                $this->courses[] = [
+                    'courseid' => $templetter['courseid'],
+                    'coursename' => $templetter['coursename'],
+                ];
                 $appearedcourses[$event->courseid] = true;
             }
-            $index++;
         }
-        return $this->content;
+        return array_values($this->content);
     }
 
     // Getter.

classes/orientation_marker.php

@@ -15,7 +15,7 @@
 // along with Moodle.  If not, see <https://www.gnu.org/licenses/>.
 
 /**
- * Class to show information to the user
+ * Class to show information to the user.
  *
  * @package     block_townsquare
  * @copyright   2023 Tamaro Walter
@@ -30,7 +30,7 @@
 require_once($CFG->dirroot . '/blocks/townsquare/locallib.php');
 
 /**
- * Class that represent a orientation marker.
+ * Class that represent an orientation marker.
  *
  * @package     block_townsquare
  * @copyright   2023 Tamaro Walter
@@ -42,8 +42,8 @@ class orientation_marker {
     /** @var int an ID to identify every content in townsquare */
     private int $contentid;
 
-    /** @var int The timestamp of the current day. */
-    private int $today;
+    /** @var string The day of the letters group  */
+    private string $date;
 
     /** @var bool variable for the mustache template */
     public bool $isorientationmarker = true;
@@ -54,11 +54,11 @@ class orientation_marker {
      * Constructor for a letter
      *
      * @param int $contentid The ID to identify the orientation marker
-     * @param int $time      A Timestamp of the time that the orientation marker is created
+     * @param string $time      A Timestamp of the time that the orientation marker is created
      */
-    public function __construct(int $contentid, int $time) {
+    public function __construct(int $contentid, string $time) {
         $this->contentid = $contentid;
-        $this->today = $time;
+        $this->date = $time;
     }
 
     // Functions.
@@ -68,14 +68,10 @@ public function __construct(int $contentid, int $time) {
      * @return array
      */
     public function export_data(): array {
-        // Change the timestamp to a date.
-        $date = date('d.m.Y', $this->today);
-
         return [
             'contentid' => $this->contentid,
-            'date' => $date,
+            'date' => $this->date,
             'isorientationmarker' => $this->isorientationmarker,
-            'orientationmarkercolor' => block_townsquare_get_colorsetting('orientationmarker'),
         ];
     }
 }

locallib.php

@@ -35,7 +35,6 @@ function block_townsquare_get_colorsetting(string $lettertype): string {
         'basicletter' => get_config('block_townsquare', 'basiclettercolor'),
         'postletter' => get_config('block_townsquare', 'postlettercolor'),
         'completionletter' => get_config('block_townsquare', 'completionlettercolor'),
-        'orientationmarker' => get_config('block_townsquare', 'orientationmarkercolor'),
         default => throw new moodle_exception('invalidlettertype', 'block_townsquare'),
     };
 }

settings.php

@@ -65,12 +65,4 @@
         get_string('configcompletionlettercolor', 'block_townsquare'),
         BLOCK_TOWNSQUARE_COMPLETIONLETTER_DEFAULTCOLOR
     ));
-
-    // Color setting for the orientation marker.
-    $settings->add(new admin_setting_configcolourpicker(
-        'block_townsquare/orientationmarkercolor',
-        get_string('orientationmarkercolor', 'block_townsquare'),
-        get_string('configorientationmarkercolor', 'block_townsquare'),
-        BLOCK_TOWNSQUARE_ORIENTATIONMARKER_DEFAULTCOLOR
-    ));
 }

styles.css

@@ -44,7 +44,7 @@
         "completionlettercolor": "#ca3120"
     }
 }}
-<div class="townsquare_letter completionletter card mb-3" id="content-nr-{{contentid}}"
+<div class="townsquare_letter completionletter card mb-3 ml-3" id="content-nr-{{contentid}}"
      style="border-color: {{completionlettercolor}}">
     <div class="townsquareletter_header completionletter_header card-header" style="background-color: {{completionlettercolor}}">
         <div class = "townsquareletter_top completionletter_top">

templates/activitycompletionletter.mustache

@@ -45,7 +45,7 @@
           "basiclettercolor": "#0f6cbf"
     }
 }}
-<div class="townsquare_letter basicletter card mb-3" id="content-nr-{{contentid}}" style="border-color: {{basiclettercolor}}">
+<div class="townsquare_letter basicletter card mb-3 ml-3" id="content-nr-{{contentid}}" style="border-color: {{basiclettercolor}}">
     <div class="townsquareletter_header basicletter_header card-header" style="background-color: {{basiclettercolor}}">
         <div class = "townsquareletter_top basicletter_top">
             <div class = "townsquareletter_course basicletter_course" data-courseid="{{courseid}}" id="ts_letter_course_{{courseid}}">

templates/basicletter.mustache

@@ -88,6 +88,7 @@
         <div class=" col-md-9 townsquare_content">
             <div class="townsquare_letters">
                 {{#content}}
+                    {{#letters}}
                         {{#isorientationmarker}}
                             {{> block_townsquare/orientationmarker}}
                         {{/isorientationmarker}}
@@ -100,6 +101,7 @@
                         {{#ispost}}
                             {{> block_townsquare/postletter}}
                         {{/ispost}}
+                    {{/letters}}
                 {{/content}}
             </div>
         </div>

templates/blockcontent.mustache

@@ -31,8 +31,10 @@
         "orientationmarkercolor": "#6a737b"
     }
 }}
-<div class="orientationmarker card mb-3" id="content-nr-{{contentid}}"
-     style="border-color: {{orientationmarkercolor}}; background-color: {{orientationmarkercolor}};">
-    <div class="orientationmarker_body card-body">
+<div class="orientationmarker" id="content-nr-{{contentid}}">
+    <div class="orientationmarker_body">
+        <span class="orientationmarker_date">{{date}}</span>
+        <span class="orientationmarker_line" aria-hidden="true"></span>
+        <i class="orientationmarker_arrow fa fa-chevron-down ml-3 mr-2"></i>
     </div>
 </div>

templates/orientationmarker.mustache

@@ -57,7 +57,7 @@
         "postlettercolor": "#f7634d"
     }
 }}
-<div class="townsquare_letter postletter card mb-3" id="content-nr-{{contentid}}" style="border-color: {{postlettercolor}}">
+<div class="townsquare_letter postletter card mb-3 ml-3" id="content-nr-{{contentid}}" style="border-color: {{postlettercolor}}">
     <div class="townsquareletter_header postletter_header card-header" style="background-color: {{postlettercolor}}">
         <div class = "townsquareletter_top postletter_top">
             <div class = "townsquareletter_course postletter_course" data-courseid="{{courseid}}" id="ts_letter_course_{{courseid}}">