Added large option

kuosman · Sep 27, 2024 · 6c264be · 6c264be
1 parent ff9e3c4
commit 6c264be
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 54 deletions.
diff --git a/MMM-school-schedule.css b/MMM-school-schedule.css
diff --git a/MMM-school-schedule.js b/MMM-school-schedule.js
@@ -14,6 +14,7 @@ Module.register('MMM-school-schedule', {
     defaults: {
         updateInterval: 1 * 60 * 60 * 1000, // 1 hour
         fadeSpeed: 4000,
+        large: false,
     },
 
     requiresVersion: '2.1.0', // Required version of MagicMirror
@@ -25,7 +26,7 @@ Module.register('MMM-school-schedule', {
      * @returns {Array} styles array
      */
     getStyles: function () {
-        return [this.file('MMM-school-schedule.css')];
+        return [this.file('css/styles.css')];
     },
 
     /**
@@ -119,7 +120,8 @@ Module.register('MMM-school-schedule', {
         thead_tr_th_clock.appendChild(
             document.createTextNode(this.translate('clock'))
         );
-        thead_tr_th_clock.className = 'school-schedule-th';
+        thead_tr_th_clock.className =
+            'school-schedule-th' + self.config.large ? ' large' : '';
         thead_tr.appendChild(thead_tr_th_clock);
 
         // Create body
@@ -135,7 +137,8 @@ Module.register('MMM-school-schedule', {
                 const localeDay = weekdaysCurrentLoc[index];
                 const thead_tr_th_day = document.createElement('th');
 
-                thead_tr_th_day.className = 'school-schedule-th';
+                thead_tr_th_day.className =
+                    'school-schedule-th' + self.config.large ? ' large' : '';
                 thead_tr_th_day.appendChild(
                     document.createTextNode(localeDay.toUpperCase())
                 );
@@ -147,7 +150,9 @@ Module.register('MMM-school-schedule', {
         times.forEach((t, i) => {
             const tbody_tr = document.createElement('tr');
             const tbody_tr_td = document.createElement('td');
-            tbody_tr_td.className = 'school-schedule-td bright';
+            tbody_tr_td.className =
+                'school-schedule-td' +
+                (self.config.large ? ' large bright' : ' bright');
             tbody_tr_td.appendChild(document.createTextNode(t.toUpperCase()));
             tbody_tr.appendChild(tbody_tr_td);
 
@@ -159,7 +164,9 @@ Module.register('MMM-school-schedule', {
                     const tbody_tr_td_day = document.createElement('td');
                     const activeClass = lowerCaseDay === dow ? 'active' : '';
                     tbody_tr_td_day.className =
-                        'school-schedule-td bright ' + activeClass;
+                        'school-schedule-td' +
+                        (self.config.large ? ' large bright ' : ' bright ') +
+                        activeClass;
                     tbody_tr_td_day.appendChild(document.createTextNode(text));
                     tbody_tr.appendChild(tbody_tr_td_day);
                 }

diff --git a/README.md b/README.md
@@ -35,7 +35,8 @@ modules: [
 					to: '2023-05-18 16:00:00' // valid to
 				}
 			}],
-			updateInterval: 1 * 60 * 60 * 1000 // every hour
+			updateInterval: 1 * 60 * 60 * 1000, // every hour
+			large: false
 		}
 	}]
 ```
@@ -50,3 +51,4 @@ The following properties can be configured:
 | `schedules`					| Schedules Array of Schedule Object(s), contains `times`, `days` keys and optionally also `valid` Object with optional `from` and/or `to` keys.
 |								| Schedule Object: <table><tr><td>`times`</td><td>Times String array</td></tr><tr><td>`days`</td><td>Days keys and String array of lessons. Days can be `mo`, `tu`, `we `, `th`, `fr`, `sa` or `su`. And value is Array of lessons (same length. than times Array)</td></tr><tr><td>`valid`</td><td>When schedule is valid. Object contains `from` or `to` keys or both `from` and `to` keys. <table><tr><td>`from`</td><td>Optional start time when schelude is valid, format `yyyy-mm-dd hh:mm:ss`</td></tr><tr><td>`to`</td><td>Optional end time when schelude is valid, format `yyyy-mm-dd hh:mm:ss`</td></tr></table></td></table>
 | `updateInterval`				| Update interval in milliseconds, default `1800000`
+| `large`						| `false` 							|  Need to use larger experience ?
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,49 @@
+table.school-schedule-table {
+  border-collapse: collapse;
+  margin: 25px 0;
+  font-size: 14px;
+  font-family: sans-serif;
+  border: 1px solid #fff;
+}
+table.school-schedule-table thead tr {
+  background-color: #fff;
+  color: #000000;
+  text-align: left;
+}
+table.school-schedule-table .school-schedule-th,
+table.school-schedule-table .school-schedule-td {
+  padding: 6px 6px;
+  text-align: center;
+  font-size: 16px;
+  font-family: var(--font-primary), sans-serif;
+  font-weight: 300;
+  line-height: 1.25;
+  width: 85px;
+}
+table.school-schedule-table .school-schedule-th.large,
+table.school-schedule-table .school-schedule-td.large {
+  font-size: 32px;
+  width: 110px;
+}
+table.school-schedule-table th:first-child,
+table.school-schedule-table td:first-child {
+  width: 100px;
+}
+table.school-schedule-table th:first-child.large,
+table.school-schedule-table td:first-child.large {
+  width: 180px;
+}
+table.school-schedule-table .school-schedule-th {
+  font-weight: 600;
+}
+table.school-schedule-table th, table.school-schedule-table td {
+  border-left: 1px solid rgba(255, 255, 255, 0.5);
+}
+table.school-schedule-table tbody tr {
+  border-bottom: 1px solid #dddddd;
+  background-color: #000000;
+}
+table.school-schedule-table td.active {
+  font-weight: bold;
+  background-color: rgb(30, 24, 66);
+}/*# sourceMappingURL=styles.css.map */
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/css/styles.scss b/css/styles.scss
@@ -0,0 +1,58 @@
+table.school-schedule-table {
+    border-collapse: collapse;
+    margin: 25px 0;
+    font-size: 14px;
+    font-family: sans-serif;
+    border: 1px solid #fff;
+
+    thead tr {
+        background-color: #fff;
+        color: #000000;
+        text-align: left;
+    }
+
+    .school-schedule-th,
+    .school-schedule-td {
+        padding: 6px 6px;
+        text-align: center;
+        font-size: 16px;
+        font-family: var(--font-primary), sans-serif;
+        font-weight: 300;
+        line-height: 1.25;
+        width: 85px;
+
+        &.large {
+            font-size: 32px;
+            width: 110px;
+        }
+    }
+
+    th:first-child,
+    td:first-child {
+        width: 100px;
+
+        &.large {
+            width: 180px;
+        }
+    }
+
+    .school-schedule-th {
+        font-weight: 600;
+    }
+
+    th, td {
+        border-left: 1px solid rgba(255,255,255,0.5);
+    }
+
+    tbody tr {
+        border-bottom: 1px solid #dddddd;
+        background-color: #000000;
+    }
+
+    td.active {
+        font-weight: bold;
+        background-color: rgb(30, 24, 66);
+    }
+}
+
+