kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 11:50:00 +00:00
Code Issues Projects Releases Wiki Activity

Cleanup nunjuck templates (#3109)

Browse Source 
Ran a linter over it (djlint) which fixed intendation and a few errors

---------

Co-authored-by: veeck <michael@veeck.de>
This commit is contained in:
Veeck 2023-09-02 22:18:57 +02:00 committed by GitHub
parent 2ad463b6c7
commit c0a5f35a00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 95 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -24,6 +24,7 @@ _This release is scheduled to be released on 2023-10-01._
- Replace pretty-quick by lint-staged (<https://github.com/azz/pretty-quick/issues/164>) - Replace pretty-quick by lint-staged (<https://github.com/azz/pretty-quick/issues/164>)
- Update engine node >=18. v16 reached it's end of life. (#3170) - Update engine node >=18. v16 reached it's end of life. (#3170)
- Update typescript definition for modules - Update typescript definition for modules
- Cleaned up nunjuck templates
### Fixed ### Fixed

26
modules/default/alert/templates/alert.njk
View File

@ -1,18 +1,20 @@
{% if imageUrl or imageFA %} {% if imageUrl or imageFA %}
{% set imageHeight = imageHeight if imageHeight else "80px" %} {% set imageHeight = imageHeight if imageHeight else "80px" %}
{% if imageUrl %} {% if imageUrl %}
<img src="{{ imageUrl }}" height="{{ imageHeight }}" style="margin-bottom: 10px;"/> <img src="{{ imageUrl }}"
{% else %} height="{{ imageHeight }}"
<span class="bright fas fa-{{ imageFA }}" style='margin-bottom: 10px; font-size: {{ imageHeight }};'/></span> style="margin-bottom: 10px" />
{% endif %} {% else %}
<br/> <span class="bright fas fa-{{ imageFA }}"
style="margin-bottom: 10px;
font-size: {{ imageHeight }}"></span>
{% endif %}
<br />
{% endif %} {% endif %}
{% if title %} {% if title %}
<span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span> <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
{% endif %} {% endif %}
{% if message %} {% if message %}
{% if title %} {% if title %}<br />{% endif %}
<br/> <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
{% endif %}
<span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
{% endif %} {% endif %}

8
modules/default/alert/templates/notification.njk
View File

@ -1,9 +1,7 @@
{% if title %} {% if title %}
<span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span> <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
{% endif %} {% endif %}
{% if message %} {% if message %}
{% if title %} {% if title %}<br />{% endif %}
<br/> <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
{% endif %}
<span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
{% endif %} {% endif %}

2
modules/default/helloworld/helloworld.njk
View File

@ -2,4 +2,4 @@
Use ` | safe` to allow html tages within the text string. Use ` | safe` to allow html tages within the text string.
https://mozilla.github.io/nunjucks/templating.html#autoescaping https://mozilla.github.io/nunjucks/templating.html#autoescaping
--> -->
<div>{{text | safe}}</div> <div>{{ text | safe }}</div>

2
modules/default/newsfeed/fullarticle.njk
View File

@ -1,3 +1,3 @@
<div> <div>
<iframe class="newsfeed-fullarticle" src="{{ url }}"></iframe> <iframe class="newsfeed-fullarticle" src="{{ url }}"></iframe>
</div> </div>

64
modules/default/newsfeed/newsfeed.njk
View File

@ -1,27 +1,31 @@
{% macro escapeText(text, dangerouslyDisableAutoEscaping=false) %} {% macro escapeText(text, dangerouslyDisableAutoEscaping=false) %}
{% if dangerouslyDisableAutoEscaping %} {% if dangerouslyDisableAutoEscaping -%}
{{ text | safe}} {{ text | safe }}
{% else %} {%- else -%}
{{ text }} {{ text }}
{% endif %} {%- endif %}
{% endmacro %} {% endmacro %}
{% macro escapeTitle(title, url, dangerouslyDisableAutoEscaping=false, showTitleAsUrl=false) %} {% macro escapeTitle(title, url, dangerouslyDisableAutoEscaping=false, showTitleAsUrl=false) %}
{% if dangerouslyDisableAutoEscaping %} {% if dangerouslyDisableAutoEscaping %}
{% if showTitleAsUrl %} {% if showTitleAsUrl %}
<a href="{{ url }}" style="text-decoration:none;color:#ffffff" target="_blank">{{ title | safe }}</a> <a href="{{ url }}"
style="text-decoration:none;
color:#ffffff"
target="_blank">{{ title | safe }}</a>
{% else %}
{{ title | safe }}
{% endif %}
{% else %} {% else %}
{{ title | safe}} {% if showTitleAsUrl %}
<a href="{{ url }}"
style="text-decoration:none;
color:#ffffff"
target="_blank">{{ title }}</a>
{% else %}
{{ title }}
{% endif %}
{% endif %} {% endif %}
{% else %}
{% if showTitleAsUrl %}
<a href="{{ url }}" style="text-decoration:none;color:#ffffff" target="_blank">{{ title }}</a>
{% else %}
{{ title }}
{% endif %}
{% endif %}
{% endmacro %} {% endmacro %}
{% if loaded %} {% if loaded %}
{% if config.showAsList %} {% if config.showAsList %}
<ul class="newsfeed-list"> <ul class="newsfeed-list">
@ -30,11 +34,9 @@
{% if (config.showSourceTitle and item.sourceTitle) or config.showPublishDate %} {% if (config.showSourceTitle and item.sourceTitle) or config.showPublishDate %}
<div class="newsfeed-source light small dimmed"> <div class="newsfeed-source light small dimmed">
{% if item.sourceTitle and config.showSourceTitle %} {% if item.sourceTitle and config.showSourceTitle %}
{{ item.sourceTitle }}{% if config.showPublishDate %}, {% else %}: {% endif %} {{ item.sourceTitle }}{% if config.showPublishDate %}, {% else %}:{% endif %}
{% endif %}
{% if config.showPublishDate %}
{{ item.publishDate }}:
{% endif %} {% endif %}
{% if config.showPublishDate %}{{ item.publishDate }}:{% endif %}
</div> </div>
{% endif %} {% endif %}
<div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}"> <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
@ -43,7 +45,7 @@
{% if config.showDescription %} {% if config.showDescription %}
<div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}"> <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
{% if config.truncDescription %} {% if config.truncDescription %}
{{ escapeText(item.description | truncate(config.lengthDescription), config.dangerouslyDisableAutoEscaping) }} {{ escapeText(item.description | truncate(config.lengthDescription) , config.dangerouslyDisableAutoEscaping) }}
{% else %} {% else %}
{{ escapeText(item.description, config.dangerouslyDisableAutoEscaping) }} {{ escapeText(item.description, config.dangerouslyDisableAutoEscaping) }}
{% endif %} {% endif %}
@ -57,11 +59,9 @@
{% if (config.showSourceTitle and sourceTitle) or config.showPublishDate %} {% if (config.showSourceTitle and sourceTitle) or config.showPublishDate %}
<div class="newsfeed-source light small dimmed"> <div class="newsfeed-source light small dimmed">
{% if sourceTitle and config.showSourceTitle %} {% if sourceTitle and config.showSourceTitle %}
{{ escapeText(sourceTitle, config.dangerouslyDisableAutoEscaping) }}{% if config.showPublishDate %}, {% else %}: {% endif %} {{ escapeText(sourceTitle, config.dangerouslyDisableAutoEscaping) }}{% if config.showPublishDate %}, {% else %}:{% endif %}
{% endif %}
{% if config.showPublishDate %}
{{ publishDate }}:
{% endif %} {% endif %}
{% if config.showPublishDate %}{{ publishDate }}:{% endif %}
</div> </div>
{% endif %} {% endif %}
<div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}"> <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
@ -70,7 +70,7 @@
{% if config.showDescription %} {% if config.showDescription %}
<div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}"> <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
{% if config.truncDescription %} {% if config.truncDescription %}
{{ escapeText(description | truncate(config.lengthDescription), config.dangerouslyDisableAutoEscaping) }} {{ escapeText(description | truncate(config.lengthDescription) , config.dangerouslyDisableAutoEscaping) }}
{% else %} {% else %}
{{ escapeText(description, config.dangerouslyDisableAutoEscaping) }} {{ escapeText(description, config.dangerouslyDisableAutoEscaping) }}
{% endif %} {% endif %}
@ -79,15 +79,11 @@
</div> </div>
{% endif %} {% endif %}
{% elseif empty %} {% elseif empty %}
<div class="small dimmed"> <div class="small dimmed">{{ "NEWSFEED_NO_ITEMS" | translate | safe }}</div>
{{ "NEWSFEED_NO_ITEMS" | translate | safe }}
</div>
{% elseif error %} {% elseif error %}
<div class="small dimmed"> <div class="small dimmed">
{{ "MODULE_CONFIG_ERROR" | translate({MODULE_NAME: "Newsfeed", ERROR: error}) | safe }} {{ "MODULE_CONFIG_ERROR" | translate({MODULE_NAME: "Newsfeed", ERROR: error}) | safe }}
</div> </div>
{% else %} {% else %}
<div class="small dimmed"> <div class="small dimmed">{{ "LOADING" | translate | safe }}</div>
{{ "LOADING" | translate | safe }}
</div>
{% endif %} {% endif %}

2
modules/default/newsfeed/oldconfig.njk
View File

@ -1,3 +1,3 @@
<div class="small bright"> <div class="small bright">
{{ "MODULE_CONFIG_CHANGED" | translate({MODULE_NAME: "Newsfeed"}) | safe }} {{ "MODULE_CONFIG_CHANGED" | translate({MODULE_NAME: "Newsfeed"}) | safe }}
</div> </div>

26
modules/default/updatenotification/updatenotification.njk
View File

@ -1,15 +1,15 @@
{% if not suspended %} {% if not suspended %}
{% for name, status in moduleList %} {% for name, status in moduleList %}
<div class="small bright"> <div class="small bright">
<i class="fas fa-exclamation-circle"></i> <i class="fas fa-exclamation-circle"></i>
<span> <span>
{% set mainTextLabel = "UPDATE_NOTIFICATION" if name === "MagicMirror" else "UPDATE_NOTIFICATION_MODULE" %} {% set mainTextLabel = "UPDATE_NOTIFICATION" if name === "MagicMirror" else "UPDATE_NOTIFICATION_MODULE" %}
{{ mainTextLabel | translate({MODULE_NAME: name}) }} {{ mainTextLabel | translate({MODULE_NAME: name}) }}
</span> </span>
</div> </div>
<div class="xsmall dimmed"> <div class="xsmall dimmed">
{% set subTextLabel = "UPDATE_INFO_SINGLE" if status.behind === 1 else "UPDATE_INFO_MULTIPLE" %} {% set subTextLabel = "UPDATE_INFO_SINGLE" if status.behind === 1 else "UPDATE_INFO_MULTIPLE" %}
{{ subTextLabel | translate({COMMIT_COUNT: status.behind, BRANCH_NAME: status.current}) | diffLink(status) | safe }} {{ subTextLabel | translate({COMMIT_COUNT: status.behind, BRANCH_NAME: status.current}) | diffLink(status) | safe }}
</div> </div>
{% endfor %} {% endfor %}
{% endif %} {% endif %}

36
modules/default/weather/current.njk
View File

@ -7,7 +7,8 @@
{% if config.showWindDirection %} {% if config.showWindDirection %}
<sup> <sup>
{% if config.showWindDirectionAsArrow %} {% if config.showWindDirectionAsArrow %}
<i class="fas fa-long-arrow-alt-down" style="transform:rotate({{ current.windFromDirection }}deg);"></i> <i class="fas fa-long-arrow-alt-down"
style="transform:rotate({{ current.windFromDirection }}deg)"></i>
{% else %} {% else %}
{{ current.cardinalWindDirection() | translate }} {{ current.cardinalWindDirection() | translate }}
{% endif %} {% endif %}
@ -29,34 +30,28 @@
</span> </span>
{% endif %} {% endif %}
{% if config.showUVIndex %} {% if config.showUVIndex %}
<td class="align-right bright uv-index"> <td class="align-right bright uv-index">
<div class="wi dimmed wi-hot"></div> <div class="wi dimmed wi-hot"></div>
{{ current.uv_index }} {{ current.uv_index }}
</td> </td>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
<div class="large light"> <div class="large light">
<span class="wi weathericon wi-{{current.weatherType}}"></span> <span class="wi weathericon wi-{{ current.weatherType }}"></span>
<span class="bright"> <span class="bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}
</span>
</div> </div>
<div class="normal light indoor"> <div class="normal light indoor">
{% if config.showIndoorTemperature and indoor.temperature %} {% if config.showIndoorTemperature and indoor.temperature %}
<div> <div>
<span class="fas fa-home"></span> <span class="fas fa-home"></span>
<span class="bright"> <span class="bright">{{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
{{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}
</span>
</div> </div>
{% endif %} {% endif %}
{% if config.showIndoorHumidity and indoor.humidity %} {% if config.showIndoorHumidity and indoor.humidity %}
<div> <div>
<span class="fas fa-tint"></span> <span class="fas fa-tint"></span>
<span class="bright"> <span class="bright">{{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}</span>
{{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}
</span>
</div> </div>
{% endif %} {% endif %}
</div> </div>
@ -65,14 +60,16 @@
{% if config.showFeelsLike %} {% if config.showFeelsLike %}
<span class="dimmed"> <span class="dimmed">
{{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }} {{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }}
</span><br/> </span>
<br />
{% endif %} {% endif %}
{% if config.showPrecipitationAmount and current.precipitationAmount %} {% if config.showPrecipitationAmount and current.precipitationAmount %}
<span class="dimmed"> <span class="dimmed">
<span class="precipitationLeadText">{{ "PRECIP_AMOUNT" | translate }}</span> {{ current.precipitationAmount | unit("precip", current.precipitationUnits) }} <span class="precipitationLeadText">{{ "PRECIP_AMOUNT" | translate }}</span> {{ current.precipitationAmount | unit("precip", current.precipitationUnits) }}
</span><br/> </span>
<br />
{% endif %} {% endif %}
{% if config.showPrecipitationProbability and current.precipitationProbability %} {% if config.showPrecipitationProbability and current.precipitationProbability %}
<span class="dimmed"> <span class="dimmed">
<span class="precipitationLeadText">{{ "PRECIP_POP" | translate }}</span> {{ current.precipitationProbability }}% <span class="precipitationLeadText">{{ "PRECIP_POP" | translate }}</span> {{ current.precipitationProbability }}%
</span> </span>
@ -80,10 +77,7 @@
</div> </div>
{% endif %} {% endif %}
{% else %} {% else %}
<div class="dimmed light small"> <div class="dimmed light small">{{ "LOADING" | translate }}</div>
{{ "LOADING" | translate }}
</div>
{% endif %} {% endif %}
<!-- Uncomment the line below to see the contents of the `current` object. --> <!-- Uncomment the line below to see the contents of the `current` object. -->
<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{current | dump}}</div> --> <!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{current | dump}}</div> -->

16
modules/default/weather/forecast.njk
View File

@ -7,15 +7,18 @@
{% endif %} {% endif %}
{% set forecast = forecast.slice(0, numSteps) %} {% set forecast = forecast.slice(0, numSteps) %}
{% for f in forecast %} {% for f in forecast %}
<tr {% if config.colored %}class="colored"{% endif %} {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}> <tr {% if config.colored %}class="colored"{% endif %}
{% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
{% if (currentStep == 0) and config.ignoreToday == false and config.absoluteDates == false %} {% if (currentStep == 0) and config.ignoreToday == false and config.absoluteDates == false %}
<td class="day">{{ "TODAY" | translate }}</td> <td class="day">{{ "TODAY" | translate }}</td>
{% elif (currentStep == 1) and config.ignoreToday == false and config.absoluteDates == false %} {% elif (currentStep == 1) and config.ignoreToday == false and config.absoluteDates == false %}
<td class="day">{{ "TOMORROW" | translate }}</td> <td class="day">{{ "TOMORROW" | translate }}</td>
{% else %} {% else %}
<td class="day">{{ f.date.format('ddd') }}</td> <td class="day">{{ f.date.format("ddd") }}</td>
{% endif %} {% endif %}
<td class="bright weather-icon"><span class="wi weathericon wi-{{ f.weatherType }}"></span></td> <td class="bright weather-icon">
<span class="wi weathericon wi-{{ f.weatherType }}"></span>
</td>
<td class="align-right bright max-temp"> <td class="align-right bright max-temp">
{{ f.maxTemperature | roundValue | unit("temperature") | decimalSymbol }} {{ f.maxTemperature | roundValue | unit("temperature") | decimalSymbol }}
</td> </td>
@ -29,7 +32,7 @@
{% endif %} {% endif %}
{% if config.showPrecipitationProbability %} {% if config.showPrecipitationProbability %}
<td class="align-right bright precipitation-prob"> <td class="align-right bright precipitation-prob">
{{ f.precipitationProbability | unit("precip", "%") }} {{ f.precipitationProbability | unit('precip', '%') }}
</td> </td>
{% endif %} {% endif %}
{% if config.showUVIndex %} {% if config.showUVIndex %}
@ -43,10 +46,7 @@
{% endfor %} {% endfor %}
</table> </table>
{% else %} {% else %}
<div class="dimmed light small"> <div class="dimmed light small">{{ "LOADING" | translate }}</div>
{{ "LOADING" | translate }}
</div>
{% endif %} {% endif %}
<!-- Uncomment the line below to see the contents of the `forecast` object. --> <!-- Uncomment the line below to see the contents of the `forecast` object. -->
<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{forecast | dump}}</div> --> <!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{forecast | dump}}</div> -->

14
modules/default/weather/hourly.njk
View File

@ -4,9 +4,12 @@
<table class="{{ config.tableClass }}"> <table class="{{ config.tableClass }}">
{% set hours = hourly.slice(0, numSteps) %} {% set hours = hourly.slice(0, numSteps) %}
{% for hour in hours %} {% for hour in hours %}
<tr {% if config.colored %}class="colored"{% endif %} {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}> <tr {% if config.colored %}class="colored"{% endif %}
{% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
<td class="day">{{ hour.date | formatTime }}</td> <td class="day">{{ hour.date | formatTime }}</td>
<td class="bright weather-icon"><span class="wi weathericon wi-{{ hour.weatherType }}"></span></td> <td class="bright weather-icon">
<span class="wi weathericon wi-{{ hour.weatherType }}"></span>
</td>
<td class="align-right bright"> <td class="align-right bright">
{{ hour.temperature | roundValue | unit("temperature") }} {{ hour.temperature | roundValue | unit("temperature") }}
</td> </td>
@ -25,7 +28,7 @@
{% endif %} {% endif %}
{% if config.showPrecipitationProbability %} {% if config.showPrecipitationProbability %}
<td class="align-right bright precipitation-prob"> <td class="align-right bright precipitation-prob">
{{ hour.precipitationProbability | unit("precip", "%") }} {{ hour.precipitationProbability | unit('precip', '%') }}
</td> </td>
{% endif %} {% endif %}
</tr> </tr>
@ -33,10 +36,7 @@
{% endfor %} {% endfor %}
</table> </table>
{% else %} {% else %}
<div class="dimmed light small"> <div class="dimmed light small">{{ "LOADING" | translate }}</div>
{{ "LOADING" | translate }}
</div>
{% endif %} {% endif %}
<!-- Uncomment the line below to see the contents of the `hourly` object. --> <!-- Uncomment the line below to see the contents of the `hourly` object. -->
<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{hourly | dump}}</div> --> <!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{hourly | dump}}</div> -->

2
tests/e2e/modules/weather_current_spec.js
View File

@ -48,7 +48,7 @@ describe("Weather module", () => {
it("should render windDirection with an arrow", async () => { it("should render windDirection with an arrow", async () => {
const elem = await helpers.waitForElement(".weather .normal.medium sup i.fa-long-arrow-alt-down"); const elem = await helpers.waitForElement(".weather .normal.medium sup i.fa-long-arrow-alt-down");
expect(elem).not.toBe(null); expect(elem).not.toBe(null);
expect(elem.outerHTML).toContain("transform:rotate(250deg);"); expect(elem.outerHTML).toContain("transform:rotate(250deg)");
}); });
it("should render humidity", async () => { it("should render humidity", async () => {