From 43fe9aea31df1f0c93a294c545e8fb1be9b530f8 Mon Sep 17 00:00:00 2001
From: Angelo Rodriguez <angelo.rodriguez@cancom.de>
Date: Wed, 4 Dec 2024 16:36:57 +0100
Subject: [PATCH] work done

---
 core/reports.py                  | 49 +++++++++++++++++++++++++++++---
 core/styles.py                   |  4 +++
 core/templates/header.html       |  5 ++++
 core/templates/htmx/reports.html |  2 +-
 core/templates/index.html        |  7 +++--
 core/templates/report.html       | 45 ++++++++++++++++++++---------
 core/templates/write.html        | 43 +++++++++++++++++++++-------
 7 files changed, 125 insertions(+), 30 deletions(-)
 create mode 100755 core/templates/header.html

diff --git a/core/reports.py b/core/reports.py
index 3fcd9ff..3dfbffa 100755
--- a/core/reports.py
+++ b/core/reports.py
@@ -1,11 +1,52 @@
 from django import forms
 
+from core.styles import label_span
+
 
 class WeeklyReport(forms.Form):
-    department = forms.CharField(label="Abteilung", max_length=150)
-    company_text = forms.CharField(label="Betriebliche Tätigkeiten", max_length=300)
-    week_topic = forms.CharField(label="Thema der Woche", max_length=600)
-    school_text = forms.CharField(label="Berufsschule", max_length=300)
+    department = forms.CharField(
+        label=label_span("Abteilung"),
+        max_length=150,
+        widget=forms.TextInput(
+            attrs={
+                "placeholder": "Abteilung",
+                "class": "w-full p-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-400 mb-5",
+            }
+        ),
+    )
+    company_text = forms.CharField(
+        label=label_span("Betriebliche Tätigkeiten"),
+        max_length=300,
+        widget=forms.Textarea(
+            attrs={
+                "class": "w-full p-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-400 mb-5",
+                "rows": 10,
+                "placeholder": "Betriebliche Tätigkeiten",
+            }
+        ),
+    )
+    week_topic = forms.CharField(
+        label=label_span("Thema der Woche"),
+        max_length=600,
+        widget=forms.Textarea(
+            attrs={
+                "class": "w-full p-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-400 mb-5",
+                "rows": 8,
+                "placeholder": "Thema der Woche",
+            }
+        ),
+    )
+    school_text = forms.CharField(
+        label=label_span("Berufsschule"),
+        max_length=300,
+        widget=forms.Textarea(
+            attrs={
+                "class": "w-full p-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-400 mb-5",
+                "rows": 5,
+                "placeholder": "Berufsschule",
+            }
+        ),
+    )
 
     def content_values(self) -> dict:
         if self.is_valid():
diff --git a/core/styles.py b/core/styles.py
index 37615c7..088b45d 100755
--- a/core/styles.py
+++ b/core/styles.py
@@ -4,3 +4,7 @@ STYLE = {
     "red_btn": "text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900",
     "card": "bg-white drop-shadow-md p-4 mx-auto mt-5 aspect-[2/3] hover:drop-shadow-xl hover:scale-[0.85] scale-[0.8] lg:hover:scale-[0.95] lg:scale-[0.9] transition-all duration-50 transform ease-in-out w-60 sm:w-80",
 }
+
+
+def label_span(txt):
+    return f'<span class="block text-base font-medium font-bold text-gray-700 mr-1 mb-3">{txt}</span>'
diff --git a/core/templates/header.html b/core/templates/header.html
new file mode 100755
index 0000000..1a2dd41
--- /dev/null
+++ b/core/templates/header.html
@@ -0,0 +1,5 @@
+<header class="w-full bg-red-600 text-white py-4 shadow-md">
+    <div class="max-w-4xl {% if center is None or center %}mx-auto{% endif %} px-4">
+      <h1 class="text-2xl font-bold {% if center is None or center %}{% else %}ml-5{% endif %}">{{ title }}</h1>
+    </div>
+  </header>
diff --git a/core/templates/htmx/reports.html b/core/templates/htmx/reports.html
index dc0fb8f..aee0210 100755
--- a/core/templates/htmx/reports.html
+++ b/core/templates/htmx/reports.html
@@ -3,7 +3,7 @@
 
   {% include 'component/report.html' with report=report %}
 
-   {% endfor %} 
+   {% endfor %}
    
       <div hx-get="/reports?page={{ next }}"
   hx-trigger="revealed"
diff --git a/core/templates/index.html b/core/templates/index.html
index c23d056..888542e 100755
--- a/core/templates/index.html
+++ b/core/templates/index.html
@@ -3,11 +3,14 @@
     <title>Azube</title>
     {% include 'head.html' %}
   </head>
-  <body>
+  <body class="bg-gray-100 min-h-screen">
+
+    {% include 'header.html' with title="Deine Berichtshefte" center=False %}
+
     <div class="bg-gray-100 min-h-screen">
-      <h1 class="text-2xl justify-center flex pt-5">Deine Berichtshefte</h1>
 
       {% if late_reports > 1 %}
+      
       <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mr-10 ml-10 mt-6" role="alert">
         <p class="font-bold"> Du bist nicht aktuell! </p>
         <p> Du hast noch {{ late_reports }} Berichtshefte nachzuschreiben. </p>
diff --git a/core/templates/report.html b/core/templates/report.html
index 5f93e64..04db2cb 100755
--- a/core/templates/report.html
+++ b/core/templates/report.html
@@ -3,17 +3,36 @@
         <title> Berichtsheft {{ report.num }} </title>
         {% include 'head.html' %}
     </head>
-<body>
-    <h1> Berichtsheft {{ report.num }} </h1>
-
-    <p> Berichtsheft {{ report.year }} / {{ report.week }} </p>
-
-    <p> Is Approved ? {{ report.is_approved }} </p>
-
-    {% for key, value in report.content.items %}
-
-    <p> {{ key }} : {{ value }} </p>
-
-    {% endfor %}
-</body>
+    <body class="bg-gray-50 text-gray-800 font-sans min-h-screen flex flex-col items-center">
+      
+        {% with title="Berichtsheft "|add:report.num %}
+    {% include 'header.html' with title="Berichtsheft" %}
+{% endwith %}
+    
+        <main class="flex-grow w-full max-w-4xl mx-auto p-6 bg-white shadow-lg rounded-lg mt-6">
+          <div class="mb-4">
+            <p class="text-lg font-medium text-gray-700">
+              Berichtsheft <span class="font-semibold">{{ report.year }}</span> / <span class="font-semibold">{{ report.week }}</span>
+            </p>
+            <p class="text-gray-700">
+              Is Approved? 
+              <span class="{% if report.is_approved %}text-green-500 font-semibold{% else %}text-red-500 font-semibold{% endif %}">
+                {{ report.is_approved }}
+              </span>
+            </p>
+          </div>
+    
+          <div class="border-t border-gray-200 mt-4 pt-4">
+            <h2 class="text-lg font-medium text-gray-800 mb-2">Content:</h2>
+            <dl class="space-y-2">
+              {% for key, value in report.content.items %}
+                <div class="flex justify-between items-start">
+                  <dt class="text-sm font-medium text-gray-600">{{ key }}</dt>
+                  <dd class="text-sm text-gray-800">{{ value }}</dd>
+                </div>
+              {% endfor %}
+            </dl>
+          </div>
+        </main>
+      </body>
 </html>
diff --git a/core/templates/write.html b/core/templates/write.html
index 98966c2..746d24f 100755
--- a/core/templates/write.html
+++ b/core/templates/write.html
@@ -3,19 +3,42 @@
     <title>Neues Berichtsheft</title>
     {% include 'head.html' %}
   </head>
-  <body>
-    <h1>Neues Berichtsheft</h1>
+  <body class="bg-gray-50 text-gray-800 font-sans min-h-screen flex flex-col items-center">
 
-    <p>{{ user.display_name }}</p>
-    <p>Berichtsheft {{ year }} / {{ week }}</p>
-    <p>Von: {{ start_date|date:"d.m.Y" }} bis: {{ end_date|date:"d.m.Y" }}</p>
+    {% include 'header.html' with title="Neues Berichtsheft" %}
 
-    <form method="post">
-      {{ form }}
+    <main class="flex-grow w-full max-w-4xl mx-auto p-6 bg-white shadow-lg rounded-lg mt-6">
+      <div class="mb-6">
+        <p class="text-lg font-medium">{{ user.display_name }}</p>
+        <p class="text-gray-600">
+          Berichtsheft <span class="font-semibold">{{ year }}</span> / <span class="font-semibold">{{ week }}</span>
+        </p>
+        <p class="text-gray-600">
+          Von: <span class="font-semibold">{{ start_date|date:"d.m.Y" }}</span> bis: <span class="font-semibold">{{ end_date|date:"d.m.Y" }}</span>
+        </p>
+      </div>
 
-      <button>Submit</button>
+      <form method="post" class="space-y-4">
+        
+        {% for field in form %}
+        <div class="mb-4">
+            <label for="{{ field.id_for_label }}">
+                {{ field.label|safe }}
+            </label>
+            {{ field }}
+            {% if field.errors %}
+                <p class="text-red-500 text-sm">{{ field.errors|join:", " }}</p>
+            {% endif %}
+        </div>
+    {% endfor %}
 
-      {% csrf_token %}
-    </form>
+        {% csrf_token %}
+        <button 
+          type="submit"
+          class="w-full bg-red-600 text-white py-2 px-4 rounded-lg shadow hover:bg-red-700 focus:ring focus:ring-red-400">
+          Submit
+        </button>
+      </form>
+    </main>
   </body>
 </html>