Skip to content
Snippets Groups Projects
Commit 819e7f87 authored by Colin Jakob's avatar Colin Jakob
Browse files

Erstes Frontend Anforderungsübersicht

parent a9a2d274
No related branches found
No related tags found
3 merge requests!4merge dev to main,!3merge for implement frontend with backend,!2git commit -m "Fix critical template rendering errors in project management pages
Hide whitespace changes
Inline Side-by-side
templates/project/test.go.html
+ 211
− 0
View file @ 819e7f87
<!--{{ define "requirement-collection" }}-->
<!--
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Anforderungsübersicht</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container mt-5">
<h1>Anforderungsübersicht</h1>
<table class="table table-hover">
<thead class="table-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Beschreibung</th>
<th scope="col">Status</th>
<th scope="col">Aktionen</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>John</td>
<td>Doe</td>
<td>@social</td>
</tr>
</tbody>
</table>
</body>
</html>
-->
<!--
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Anforderungsübersicht</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h1>Anforderungsübersicht</h1>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Suche" aria-label="Suche">
<button class="btn btn-outline-success" type="submit" aria-label="Suchen">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
</button>
</form>
<table class="table table-hover">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>Beschreibung</th>
<th>Status</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody class="table-group-divider">
{{range .Requirements}}
<tr>
<td>{{.ID}}</td>
<td>{{.Beschreibung}}</td>
<td>
<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Offen
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Offen</a></li>
<li><a class="dropdown-item" href="#">In Bearbeitung</a></li>
<li><a class="dropdown-item" href="#">Geschlossen</a></li>
</ul>
</div>
</td>
<td><button class="btn btn-sm btn-primary">Bearbeiten</button></td>
</tr>
{{else}}
<tr>
<td colspan="4" class="text-center">Keine Anforderungen vorhanden</td>
</tr>
{{end}}
</tbody>
</table>
</div>
</body>
</html>
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Anforderungsübersicht</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.search-input-wrapper {
position: relative;
width: 100%;
max-width: 400px; /* Optional, max Breite */
}
.search-input-wrapper svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #6c757d; /* Bootstrap Grauton */
width: 16px;
height: 16px;
z-index: 2;
pointer-events: auto;
}
.search-input-wrapper input {
padding-left: 38px; /* Platz für Icon */
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Anforderungsübersicht</h1>
<!-- This is the Search bar -->
<form class="d-flex" role="search" onsubmit="event.preventDefault(); alert('Suche: ' + document.getElementById('searchInput').value);">
<div class="search-input-wrapper me-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" onclick="document.getElementById('searchInput').focus();" aria-label="Such-Icon" role="button" tabindex="0" onkeydown="if(event.key==='Enter' || event.key===' ') { event.preventDefault(); document.getElementById('searchInput').focus(); }">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
<input id="searchInput" class="form-control" type="search" placeholder="Suche" aria-label="Suche" />
</div>
<button class="btn btn-outline-success" type="submit" aria-label="Suchen">Suchen</button>
</form>
<!--This is the Table with a hover function-->
<table class="table table-hover mt-4">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>Beschreibung</th>
<th>Status</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody class="table-group-divider">
{{range .Requirements}}
<tr>
<td>{{.ID}}</td>
<td>{{.Beschreibung}}</td>
<td>
<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Offen
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Offen</a></li>
<li><a class="dropdown-item" href="#">In Bearbeitung</a></li>
<li><a class="dropdown-item" href="#">Geschlossen</a></li>
</ul>
</div>
</td>
<td><button class="btn btn-sm btn-primary">Bearbeiten</button></td>
</tr>
{{else}}
<tr>
<td colspan="4" class="text-center">Keine Anforderungen vorhanden</td>
</tr>
{{end}}
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment