#77 Use autoformatter for Django templates

partio-scout · Dec 19, 2024 · 5ef586a · 5ef586a
2 parents 82e10bc + 4227374
commit 5ef586a
Show file tree

Hide file tree

Showing 49 changed files with 1,963 additions and 1,778 deletions.
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
@@ -12,3 +12,6 @@ ae6391ac34b6f959fd16053f24076353aae0e54b
 
 # Format python code with black
 b215abbc7ae11614bab50fb7c3b95c307cf933d5
+
+# Format Django templates with djLint
+047d51f497bdb08d6c092b05d917d331fb7cebd0
diff --git a/.github/workflows/continuous-integration.yml b/.github/workflows/continuous-integration.yml
@@ -16,10 +16,12 @@ jobs:
         run: |
           python -m pip install --upgrade pip
           pip install 'black==24.10.0'
+          pip install 'djlint==1.36.3'
       - name: Check formatting
         run: |
           black -t py312 --check .
           black -t py312 --check web/**/*.py.example
+          djlint --check .
   unit-tests-sqlite:
     runs-on: ubuntu-latest
     timeout-minutes: 15

diff --git a/docs/development.md b/docs/development.md
@@ -72,11 +72,15 @@ Hakemistosta `./web/roobt` löytyy myös toinen robot-tiedosto nimeltään
 `autentikointi.txt`, mutta sen ajaminen ei taida onnistua, ellei ensin
 toteuta Kipaan suunniteltua kirjautumista.
 
-## Python-koodin formatointi
+## Python-koodin ja Django-templaattien formatointi
 
 Koodi noudattaa Black-autoformatterin vesion 24.10.0 mukaista tyyliä.
-Blackille annetaan lippu `--target-version py312`. Formatointi tarkastetaan
-osana CI-putkea.
+Blackille annetaan lippu `--target-version py312`. Templaatit formatoidaan
+käyttäen [djLint:tiä](https://www.djlint.com/), joka ajetaan seuraavasti:
+`djlint --reformat --profile=django .`. Toisin kuin Black, djLint ei takaa
+tiedostojen ehjänä pysymistä, joten muutosten tarkastaminen manuaalisesti
+formatoinnin jälkeen voi olla tarpeen. Formatoinnit tarkastetaan osana
+CI-putkea.
 
 ## Selityksiä lähdekooditiedostoista
 

diff --git a/web/robot/yhteiset_resurssit.resource b/web/robot/yhteiset_resurssit.resource
@@ -30,7 +30,7 @@ Kipa Suite Setup
 
 Open Sub Page Verify Location And Title
     [Arguments]    ${link_name}    ${link}    ${page_title}
-    Click Link    ${link_name}
+    Click Link    xpath://a[contains(., '${link_name}')]
     Wait Until Keyword Succeeds    10 sec    2 sec    Location Should Be    ${KIPA_URL}/${TESTIKISA}/${link}/
     Wait Until Keyword Succeeds    10 sec    2 sec    Title Should Be    ${page_title}
 
@@ -46,7 +46,7 @@ Remove Competition
     Open KiPa Main Page
     click link    ${competition}
     title should be    Kipa - ${competition}
-    Click Link    poista kisa
+    Click Link    xpath://a[contains(., 'poista kisa')]
     Title Should Be    ${KISAN_POISTO_OTSIKKO}
     Click Button    Kyllä
     Wait Until Keyword Succeeds    10 sec    2 sec    Title Should Be    ${KAIKKI_KISAT_OTSIKKO}

diff --git a/web/templates/404.html b/web/templates/404.html
@@ -1,9 +1,7 @@
 <html>
-<head>
-
-</head>
-<body>
-<h1> 404 Sivua ei löydy </h1>
-<a href='/kipa/'>alkuun</a>
-</body>
+    <head></head>
+    <body>
+        <h1>404 Sivua ei löydy</h1>
+        <a href='/kipa/'>alkuun</a>
+    </body>
 </html>
diff --git a/web/templates/500.html b/web/templates/500.html
@@ -1,17 +1,18 @@
 <html>
-<head>
-
-</head>
-<body bgcolor="black">
-<p>
-<br><br>
-<font color=red size=5><b>
-<h1>ERROR 500</h1>
-Ohjelmistovirhe . Paina <a href='/kipa/'>alkuun</a> jatkaaksesi.<br><br>
-Kyborgin kahvimuki : {{error}}
-</b></font>
-</p>
-</body>
+    <head></head>
+    <body bgcolor="black">
+        <p>
+            <br>
+            <br>
+            <font color=red size=5>
+                <b>
+                    <h1>ERROR 500</h1>
+                    Ohjelmistovirhe . Paina <a href='/kipa/'>alkuun</a> jatkaaksesi.
+                    <br>
+                    <br>
+                    Kyborgin kahvimuki : {{ error }}
+                </b>
+            </font>
+        </p>
+    </body>
 </html>
-
-
diff --git a/web/templates/admin/base_site.html b/web/templates/admin/base_site.html
@@ -1,10 +1,9 @@
 {% extends "admin/base.html" %}
 {% load i18n %}
-
-{% block title %}{{ title }} | {% trans 'Django site admin' %}{% endblock %}
-
+{% block title %}
+    {{ title }} | {% trans 'Django site admin' %}
+{% endblock %}
 {% block branding %}
-<h1 id="site-name">{% trans 'Django administration' %}</h1>
+    <h1 id="site-name">{% trans 'Django administration' %}</h1>
 {% endblock %}
-
 {% block nav-global %}{% endblock %}
diff --git a/web/templates/tupa/base.html b/web/templates/tupa/base.html
@@ -1,113 +1,159 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
-<title>Kipa - {% block title %}  {% endblock %}</title>
-<link rel="stylesheet" type="text/css" href="/kipamedia/kipa.css" />
-<link rel="stylesheet" type="text/css" href="/kipamedia/tabcontent.css" />
-<link rel="stylesheet" type="text/css" href="/kipamedia/jquery.jgrowl.css" />
-<link rel="icon" type="image/x-icon" href="/kipamedia/favicon.ico" />
-
-<script type="text/javascript" language="javascript" src="/kipamedia/jquery-1.4.2.min.js"></script>
-<script type="text/javascript" language="javascript" src="/kipamedia/jquery.jgrowl_minimized.js"></script>
-<script type="text/javascript" language="javascript" src="/kipamedia/tooltip.js"></script>
-<script type="text/javascript" src="/kipamedia/tabcontent.js">
-/***********************************************
-* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
-* This notice MUST stay intact for legal use
-* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
-***********************************************/
-</script>
-
-{% load kipatags %}
-{% block header %}  {% endblock %}
-
-<script language="JavaScript">
+    <head>
+        <meta http-equiv="Content-Type"
+              content="text/html; charset=utf-8"
+              HTTP-EQUIV="PRAGMA"
+              CONTENT="NO-CACHE" />
+        <title>Kipa -
+            {% block title %}{% endblock %}
+        </title>
+        <link rel="stylesheet" type="text/css" href="/kipamedia/kipa.css" />
+        <link rel="stylesheet" type="text/css" href="/kipamedia/tabcontent.css" />
+        <link rel="stylesheet" type="text/css" href="/kipamedia/jquery.jgrowl.css" />
+        <link rel="icon" type="image/x-icon" href="/kipamedia/favicon.ico" />
+        <script type="text/javascript"
+                language="javascript"
+                src="/kipamedia/jquery-1.4.2.min.js"></script>
+        <script type="text/javascript"
+                language="javascript"
+                src="/kipamedia/jquery.jgrowl_minimized.js"></script>
+        <script type="text/javascript"
+                language="javascript"
+                src="/kipamedia/tooltip.js"></script>
+        <script type="text/javascript" src="/kipamedia/tabcontent.js">
+            /***********************************************
+            * Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
+            * This notice MUST stay intact for legal use
+            * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
+            ***********************************************/
+        </script>
+        {% load kipatags %}
+        {% block header %}{% endblock %}
+        <script language="JavaScript">
 function setVisibility(id, visibility) {
 document.getElementById(id).style.display = visibility;
 }
-</script>
-{% if talletettu %}
-<script type="text/javascript">
-   $.jGrowl.defaults.position = 'center';
-</script>
-    <script type="text/javascript">
+        </script>
+        {% if talletettu %}
+            <script type="text/javascript">$.jGrowl.defaults.position = 'center';</script>
+            <script type="text/javascript">
         $(document).ready(function() {
             $.jGrowl('{{talletettu}}', {
                 life: 3000
                 });
         });
-    </script>
-{% endif %}
-
-</head>
-
-<body>
-
-{% include "tupa/vaara_tietokanta.html" %}
-
-<div id="wrap">
-
-    <div id="header"><div id="pageTitle" class="capitalize"><a href="/kipa/{{kisa_nimi}}/">{{kisa_nimi|alaviiva_pois}}</a></div>
-        <div style="float:right; margin-top:-4px; margin-bottom:0; padding-bottom:0; height:18px;">
-            {% include "tupa/login.html" %}
-        </div>
-
-    </div><!-- /header -->
-    <div id="breadcrumbs">
-        {% if tarkistus %}
-        <a href="/kipa/{{kisa_nimi}}/" class="capitalize">{{kisa_nimi|alaviiva_pois}}</a> {%if taakse.url and taakse.title%}» <a href="{{taakse.url}}tarkistus/">{{taakse.title|alaviiva_pois}} (tarkistus)</a> {% endif %}» {{heading|alaviiva_pois}}
-        {% else %}
-        <a href="/kipa/{{kisa_nimi}}/" class="capitalize">{{kisa_nimi|alaviiva_pois}}</a> {%if taakse.url and taakse.title%}» <a href="{{taakse.url}}">{{taakse.title|alaviiva_pois}}</a> {% endif %}» {{heading|alaviiva_pois}}
+            </script>
         {% endif %}
-
-    </div>
-
-    <div id="main" class="clearfix">
-
-        <div id="container">
-
-            <div id="left" class="column">
-                <div id="sitetoolbarrow">
-                    <a href="/kipa/{{kisa_nimi}}/" class="sitetoolbarnav" title="Etusivulle"><img src="/kipamedia/home.png" width="32" height="32" alt="Etusivulle" /></a>
-                    <a href="/kipa/{{kisa_nimi}}/syota/" class="sitetoolbarnav" title="Syötä suorituksia"><img src="/kipamedia/add.png" width="32" height="32" alt="Syötä suorituksia" /></a>
-                    <a href="/kipa/{{kisa_nimi}}/syota/tarkistus/" class="sitetoolbarnav" title="Syötä suorituksia (tarkistus)"><img src="/kipamedia/accept.png" width="32" height="32" alt="Syötä suorituksia (tarkistus)" /></a>
-                    <a href="/kipa/{{kisa_nimi}}/tulosta/normaali/" class="sitetoolbarnav" title="Tulokset"><img src="/kipamedia/chart.png" width="32" height="32" alt="Tulokset" /></a>
-                    <a href="/kipa/{{kisa_nimi}}/tulosta/tilanne/" class="sitetoolbarnav" title="Laskennan tilanne"><img src="/kipamedia/chart_up.png" width="32" height="32" alt="Laskennan tilanne" /></a>
-                    <a href="/kipa/{{kisa_nimi}}/maarita/vartiot/" class="sitetoolbarnav" title="Määrittele vartiot"><img src="/kipamedia/edit_profile.png" width="32" height="32" alt="Määrittele vartiot" /></a>
-                    <a href="/kipa/{{kisa_nimi}}/maarita/tehtava/" class="sitetoolbarnav" title="Määrittele tehtävät"><img src="/kipamedia/edit_page.png" width="32" height="32" alt="Määrittele tehtävät" /></a>
-                    <a href="/kipamedia/Manuaali_v03.pdf" class="sitetoolbarnav" title="Apua"><img src="/kipamedia/help.png" width="32" height="32" alt="Apua" /></a>
+    </head>
+    <body>
+        {% include "tupa/vaara_tietokanta.html" %}
+        <div id="wrap">
+            <div id="header">
+                <div id="pageTitle" class="capitalize">
+                    <a href="/kipa/{{ kisa_nimi }}/">{{ kisa_nimi|alaviiva_pois }}</a>
                 </div>
-            </div><!-- /left -->
-
-            <div id="right" class="column">
-
-                {% block content %}{% endblock %}
-                {% if tabs %}
-                        {% for tab in tabs %}
+                <div style="float:right;
+                            margin-top:-4px;
+                            margin-bottom:0;
+                            padding-bottom:0;
+                            height:18px">{% include "tupa/login.html" %}</div>
+            </div>
+            <div id="breadcrumbs">
+                {% if tarkistus %}
+                    <a href="/kipa/{{ kisa_nimi }}/" class="capitalize">{{ kisa_nimi|alaviiva_pois }}</a>
+                    {% if taakse.url and taakse.title %}
+                        » <a href="{{ taakse.url }}tarkistus/">{{ taakse.title|alaviiva_pois }} (tarkistus)</a>
+                    {% endif %}
+                    » {{ heading|alaviiva_pois }}
+                {% else %}
+                    <a href="/kipa/{{ kisa_nimi }}/" class="capitalize">{{ kisa_nimi|alaviiva_pois }}</a>
+                    {% if taakse.url and taakse.title %}» <a href="{{ taakse.url }}">{{ taakse.title|alaviiva_pois }}</a>{% endif %}
+                    » {{ heading|alaviiva_pois }}
+                {% endif %}
+            </div>
+            <div id="main" class="clearfix">
+                <div id="container">
+                    <div id="left" class="column">
+                        <div id="sitetoolbarrow">
+                            <a href="/kipa/{{ kisa_nimi }}/"
+                               class="sitetoolbarnav"
+                               title="Etusivulle">
+                                <img src="/kipamedia/home.png" width="32" height="32" alt="Etusivulle" />
+                            </a>
+                            <a href="/kipa/{{ kisa_nimi }}/syota/"
+                               class="sitetoolbarnav"
+                               title="Syötä suorituksia">
+                                <img src="/kipamedia/add.png"
+                                     width="32"
+                                     height="32"
+                                     alt="Syötä suorituksia" />
+                            </a>
+                            <a href="/kipa/{{ kisa_nimi }}/syota/tarkistus/"
+                               class="sitetoolbarnav"
+                               title="Syötä suorituksia (tarkistus)">
+                                <img src="/kipamedia/accept.png"
+                                     width="32"
+                                     height="32"
+                                     alt="Syötä suorituksia (tarkistus)" />
+                            </a>
+                            <a href="/kipa/{{ kisa_nimi }}/tulosta/normaali/"
+                               class="sitetoolbarnav"
+                               title="Tulokset">
+                                <img src="/kipamedia/chart.png" width="32" height="32" alt="Tulokset" />
+                            </a>
+                            <a href="/kipa/{{ kisa_nimi }}/tulosta/tilanne/"
+                               class="sitetoolbarnav"
+                               title="Laskennan tilanne">
+                                <img src="/kipamedia/chart_up.png"
+                                     width="32"
+                                     height="32"
+                                     alt="Laskennan tilanne" />
+                            </a>
+                            <a href="/kipa/{{ kisa_nimi }}/maarita/vartiot/"
+                               class="sitetoolbarnav"
+                               title="Määrittele vartiot">
+                                <img src="/kipamedia/edit_profile.png"
+                                     width="32"
+                                     height="32"
+                                     alt="Määrittele vartiot" />
+                            </a>
+                            <a href="/kipa/{{ kisa_nimi }}/maarita/tehtava/"
+                               class="sitetoolbarnav"
+                               title="Määrittele tehtävät">
+                                <img src="/kipamedia/edit_page.png"
+                                     width="32"
+                                     height="32"
+                                     alt="Määrittele tehtävät" />
+                            </a>
+                            <a href="/kipamedia/Manuaali_v03.pdf"
+                               class="sitetoolbarnav"
+                               title="Apua">
+                                <img src="/kipamedia/help.png" width="32" height="32" alt="Apua" />
+                            </a>
+                        </div>
+                    </div>
+                    <div id="right" class="column">
+                        {% block content %}{% endblock %}
+                        {% if tabs %}
+                            {% for tab in tabs %}
                                 <script type="text/javascript">
                                         var sarjat=new ddtabcontent("{{tab}}")
                                         sarjat.setpersist(true)
                                         sarjat.setselectedClassTarget("link") //"link" or "linkparent"
                                         sarjat.init()
                                 </script>
-                        {% endfor %}
-                {% else %}
-                        <script type="text/javascript">
+                            {% endfor %}
+                        {% else %}
+                            <script type="text/javascript">
                                 var sarjat=new ddtabcontent("sarjatabs")
                                 sarjat.setpersist(true)
                                 sarjat.setselectedClassTarget("link") //"link" or "linkparent"
                                 sarjat.init()
-                        </script>
-                {% endif %}
-
-            </div><!-- /right -->
-
-        </div><!-- /container -->
-
-    </div><!-- /main -->
-
-</div><!-- /wrap -->
-
-</body>
-
+                            </script>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
 </html>