frontend: add tableview to display added monsters

handlers/add_monster_handler.go

@@ -73,7 +73,11 @@ func AddMonster(Monsters *[]model.Monster) http.HandlerFunc {
 				},
 			},
 		}
+		mu.Lock()
+		defer mu.Unlock()
 		*Monsters = append(*Monsters, monster)
+		log.Printf("Monster hinzugefügt. Anzahl der Monster jetzt: %d\n", len(*Monsters))
+		http.Redirect(w, r, "/monsterTable", http.StatusFound)
 	}
 }
 

handlers/form_handler.go

@@ -1,16 +1,19 @@
 package handlers
 
 import (
+	"ddServer/model"
 	"embed"
 	"html/template"
 	"log"
 	"net/http"
 )
 
-func FormHandler(content embed.FS, filename string) http.HandlerFunc {
+func FormHandler(content embed.FS, monsters *[]model.Monster, filename string) http.HandlerFunc {
 	log.Print("FormHandler called")
+	mu.Lock()
+	defer mu.Unlock()
 	return func(w http.ResponseWriter, r *http.Request) {
-		tmpl, err := template.ParseFS(content, "templates/base.html", "templates/header.html", "templates/main.html", "templates/footer.html", "templates/monsterForm.html")
+		tmpl, err := template.ParseFS(content, "templates/base.html", "templates/header.html", "templates/main.html", "templates/footer.html", "templates/monsterForm.html", "templates/monster.html", "templates/monsterTable.html")
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
@@ -18,10 +21,12 @@ func FormHandler(content embed.FS, filename string) http.HandlerFunc {
 
 		err = tmpl.ExecuteTemplate(w, "base", map[string]interface{}{
 			"Title":    "Dungeons & Dragons Monster Generator",
+			"Monsters": *monsters,
 		})
 		if err != nil {
 			log.Printf("Template execution error: %v\n", err)
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 		}
+		log.Printf("Template mit %d Monstern gerendert\n", len(*monsters))
 	}
 }

handlers/monster_table_handler.go

@@ -0,0 +1,29 @@
+package handlers
+
+import (
+	"ddServer/model"
+	"embed"
+	"html/template"
+	"log"
+	"net/http"
+)
+
+func MonsterTableHandler(content embed.FS, monsters *[]model.Monster) http.HandlerFunc {
+	log.Print("AboutHandler called")
+	return func(w http.ResponseWriter, r *http.Request) {
+		tmpl, err := template.ParseFS(content, "templates/base.html", "templates/header.html", "templates/main.html", "templates/footer.html", "templates/monsterTable.html", "templates/monster.html")
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = tmpl.ExecuteTemplate(w, "monsterTable", map[string]interface{}{
+			"Title":    "Dungeons & Dragons Monster Generator",
+			"Monsters": *monsters,
+		})
+		if err != nil {
+			log.Printf("Template execution error: %v\n", err)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}

handlers/submit_handler.go

@@ -46,6 +46,7 @@ func SubmitHandler(content embed.FS, chars *[]model.Character, Monsters *[]model
 			return
 		}
 
+		log.Printf("Monster hinzugefügt. Anzahl der Monster jetzt: %d\n", len(*Monsters))
 		// JSON-Daten in die Datei schreiben
 		err = model.WriteToFile(filename, charJSON)
 		if err != nil {

main.go

@@ -21,12 +21,13 @@ var (
 func main() {
 	filename := ""
 
-	http.HandleFunc("/", handlers.FormHandler(content, filename))
+	http.HandleFunc("/", handlers.FormHandler(content, &Monsters, filename))
 	http.HandleFunc("/submit", handlers.SubmitHandler(content, &chars, &Monsters, filename))
 	http.Handle("/images/", http.StripPrefix("/images/", http.FileServer(http.FS(content))))
 	http.HandleFunc("/addMonster", handlers.AddMonster(&Monsters))
 	http.HandleFunc("/about", handlers.AboutHandler(content))
 	http.HandleFunc("/contact", handlers.ContactHandler(content))
+	http.HandleFunc("/monsterTable", handlers.MonsterTableHandler(content, &Monsters))
 
 	log.Print("Server gestartet, erreichbar unter http://localhost:8080")
 	http.ListenAndServe(":8080", nil)

model/model.go

@@ -69,8 +69,8 @@ type Action struct {
 
 // Character struct für die Daten des Charakters
 type Character struct {
-	Monster []Monster `json:"monster"`
 	Meta    Meta      `json:"_meta"`
+	Monster []Monster `json:"monster"`
 }
 
 // Meta struct für Meta-Informationen

templates/base.html

@@ -36,18 +36,6 @@
       height: 100%;
     }
 
-    .form-item {
-      display: grid;
-      grid-template-columns: auto auto auto;
-      gap: 10px;
-    }
-
-    .form-item2 {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-evenly;
-    }
-
     .banner {
       position: relative;
       text-align: center;
@@ -70,7 +58,6 @@
 
   {{ template "footer" . }}
 
-
 </body>
 
 </html>

templates/main.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div class="card-body form-box w-4/5 h-full">
+<div class="card-body form-box w-full h-full">
   <h2 class="card-title">Monster Form</h2>
   <form action="/submit" method="post" class="grid grid-columns-5 space-y-4 grid place-items-center">
     <table>
@@ -10,7 +10,9 @@
       </tr>
     </table>
     <div class="grid grid-cols-1">
-      <button type="button" hx-post="/addMonster" class="btn">Add Monster</button>
+      <button type="button" hx-post="/addMonster" hx-trigger="click" hx-target="#monster-table" hx-swap="outerHTML"
+        class="btn">Add
+        Monster</button>
     </div>
     {{ template "monsterform" . }}
     <input type="hidden" name="filename" value="{{.Filename}}">
@@ -19,4 +21,47 @@
     </div>
   </form>
 </div>
+<div class="card-body form-box w-full h-full">
+  <h2 class="card-title">Existing Monsters</h2>
+  <table class="table">
+    <colgroup>
+      <col style="width: 100px;">
+      <col style="width: 100px;">
+    </colgroup>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Source</th>
+        <th>Size</th>
+        <th>Type</th>
+        <th>Alignment</th>
+        <th>AC</th>
+        <th>AC Form</th>
+        <th>HP Average</th>
+        <th>HP Formula</th>
+        <th>Speed</th>
+        <th>Str</th>
+        <th>Dex</th>
+        <th>Con</th>
+        <th>Int</th>
+        <th>Wis</th>
+        <th>Cha</th>
+        <th>Save Dex</th>
+        <th>Save Con</th>
+        <th>Savve Wis</th>
+        <th>Perception</th>
+        <th>Stealth</th>
+        <th>Damage Resistance</th>
+        <th>Senses</th>
+        <th>Languages</th>
+        <th>CR</th>
+        <th>Trait Name</th>
+        <th>Trait Entry</th>
+        <th>Action Name</th>
+        <th>Action Entry</th>
+      </tr>
+    </thead>
+    {{ template "monsterTable" }}
+  </table>
+</div>
 {{ end }}

templates/monster.html

@@ -0,0 +1,33 @@
+{{ define "monster" }}
+<tr>
+  <td>{{.Name}}</td>
+  <td>{{.Source}}</td>
+  <td>{{range .Size}}{{.}}{{end}}</td>
+  <td>{{.Type}}</td>
+  <td>{{range .Alignment}}{{.}}{{end}}</td>
+  <td>{{range .AC}}{{.AC}}{{end}}</td>
+  <td>{{range .AC}}{{.From}}{{end}}</td>
+  <td>{{.HP.Average}}</td>
+  <td>{{.HP.Formula}}</td>
+  <td>{{.Speed.Walk}}</td>
+  <td>{{.Str}}</td>
+  <td>{{.Dex}}</td>
+  <td>{{.Con}}</td>
+  <td>{{.Int}}</td>
+  <td>{{.Wis}}</td>
+  <td>{{.Cha}}</td>
+  <td>{{.Save.Dex}}</td>
+  <td>{{.Save.Con}}</td>
+  <td>{{.Save.Wis}}</td>
+  <td>{{.Skill.Perception}}</td>
+  <td>{{.Skill.Stealth}}</td>
+  <td>{{range .DamageRes}}{{.}}{{end}}</td>
+  <td>{{range .Senses}}{{.}}{{end}}</td>
+  <td>{{range .Languages}}{{.}}{{end}}</td>
+  <td>{{.CR}}</td>
+  <td>{{range .Traits}}{{.Name}}{{end}}</td>
+  <td>{{range .Traits}}{{range .Entries}}{{.}}{{end}}{{end}}</td>
+  <td>{{range .Actions}}{{.Name}}{{end}}</td>
+  <td>{{range .Actions}}{{range .Entries}}{{.}}{{end}}{{end}}</td>
+</tr>
+{{ end }}

templates/monsterTable.html

@@ -0,0 +1,7 @@
+{{ define "monsterTable" }}
+<tbody id="monster-table">
+  {{ range .Monsters }}
+  {{ template "monster" . }}
+</tbody>
+{{ end }}
+{{ end }}