frontend: backend: fix formatting errors and errors from tests

This commit is contained in:
Patryk Hegenberg 2023-12-15 18:43:38 +01:00
parent 6db6d78ad9
commit ff0f06c0b9
7 changed files with 215 additions and 213 deletions

View file

@ -16,7 +16,7 @@ func MainHandler(content embed.FS, monsters *[]model.Monster) http.HandlerFunc {
log.Print("MainHandler called") log.Print("MainHandler called")
// Parse the templates from the embedded file system // Parse the templates from the embedded file system
tmpl, err := template.ParseFS(content, "templates/main.html", "templates/monsterForm.html", "templates/monster.html", "templates/monsterTable.html", "templates/base.html") tmpl, err := template.ParseFS(content, "templates/main.html", "templates/monsterForm.html", "templates/monster.html", "templates/monsterTable.html", "templates/base.html", "templates/skills.html")
if err != nil { if err != nil {
log.Printf("Template parsing error: %v\n", err) log.Printf("Template parsing error: %v\n", err)
http.Error(w, err.Error(), http.StatusInternalServerError) http.Error(w, err.Error(), http.StatusInternalServerError)

View file

@ -3,51 +3,51 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Title}}</title> <title>{{.Title}}</title>
<script src="https://unpkg.com/htmx.org@1.9.9" <script src="https://unpkg.com/htmx.org@1.9.9"
integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX" integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<link id="customStylesheet" rel="stylesheet" href="/static/darkly_bulmawatch.css"> <link id="customStylesheet" rel="stylesheet" href="/static/darkly_bulmawatch.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head> </head>
<body> <body>
<div class="container is-widescreen"> <div class="container is-widescreen">
{{ template "header" . }} {{ template "header" . }}
</div> </div>
<div class="container is-widescreen" id="main-content"> <div class="container is-widescreen" id="main-content">
{{ template "main" . }} {{ template "main" . }}
</div> </div>
<div class="container is-widescreen"> <div class="container is-widescreen">
{{ template "footer" . }} {{ template "footer" . }}
</div> </div>
</body> </body>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements // Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them // Add a click event on each of them
$navbarBurgers.forEach(el => { $navbarBurgers.forEach(el => {
el.addEventListener('click', () => { el.addEventListener('click', () => {
// Get the target from the "data-target" attribute // Get the target from the "data-target" attribute
const target = el.dataset.target; const target = el.dataset.target;
const $target = document.getElementById(target); const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active'); el.classList.toggle('is-active');
$target.classList.toggle('is-active'); $target.classList.toggle('is-active');
});
});
});
}); });
});
</script> </script>
</html> </html>

View file

@ -1,57 +1,58 @@
{{ define "contact" }} {{ define "contact" }}
<div class="tile is-parent"> <div class="tile is-parent">
<div class="tile is-child card "> <div class="tile is-child card ">
<div class="card-content"> <div class="card-content">
<div class="media-content"> <div class="media-content">
<p class="title is-4">Contact Us</p> <p class="title is-4">Contact Us</p>
</div> </div>
<div class="content"> <div class="content">
<div class="contact-info"> <div class="contact-info">
<h2>Our Contact Information</h2> <h2>Our Contact Information</h2>
<p>You can reach us through the following channels:</p> <p>You can reach us through the following channels:</p>
<ul> <ul>
<li>Email: example@example.com</li> <li>Email: example@example.com</li>
<li>Phone: +123456789</li> <li>Phone: +123456789</li>
</ul> </ul>
</div>
<div class="contact-form">
<h2>Contact Form</h2>
<form action="/submitContact" method="post">
<div class="field">
<label for="name">Your Name:</label>
<div class="control">
<input type="text" name="name" required placeholder="Your name"
class="input input-bordered w-full max-w-xs">
</div>
</div>
<div class="field">
<label for="email">Your Email:</label>
<div class="control">
<input type="email" name="email" required placeholder="Your email"
class="input input-bordered w-full max-w-xs">
</div>
</div>
<div class="field">
<label for="message">Your Message:</label>
<div class="control">
<textarea name="message" required placeholder="Type your message here"
class="textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<button type="submit" class="button is-primary">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div> </div>
<div class="contact-form">
<h2>Contact Form</h2>
<form action="/submitContact" method="post">
<div class="field">
<label for="name">Your Name:</label>
<div class="control">
<input type="text" name="name" required placeholder="Your name"
class="input input-bordered w-full max-w-xs">
</div>
</div>
<div class="field">
<label for="email">Your Email:</label>
<div class="control">
<input type="email" name="email" required placeholder="Your email"
class="input input-bordered w-full max-w-xs">
</div>
</div>
<div class="field">
<label for="message">Your Message:</label>
<div class="control">
<textarea name="message" required placeholder="Type your message here" class="textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<button type="submit" class="button is-primary">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
{{ end }} {{ end }}

View file

@ -1,9 +1,9 @@
{{ define "footer" }} {{ define "footer" }}
<footer class="footer"> <footer class="footer">
<div class="content has-text-centered is-widescreen"> <div class="content has-text-centered is-widescreen">
<p> <p>
&copy; {{.Year}} Dungeons and Dragons Monster Generator. Alle Rechte vorbehalten. &copy; {{.Year}} Dungeons and Dragons Monster Generator. Alle Rechte vorbehalten.
</p> </p>
</div> </div>
</footer> </footer>
{{ end }} {{ end }}

View file

@ -1,81 +1,82 @@
{{ define "header" }} {{ define "header" }}
<header> <header>
<nav class="navbar" role="navigation" aria-label="main navigation"> <nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
<span aria-hidden="true"></span> data-target="navbarBasicExample">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> <span aria-hidden="true"></span>
</div> </a>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a href="/" class="navbar-item" hx-get="/main" hx-target="#main-content" hx-boost="true">
Dungeons & Dragons
</a>
<a href="/about" class="navbar-item" hx-get="/about" hx-target="#main-content" hx-boost="true">
About
</a>
<a href="/contact" class="navbar-item" hx-get="/contact" hx-target="#main-content" hx-boost="true">
Contact
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<button id="switchButton" class="button is-light">
<span id="stylesheetIcon" class="icon">
<i class="fas fa-sun"></i>
</span>
</button>
</div> </div>
</div>
</div> <div id="navbarBasicExample" class="navbar-menu">
</nav> <div class="navbar-start">
<div class="tile is-ancestor"> <a href="/" class="navbar-item" hx-get="/main" hx-target="#main-content" hx-boost="true">
<div class="tile is-parent"> Dungeons & Dragons
<section class="tile is-child hero box is-widescreen"> </a>
<div class="hero-body is-flex is-justify-content-center is-align-items-center">
<div class="container has-text-centered"> <a href="/about" class="navbar-item" hx-get="/about" hx-target="#main-content" hx-boost="true">
<div class="hero-background"> About
<img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner"> </a>
<a href="/contact" class="navbar-item" hx-get="/contact" hx-target="#main-content" hx-boost="true">
Contact
</a>
</div> </div>
<div class="hero-content is-overlay">
<p class="title is-size-5-mobile is-size-1-desktop" <div class="navbar-end">
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> <div class="navbar-item">
Dungeons and Dragons Monster Generator <button id="switchButton" class="button is-light">
</p> <span id="stylesheetIcon" class="icon">
<i class="fas fa-sun"></i>
</span>
</button>
</div>
</div> </div>
</div>
</div> </div>
</section> </nav>
<div class="tile is-ancestor">
<div class="tile is-parent">
<section class="tile is-child hero box is-widescreen">
<div class="hero-body is-flex is-justify-content-center is-align-items-center">
<div class="container has-text-centered">
<div class="hero-background">
<img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner">
</div>
<div class="hero-content is-overlay">
<p class="title is-size-5-mobile is-size-1-desktop"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
Dungeons and Dragons Monster Generator
</p>
</div>
</div>
</div>
</section>
</div>
</div> </div>
</div> <script>
<script> document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => { const switchButton = document.getElementById("switchButton");
const switchButton = document.getElementById("switchButton"); const stylesheetIcon = document.getElementById("stylesheetIcon");
const stylesheetIcon = document.getElementById("stylesheetIcon");
if (switchButton) { if (switchButton) {
switchButton.addEventListener('click', switchStylesheet); switchButton.addEventListener('click', switchStylesheet);
} }
function switchStylesheet() { function switchStylesheet() {
const link = document.getElementById("customStylesheet"); const link = document.getElementById("customStylesheet");
// Ändere das Icon basierend auf dem aktuellen Stylesheet // Ändere das Icon basierend auf dem aktuellen Stylesheet
if (link.getAttribute("href") === "/static/darkly_bulmawatch.css") { if (link.getAttribute("href") === "/static/darkly_bulmawatch.css") {
link.setAttribute("href", "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"); link.setAttribute("href", "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css");
stylesheetIcon.innerHTML = '<i class="fas fa-moon"></i>'; // Zum Mond-Icon wechseln stylesheetIcon.innerHTML = '<i class="fas fa-moon"></i>'; // Zum Mond-Icon wechseln
} else { } else {
link.setAttribute("href", "/static/darkly_bulmawatch.css"); link.setAttribute("href", "/static/darkly_bulmawatch.css");
stylesheetIcon.innerHTML = '<i class="fas fa-sun"></i>'; // Zum Sonnen-Icon wechseln stylesheetIcon.innerHTML = '<i class="fas fa-sun"></i>'; // Zum Sonnen-Icon wechseln
} }
} }
}); });
</script> </script>
</header> </header>
{{ end }} {{ end }}

View file

@ -1,59 +1,59 @@
{{ define "monster" }} {{ define "monster" }}
<tr> <tr>
<td>{{.Name}}</td> <td>{{.Name}}</td>
<td>{{.Source}}</td> <td>{{.Source}}</td>
<td>{{range .Size}}{{.}}{{end}}</td> <td>{{range .Size}}{{.}}{{end}}</td>
<td>{{.Type}}</td> <td>{{.Type}}</td>
<td>{{range .Alignment}}{{.}}{{end}}</td> <td>{{range .Alignment}}{{.}}{{end}}</td>
<td>{{range .AC}}{{.AC}}{{end}}</td> <td>{{range .AC}}{{.AC}}{{end}}</td>
<td>{{range .AC}}{{.From}}{{end}}</td> <td>{{range .AC}}{{.From}}{{end}}</td>
<td>{{.HP.Average}}</td> <td>{{.HP.Average}}</td>
<td>{{.HP.Formula}}</td> <td>{{.HP.Formula}}</td>
<td>{{.Speed.Walk}}</td> <td>{{.Speed.Walk}}</td>
<td>{{.Speed.Swim}}</td> <td>{{.Speed.Swim}}</td>
<td>{{.Speed.Burrow}}</td> <td>{{.Speed.Burrow}}</td>
<td>{{.Speed.Climb}}</td> <td>{{.Speed.Climb}}</td>
<td>{{.Speed.Fly}}</td> <td>{{.Speed.Fly}}</td>
<td>{{.Str}}</td> <td>{{.Str}}</td>
<td>{{.Dex}}</td> <td>{{.Dex}}</td>
<td>{{.Con}}</td> <td>{{.Con}}</td>
<td>{{.Int}}</td> <td>{{.Int}}</td>
<td>{{.Wis}}</td> <td>{{.Wis}}</td>
<td>{{.Cha}}</td> <td>{{.Cha}}</td>
<td>{{.Save.Dex}}</td> <td>{{.Save.Dex}}</td>
<td>{{.Save.Con}}</td> <td>{{.Save.Con}}</td>
<td>{{.Save.Wis}}</td> <td>{{.Save.Wis}}</td>
<td>{{.Save.Str}}</td> <td>{{.Save.Str}}</td>
<td>{{.Save.Int}}</td> <td>{{.Save.Int}}</td>
<td>{{.Save.Cha}}</td> <td>{{.Save.Cha}}</td>
<td>{{.Skill.Perception}}</td> <td>{{.Skill.Perception}}</td>
<td>{{.Skill.Stealth}}</td> <td>{{.Skill.Stealth}}</td>
<td>{{.Skill.Acrobatics}}</td> <td>{{.Skill.Acrobatics}}</td>
<td>{{.Skill.AnimalHandling}}</td> <td>{{.Skill.AnimalHandling}}</td>
<td>{{.Skill.Arcana}}</td> <td>{{.Skill.Arcana}}</td>
<td>{{.Skill.Athletics}}</td> <td>{{.Skill.Athletics}}</td>
<td>{{.Skill.Deception}}</td> <td>{{.Skill.Deception}}</td>
<td>{{.Skill.History}}</td> <td>{{.Skill.History}}</td>
<td>{{.Skill.Insight}}</td> <td>{{.Skill.Insight}}</td>
<td>{{.Skill.Intimidation}}</td> <td>{{.Skill.Intimidation}}</td>
<td>{{.Skill.Investigation}}</td> <td>{{.Skill.Investigation}}</td>
<td>{{.Skill.Medicine}}</td> <td>{{.Skill.Medicine}}</td>
<td>{{.Skill.Nature}}</td> <td>{{.Skill.Nature}}</td>
<td>{{.Skill.Performance}}</td> <td>{{.Skill.Performance}}</td>
<td>{{.Skill.Persuasion}}</td> <td>{{.Skill.Persuasion}}</td>
<td>{{.Skill.SleightOfHand}}</td> <td>{{.Skill.SleightOfHand}}</td>
<td>{{.Skill.Survival}}</td> <td>{{.Skill.Survival}}</td>
<td>{{.Skill.Religion}}</td> <td>{{.Skill.Religion}}</td>
<td>{{range .Resist}}{{.}}{{end}}</td> <td>{{range .Resist}}{{.}}{{end}}</td>
<td>{{range .Immune}}{{.}}{{end}}</td> <td>{{range .Immune}}{{.}}{{end}}</td>
<td>{{range .Vulnerable}}{{.}}{{end}}</td> <td>{{range .Vulnerable}}{{.}}{{end}}</td>
<td>{{range .ConditionImmune}}{{.}}{{end}}</td> <td>{{range .ConditionImmune}}{{.}}{{end}}</td>
<td>{{range .Senses}}{{.}}{{end}}</td> <td>{{range .Senses}}{{.}}{{end}}</td>
<td>{{range .Languages}}{{.}}{{end}}</td> <td>{{range .Languages}}{{.}}{{end}}</td>
<td>{{.CR}}</td> <td>{{.CR}}</td>
<td>{{range .Traits}}{{.Name}}{{end}}</td> <td>{{range .Traits}}{{.Name}}{{end}}</td>
<td>{{range .Traits}}{{range .Entries}}{{.}}{{end}}{{end}}</td> <td>{{range .Traits}}{{range .Entries}}{{.}}{{end}}{{end}}</td>
<td>{{range .Actions}}{{.Name}}{{end}}</td> <td>{{range .Actions}}{{.Name}}{{end}}</td>
<td>{{range .Actions}}{{range .Entries}}{{.}}{{end}}{{end}}</td> <td>{{range .Actions}}{{range .Entries}}{{.}}{{end}}{{end}}</td>
</tr> </tr>
{{ end }} {{ end }}

View file

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