From 50dd88aa9d1478c0eea88cef1049abee55cff35f Mon Sep 17 00:00:00 2001
From: Razmig Sarkissian <razmig@staxriver.com>
Date: Fri, 28 Apr 2023 20:01:44 +0200
Subject: [PATCH] html and model update

---
 scores/models.py                   | 17 +++++++-
 scores/static/scores/style.css     |  6 ++-
 scores/templates/scores/index.html | 63 ++++++++++++++++++++----------
 3 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/scores/models.py b/scores/models.py
index 74af909..1a3ded9 100644
--- a/scores/models.py
+++ b/scores/models.py
@@ -33,6 +33,19 @@ class Match(models.Model):
     team2scorecolumn4 = models.CharField(max_length=200, blank=True)
     team2scorecolumn5 = models.CharField(max_length=200, blank=True)
 
+    def durationPrefix(self):
+           
+        _seconds = 0
+        if self.enddate:
+            _seconds = (self.enddate - self.date).total_seconds()
+        else:
+            _seconds = (timezone.now() - self.date).total_seconds()
+
+        if _seconds > 0:
+            return "Temps de jeu"
+        else :
+            return "Démarrage prévu dans"
+    
     def duration(self):
 
         _seconds = 0
@@ -44,12 +57,12 @@ class Match(models.Model):
         if _seconds > 0:
             _hours = int(_seconds / 3600)
             _minutes = int((_seconds % 3600) / 60)
-            return f"{_hours}:{_minutes:02d}"
+            return f"{_hours:02d}:{_minutes:02d} min"
         else :
             _seconds = _seconds * -1
             _hours = int(_seconds / 3600)
             _minutes = int((_seconds % 3600) / 60)
-            return "Démarre dans " + f"{_hours}:{_minutes:02d}" + "..."
+            return f"{_hours:02d}:{_minutes:02d} min"
 
     def seconds(self):
         return (timezone.now() - self.date).total_seconds()
diff --git a/scores/static/scores/style.css b/scores/static/scores/style.css
index f53bbcf..ab8aefd 100644
--- a/scores/static/scores/style.css
+++ b/scores/static/scores/style.css
@@ -2,8 +2,9 @@
 html, body {
   /* font-size: 30px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
   /* font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
-
-  font-family: Helvetica, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, monospace;
+  /*font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;*/
+  /*font-family: Helvetica, sans-serif;*/
   background-color: #3878D8;
   color: white;
 
@@ -58,6 +59,7 @@ td {
 
 .big {
   font-size: 30px;
+  font-weight: 600;
 }
 
 .score {
diff --git a/scores/templates/scores/index.html b/scores/templates/scores/index.html
index 2f76f38..a8ba009 100644
--- a/scores/templates/scores/index.html
+++ b/scores/templates/scores/index.html
@@ -46,41 +46,51 @@ document.getElementById("demo").innerHTML = "Démarrage en cours...";
   {% endif %}
 
   <main class="page-body">
+      {% autoescape off %}
 
     <div class="container">
       {% if live_matches %}
       {% for match in live_matches %}
       <div class="match">
 
-        <p><a href="/match/{{ match.id }}/">COURS #{{ match.court }}</a></p>
+        <p><a href="/match/{{ match.id }}/">TERRAIN #{{ match.court }}</a></p>
 
         <h1>{{ match.title }}</h1>
 
         {% if match.team3 %}
 
         <table>
-          <tr><td>{{ match.team1 }}</td>
+          <tr><td>{{ match.team1|linebreaksbr }}</td>
             {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
+            {% if match.team2scorecolumn1 %}<td class="score">{{ match.team2scorecolumn1 }}</td>{% endif %}
           </tr>
-          <tr><td>{{ match.team2 }}</td>
+          <tr><td>{{ match.team2|linebreaksbr }}</td>
             {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
+            {% if match.team2scorecolumn2 %}<td class="score">{{ match.team2scorecolumn2 }}</td>{% endif %}
           </tr>
-          <tr><td>{{ match.team3 }}</td>
+          <tr><td>{{ match.team3|linebreaksbr }}</td>
             {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
+            {% if match.team2scorecolumn3 %}<td class="score">{{ match.team2scorecolumn3 }}</td>{% endif %}
           </tr>
-          <tr><td>{{ match.team4 }}</td>
+          <tr><td>{{ match.team4|linebreaksbr }}</td>
             {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
+            {% if match.team2scorecolumn4 %}<td class="score">{{ match.team2scorecolumn4 }}</td>{% endif %}
           </tr>
 
-          <tr><td>{{ match.team5 }}</td>
+          {% if match.team5 %}
+
+          <tr><td>{{ match.team5|linebreaksbr }}</td>
             {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
+            {% if match.team2scorecolumn5 %}<td class="score">{{ match.team2scorecolumn5 }}</td>{% endif %}
           </tr>
+          {% endif %}
+
         </table>
         {% else %}
 
         <table>
           <tr>
-            <td>{{ match.team1 }}</td>
+            <td>{{ match.team1|linebreaksbr }}</td>
             {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
             {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
             {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
@@ -88,7 +98,7 @@ document.getElementById("demo").innerHTML = "Démarrage en cours...";
             {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
           </tr>
           <tr>
-            <td>{{ match.team2 }}</td>
+            <td>{{ match.team2|linebreaksbr }}</td>
             {% if match.team2scorecolumn1 %}<td class="score">{{ match.team2scorecolumn1 }}</td>{% endif %}
             {% if match.team2scorecolumn2 %}<td class="score">{{ match.team2scorecolumn2 }}</td>{% endif %}
             {% if match.team2scorecolumn3 %}<td class="score">{{ match.team2scorecolumn3 }}</td>{% endif %}
@@ -100,8 +110,10 @@ document.getElementById("demo").innerHTML = "Démarrage en cours...";
         {% endif %}
 
         <!-- <p id="demo"></p> -->
-
-        <p class="big">{{ match.duration }}</p>
+        <p>
+        <div class="small">{{ match.durationPrefix }}</div>
+        <div class="big">{{ match.duration }}</div>
+        </p>
 
       </div>
       {% endfor %}
@@ -117,28 +129,37 @@ document.getElementById("demo").innerHTML = "Démarrage en cours...";
         {% if match.team3 %}
 
         <table>
-          <tr><td>{{ match.team1 }}</td>
+          <tr><td>{{ match.team1|linebreaksbr }}</td>
             {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
+            {% if match.team2scorecolumn1 %}<td class="score">{{ match.team2scorecolumn1 }}</td>{% endif %}
           </tr>
-          <tr><td>{{ match.team2 }}</td>
+          <tr><td>{{ match.team2|linebreaksbr }}</td>
             {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
+            {% if match.team2scorecolumn2 %}<td class="score">{{ match.team2scorecolumn2 }}</td>{% endif %}
           </tr>
-          <tr><td>{{ match.team3 }}</td>
+          <tr><td>{{ match.team3|linebreaksbr }}</td>
             {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
+            {% if match.team2scorecolumn3 %}<td class="score">{{ match.team2scorecolumn3 }}</td>{% endif %}
           </tr>
-          <tr><td>{{ match.team4 }}</td>
+          <tr><td>{{ match.team4|linebreaksbr }}</td>
             {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
+            {% if match.team2scorecolumn4 %}<td class="score">{{ match.team2scorecolumn4 }}</td>{% endif %}
           </tr>
 
-          <tr><td>{{ match.team5 }}</td>
+          {% if match.team5 %}
+
+          <tr><td>{{ match.team5|linebreaksbr }}</td>
             {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
+            {% if match.team2scorecolumn5 %}<td class="score">{{ match.team2scorecolumn5 }}</td>{% endif %}
           </tr>
+          {% endif %}
+
         </table>
         {% else %}
 
         <table>
           <tr>
-            <td>{{ match.team1 }}</td>
+            <td>{{ match.team1|linebreaksbr }}</td>
             {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
             {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
             {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
@@ -146,7 +167,7 @@ document.getElementById("demo").innerHTML = "Démarrage en cours...";
             {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
           </tr>
           <tr>
-            <td>{{ match.team2 }}</td>
+            <td>{{ match.team2|linebreaksbr }}</td>
             {% if match.team2scorecolumn1 %}<td class="score">{{ match.team2scorecolumn1 }}</td>{% endif %}
             {% if match.team2scorecolumn2 %}<td class="score">{{ match.team2scorecolumn2 }}</td>{% endif %}
             {% if match.team2scorecolumn3 %}<td class="score">{{ match.team2scorecolumn3 }}</td>{% endif %}
@@ -159,8 +180,10 @@ document.getElementById("demo").innerHTML = "Démarrage en cours...";
 
         <!-- <p id="demo"></p> -->
 
-        <p class="big">{{ match.duration }}</p>
-
+        <p>
+        <div class="small">{{ match.durationPrefix }}</div>
+        <div class="big">{{ match.duration }}</div>
+        </p>
       </div>
       {% endfor %}
 
@@ -168,7 +191,7 @@ document.getElementById("demo").innerHTML = "Démarrage en cours...";
 
 
     </div>
-
+    {% endautoescape %}
   </main>
 
   {% if club.footer %}