remove custom modal logic

fewieden · Jan 2, 2021 · 71d039c · 71d039c
1 parent 2e0afc6
commit 71d039c
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 122 deletions.
diff --git a/MMM-soccer.css b/MMM-soccer.css
@@ -19,25 +19,11 @@
     vertical-align: middle;
 }
 
-.MMM-soccer .centered {
-    text-align: center;
+.MMM-soccer .space-between {
+    display: flex;
+    justify-content: space-between;
 }
 
-.MMM-soccer-blur {
-    -webkit-filter: blur(2px) brightness(50%);
-}
-
-.MMM-soccer .modal {
-    position: fixed;
-    text-align: left;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-
-.MMM-soccer .modal ul {
-    margin: 0;
+.MMM-soccer .centered {
+    text-align: center;
 }
diff --git a/MMM-soccer.js b/MMM-soccer.js
@@ -53,16 +53,6 @@ Module.register('MMM-soccer', {
         }
     },
 
-    /**
-     * @member {Object} modals - Stores the status of the module's modals.
-     * @property {boolean} standings - Full standings table.
-     * @property {boolean} help - List of voice commands of this module.
-     */
-    modals: {
-        standings: false,
-        help: false
-    },
-
     /**
      * @member {Object} voice - Defines the default mode and commands of this module.
      * @property {string} mode - Voice mode of this module.
@@ -129,7 +119,7 @@ Module.register('MMM-soccer', {
             this.season = payload.season;
             this.competition = payload.competition;
             this.loading = false;
-            this.updateDom();
+            this.updateDom(300);
         }
     },
 
@@ -153,8 +143,7 @@ Module.register('MMM-soccer', {
             this.checkCommands(payload);
         } else if (notification === 'VOICE_MODE_CHANGED' && sender.name === 'MMM-voice'
             && payload.old === this.voice.mode) {
-            this.closeAllModals();
-            this.updateDom(300);
+            this.sendNotification('CLOSE_MODAL');
         }
     },
 
@@ -209,59 +198,12 @@ Module.register('MMM-soccer', {
             boundaries: this.calculateTeamDisplayBoundaries(),
             competitionName: this.competition.name || this.name,
             config: this.config,
-            isModalActive: this.isModalActive(),
-            modals: this.modals,
-            season: this.season ?
-                `${this.translate('MATCHDAY')}: ${this.season.currentMatchday || 'N/A'}` : this.translate('LOADING'),
+            matchDayNumber: this.season ? this.season.currentMatchday : 'N/A',
             standing: this.standing,
-            voice: this.voice
+            loading: this.loading
         };
     },
 
-    /**
-     * @function handleModals
-     * @description Hide/show modules based on voice commands.
-     */
-    handleModals(data, modal, open, close) {
-        if (close.test(data) || (this.modals[modal] && !open.test(data))) {
-            this.closeAllModals();
-        } else if (open.test(data) || (!this.modals[modal] && !close.test(data))) {
-            this.closeAllModals();
-            this.modals[modal] = true;
-        }
-
-        const modules = document.querySelectorAll('.module');
-        for (let i = 0; i < modules.length; i += 1) {
-            if (!modules[i].classList.contains('MMM-soccer')) {
-                if (this.isModalActive()) {
-                    modules[i].classList.add('MMM-soccer-blur');
-                } else {
-                    modules[i].classList.remove('MMM-soccer-blur');
-                }
-            }
-        }
-    },
-
-    /**
-     * @function closeAllModals
-     * @description Close all modals of the module.
-     */
-    closeAllModals() {
-        const modals = Object.keys(this.modals);
-        modals.forEach((modal) => { this.modals[modal] = false; });
-    },
-
-    /**
-     * @function isModalActive
-     * @description Checks if at least one modal is active.
-     *
-     * @returns {boolean} Flag if there is an active modal.
-     */
-    isModalActive() {
-        const modals = Object.keys(this.modals);
-        return modals.some(modal => this.modals[modal] === true);
-    },
-
     /**
      * @function checkCommands
      * @description Voice command handler.
@@ -288,8 +230,7 @@ Module.register('MMM-soccer', {
                 this.sendNotification('OPEN_MODAL', {
                     template: 'templates/StandingsModal.njk',
                     data: {
-                        config: this.config,
-                        standing: this.standing,
+                        ...this.getTemplateData(),
                         fns: {
                             translate: this.translate.bind(this)
                         }

diff --git a/templates/MMM-soccer.njk b/templates/MMM-soccer.njk
@@ -1,34 +1,34 @@
-<div class="{% if isModalActive %}MMM-soccer-blur{% endif %}">
-    {% if loading %}
-        {{'LOADING' | translate}}
-    {% else %}
-        <header>{{competitionName}}</header>
-        <div class="xsmall">{{season}}</div>
-        <table class="xsmall table">
-            <thead>
-                <tr class="row">
+{% if loading %}
+    <div class="dimmed light">{{ "LOADING" | translate | safe }}</div>
+{% else %}
+    <header class="space-between">
+        <span>{{ competitionName }}</span>
+        <span>{{ "MATCHDAY" | translate({matchDayNumber: matchDayNumber}) }}</span>
+    </header>
+    <table class="xsmall table">
+        <thead>
+            <tr class="row">
+                <th></th>
+                {% if config.logos %}
                     <th></th>
+                {% endif %}
+                <th class="name">{{ "TEAM" | translate }}</th>
+                <th class="centered"><i class="fa fa-line-chart"/></th>
+                <th class="centered"><i class="fa fa-soccer-ball-o"/></th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for index in range(boundaries.firstTeam, boundaries.lastTeam) %}
+                <tr class="centered-row {% if index === boundaries.focusTeamIndex %}bright{% endif %}" style="{{ loop.index | fade(boundaries.focusTeamIndex) }}">
+                    <td>{{ standing[index].position }}</td>
                     {% if config.logos %}
-                        <th></th>
+                        <td><img class="icon {% if not config.colored %}no-color{% endif %}" src="/MMM-soccer/{{ standing[index].team.name }}.svg"/></td>
                     {% endif %}
-                    <th class="name">{{'TEAM' | translate}}</th>
-                    <th class="centered"><i class="fa fa-line-chart"/></th>
-                    <th class="centered"><i class="fa fa-soccer-ball-o"/></th>
+                    <td class="name">{{ standing[index].team.name }}</td>
+                    <td class="centered">{{ standing[index].points }}</td>
+                    <td class="centered">{{ standing[index].goalDifference }}</td>
                 </tr>
-            </thead>
-            <tbody>
-                {% for index in range(boundaries.firstTeam, boundaries.lastTeam) %}
-                    <tr class="centered-row {% if index === boundaries.focusTeamIndex %}bright{% endif %}" style="{{loop.index | fade(boundaries.focusTeamIndex)}}">
-                        <td>{{standing[index].position}}</td>
-                        {% if config.logos %}
-                            <td><img class="icon {% if not config.colored %}no-color{% endif %}" src="/MMM-soccer/{{standing[index].team.name}}.svg"/></td>
-                        {% endif %}
-                        <td class="name">{{standing[index].team.name}}</td>
-                        <td class="centered">{{standing[index].points}}</td>
-                        <td class="centered">{{standing[index].goalDifference}}</td>
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    {% endif %}
-</div>
+            {% endfor %}
+        </tbody>
+    </table>
+{% endif %}
diff --git a/templates/StandingsModal.njk b/templates/StandingsModal.njk
@@ -1,6 +1,10 @@
+<div class="space-between">
+    <span>{{ data.competitionName }}</span>
+    <span>{{ data.fns.translate("MATCHDAY", {matchDayNumber: data.matchDayNumber}) }}</span>
+</div>
 <table class="MMM-soccer standings small table">
     <thead>
-        <tr class="row">
+        <tr>
             <th></th>
             {% if data.config.logos %}
                 <th></th>

diff --git a/translations/de.json b/translations/de.json
@@ -1,9 +1,9 @@
 {
   "LOADING": "Lade...",
   "NO_DATA_AVAILABLE": "Keine Daten verfügbar!",
-  "MATCHDAY": "Spieltag",
+  "MATCHDAY": "{matchDayNumber}. Spieltag",
   "TEAM": "Mannschaft",
   "COMMAND_LIST": "Liste aller Sprachbefehle",
   "MODE": "Modus",
   "VOICE_COMMANDS": "Sprachbefehle"
-}
+}
diff --git a/translations/en.json b/translations/en.json
@@ -1,9 +1,9 @@
 {
   "LOADING": "loading...",
   "NO_DATA_AVAILABLE": "No data available!",
-  "MATCHDAY": "Matchday",
+  "MATCHDAY": "Matchday {matchDayNumber}",
   "TEAM": "Team",
   "COMMAND_LIST": "List of all Voice Commands",
   "MODE": "Mode",
   "VOICE_COMMANDS": "Voice Commands"
-}
+}
diff --git a/translations/fr.json b/translations/fr.json
@@ -1,7 +1,7 @@
 {
   "LOADING": "Chargement...",
   "NO_DATA_AVAILABLE": "Aucunes données disponibles!",
-  "MATCHDAY": "Jour de Match",
+  "MATCHDAY": "Jour de Match {matchDayNumber}",
   "TEAM": "Equipe",
   "COMMAND_LIST": "Liste de toutes les commandes vocales",
   "MODE": "Mode",

diff --git a/translations/id.json b/translations/id.json
@@ -1,9 +1,9 @@
 {
   "LOADING": "memuat...",
   "NO_DATA_AVAILABLE": "Data tidak tersedia!",
-  "MATCHDAY": "Jadwal",
+  "MATCHDAY": "Jadwal {matchDayNumber}",
   "TEAM": "Tim",
   "COMMAND_LIST": "Daftar semua Perintah Suara",
   "MODE": "Mode",
   "VOICE_COMMANDS": "Perintah Suara"
-}
+}
diff --git a/translations/sv.json b/translations/sv.json
@@ -1,7 +1,7 @@
 {
   "LOADING": "laddar...",
   "NO_DATA_AVAILABLE": "Ingen data tillänglig!",
-  "MATCHDAY": "Matchdag",
+  "MATCHDAY": "Matchdag {matchDayNumber}",
   "TEAM": "Lag",
   "COMMAND_LIST": "Lista för alla röstkommandon",
   "MODE": "Läge",