wip

2024-12-30 15:00:42 -05:00 · 2024-12-30 15:00:42 -05:00 · 947ee56596
commit 947ee56596
parent cc8c8ef967
10 changed files with 319 additions and 32 deletions
--- a/ui/embed.go
+++ b/ui/embed.go
@ -1,6 +1,12 @@
 package ui

-import "embed"
+import (
+	"embed"
+	"io"
+	"text/template"
+
+	"github.com/labstack/echo/v4"
+)

 //go:embed *.html
 var htmlFS embed.FS
@ -8,3 +14,17 @@ var htmlFS embed.FS
 func HTMLFS() embed.FS {
 	return htmlFS
 }
+
+type Renderer struct {
+	templates *template.Template
+}
+
+func (t *Renderer) Render(w io.Writer, name string, data any, c echo.Context) error {
+	return t.templates.ExecuteTemplate(w, name, data)
+}
+
+func NewRenderer() *Renderer {
+	return &Renderer{
+		templates: template.Must(template.ParseFS(HTMLFS(), "*html")),
+	}
+}
--- a/ui/index.html
+++ b/ui/index.html
@ -1,4 +1,122 @@
 {{ define "index" }}
-hello world
-{{ . }}
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <title>
+      AGECEM | Agenda
+    </title>
+
+    <style>
+    body {
+  /* Center the form on the page */
+  margin: 0 auto;
+  width: 400px;
+  /* Form outline */
+  padding: 1em;
+  border: 1px solid #ccc;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* Uniform size & alignment */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input,
+textarea {
+  /* To make sure that all text fields have the same font settings
+     By default, textareas have a monospace font */
+  font: 1em sans-serif;
+
+  /* Uniform text field size */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Match form field borders */
+  border: 1px solid #999;
+}
+
+input:focus,
+textarea:focus {
+  /* Additional highlight for focused elements */
+  border-color: #000;
+}
+
+textarea {
+  /* Align multiline text fields with their labels */
+  vertical-align: top;
+
+  /* Provide space to type some text */
+  height: 5em;
+}
+
+.button {
+  /* Align buttons with the text fields */
+  padding-left: 90px; /* same size as the label elements */
+}
+
+button {
+  /* This extra margin represent roughly the same space as the space
+     between the labels and their text fields */
+  margin-left: 0.5em;
+}
+
+    </style>
+  </head>
+
+  <body>
+    <h2>
+      Distribution d'agendas aux membres de l'AGECEM
+    </h2>
+
+    <p>
+      1) Si l'agenda demandé est perpétuel, cochez 'Perpétuel?:'<br>
+      <br>
+      2) Sélectionnez le champs 'Numéro étudiant:'<br>
+      <br>
+      3) Scannez la carte étudiante d'unE membre<br>
+      -ou-<br>
+      Entrez manuellement le code à 7 chiffres<br>
+      <br>
+      4) Si aucune erreur ne survient, la personne est libre de partir avec son agenda
+    </p>
+
+    <hr>
+
+    <form action="/transaction/" method="post">
+        <ul>
+            <li>
+                <label for="is_perpetual">Perpétuel?:</label>
+                <input type="checkbox" id="is_perpetual" name="is_perpetual"/>
+            </li>
+            <li>
+                <label for="membre_id">Numéro étudiant:</label>
+                <input type="text" id="membre_id" name="membre_id" autofocus/>
+            </li>
+            <li class="button">
+                <button type="submit">Scan</button>
+            </li>
+        </ul>
+    </form>
+
+    <!--<p class="result">{{ .Result }}</p>--!>
+    <!--<p>{{ .Error }}</p>--!>
+    <!--<details><summary>Détails de connexion au bottin</summary>{{ .BottinHealth }}</details>--!>
+    <p class="result">{{ . }}</p>
+  </body>
+
+</html>
 {{ end }}