fix: Missing files
Lunix-420
parent
042f563086
commit
df8f6aebea
|
|
@ -0,0 +1,18 @@
|
|||
footer {
|
||||
background-color: var(--cosmic-dark-dark);
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: var(--starlight-white-lighter);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--aurora-yellowgreen-lighter);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: var(--aurora-yellowgreen-light);
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
header {
|
||||
background-color: var(--cosmic-dark-dark);
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--starlight-white-dark);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
color: var(--starlight-white-lighter);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header .nav-link {
|
||||
color: var(--aurora-yellowgreen-lighter);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header .nav-link.active {
|
||||
font-weight: bold;
|
||||
color: var(--aurora-yellowgreen-light);
|
||||
}
|
||||
|
||||
header .nav-link:hover {
|
||||
color: var(--aurora-yellowgreen-light);
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
Only for global variables
|
||||
*/
|
||||
|
||||
:root {
|
||||
--aurora-yellowgreen-lighter: #dedc00;
|
||||
--aurora-yellowgreen-light: #c5c400;
|
||||
--aurora-yellowgreen-dark: #aaaa00;
|
||||
--aurora-yellowgreen-darker: #868600;
|
||||
|
||||
--cosmic-dark-darker: #00122a;
|
||||
--cosmic-dark-dark: #001b41;
|
||||
--cosmic-dark-medium: #263c61;
|
||||
--cosmic-dark-light: #6b7696;
|
||||
--cosmic-dark-lighter: #a3a9b3;
|
||||
|
||||
--starlight-white-lighter: #ffffff;
|
||||
--starlight-white-light: #f2f4f5
|
||||
--starlight-white-dark: #e4e8ec;
|
||||
--starlight-white-darker: #ccd1d9;
|
||||
|
||||
--skin-tone-lighter: #ffb27d;
|
||||
--skin-tone-light: #ed985f;
|
||||
--skin-tone-medium: #b56f40;
|
||||
--skin-tone-dark: #99592e;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: "Barlow", sans-serif;
|
||||
background-color: var(--starlight-white-light);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/* Placeholder */
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.project-card {
|
||||
background-color: var(--cosmic-dark-dark);
|
||||
color: var(--starlight-white-lighter);
|
||||
border: 1px solid var(--cosmic-dark-medium);
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.project-card .card-title {
|
||||
color: var(--starlight-white-lighter);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-create-project {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--cosmic-dark-dark);
|
||||
background-color: var(--aurora-yellowgreen-lighter);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-create-project:hover {
|
||||
background-color: var(--aurora-yellowgreen-light);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--cosmic-dark-dark);
|
||||
background-color: var(--aurora-yellowgreen-lighter);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: var(--aurora-yellowgreen-light);
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
.project-card {
|
||||
background-color: var(--cosmic-dark-dark);
|
||||
color: var(--starlight-white-lighter);
|
||||
border: 1px solid var(--cosmic-dark-medium);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.project-card .card-title {
|
||||
color: var(--starlight-white-lighter);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.project-card .card-text {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.project-card .card-text .star {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.btn-create-project {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--cosmic-dark-dark);
|
||||
background-color: var(--aurora-yellowgreen-lighter);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-create-project:hover {
|
||||
background-color: var(--aurora-yellowgreen-light);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--cosmic-dark-dark);
|
||||
background-color: var(--aurora-yellowgreen-lighter);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: var(--aurora-yellowgreen-light);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: var(--starlight-white-lighter);
|
||||
color: var(--starlight-white-lighter);
|
||||
border: 1px solid var(--cosmic-dark-medium);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: var(--starlight-white-darker);
|
||||
}
|
||||
|
||||
.star-filled {
|
||||
color: var(--aurora-yellowgreen-lighter);
|
||||
}
|
||||
|
||||
.star-empty {
|
||||
color: var(--cosmic-dark-light) !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<footer th:fragment="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p>© INTER Versicherungsgruppe</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-right">
|
||||
<a href="impressum" class="mr-3">Impressum</a>
|
||||
<a href="datenschutz">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<header th:fragment="header(activePage)">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<h1>INTER</h1>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nav>
|
||||
<ul class="nav justify-content-end">
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link"
|
||||
th:href="@{/projects}"
|
||||
th:classappend="${activePage == 'projects' ? 'active' : ''}"
|
||||
>Projekte</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link"
|
||||
th:href="@{/skills}"
|
||||
th:classappend="${activePage == 'profile' ? 'active' : ''}"
|
||||
>Skills</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<th:block th:fragment="metadata">
|
||||
<meta name="keywords" content="'maradona, inter, skill'" />
|
||||
<meta name="description" content="Maradona Beschreibung" />
|
||||
<meta name="author" content="Maradona" />
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<link rel="stylesheet" href="/header.css" />
|
||||
<link rel="stylesheet" href="/footer.css" />
|
||||
</th:block>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<div th:replace="~{_metadata :: metadata}"></div>
|
||||
<title>Impressum</title>
|
||||
</head>
|
||||
<body>
|
||||
<div th:replace="~{_header :: header(activePage=${home})}"></div>
|
||||
<div>
|
||||
<h1>Datenschutzerklärung</h1>
|
||||
|
||||
<h2>1. Allgemeine Hinweise</h2>
|
||||
<p>
|
||||
Diese Datenschutzerklärung klärt Sie über die Art, den Umfang und Zweck
|
||||
der Verarbeitung von personenbezogenen Daten auf unserer Webseite auf.
|
||||
Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst und behandeln
|
||||
Ihre personenbezogenen Daten vertraulich und entsprechend der
|
||||
gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
|
||||
</p>
|
||||
|
||||
<h2>2. Verantwortlicher</h2>
|
||||
<p>
|
||||
Verantwortlicher für die Datenverarbeitung auf dieser Website ist:<br />
|
||||
[Name des Unternehmens]<br />
|
||||
[Adresse]<br />
|
||||
[Telefonnummer]<br />
|
||||
[E-Mail-Adresse]
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
3. Erhebung und Speicherung personenbezogener Daten sowie Art und Zweck
|
||||
von deren Verwendung
|
||||
</h2>
|
||||
<p>
|
||||
Beim Besuch unserer Website werden automatisch Informationen durch den
|
||||
Browser des Besuchers an den Server unserer Website gesendet. Diese
|
||||
Informationen werden temporär in einem sogenannten Logfile gespeichert.
|
||||
Folgende Informationen werden dabei ohne Ihr Zutun erfasst und bis zur
|
||||
automatisierten Löschung gespeichert:
|
||||
</p>
|
||||
<ul>
|
||||
<li>IP-Adresse des anfragenden Rechners</li>
|
||||
<li>Datum und Uhrzeit des Zugriffs</li>
|
||||
<li>Name und URL der abgerufenen Datei</li>
|
||||
<li>Website, von der aus der Zugriff erfolgt (Referrer-URL)</li>
|
||||
<li>
|
||||
Verwendeter Browser und ggf. das Betriebssystem Ihres Rechners sowie
|
||||
der Name Ihres Access-Providers
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>4. Cookies</h2>
|
||||
<p>
|
||||
Wir verwenden auf unserer Website Cookies. Cookies sind kleine Dateien,
|
||||
die Ihr Browser automatisch erstellt und die auf Ihrem Endgerät
|
||||
gespeichert werden, wenn Sie unsere Seite besuchen. Sie richten auf
|
||||
Ihrem Endgerät keinen Schaden an und enthalten keine Viren, Trojaner
|
||||
oder sonstige Schadsoftware. In dem Cookie werden Informationen
|
||||
abgelegt, die sich jeweils im Zusammenhang mit dem spezifisch
|
||||
eingesetzten Endgerät ergeben.
|
||||
</p>
|
||||
|
||||
<h2>5. Rechte der betroffenen Person</h2>
|
||||
<p>Sie haben das Recht:</p>
|
||||
<ul>
|
||||
<li>
|
||||
gemäß Art. 15 DSGVO Auskunft über Ihre von uns verarbeiteten
|
||||
personenbezogenen Daten zu verlangen;
|
||||
</li>
|
||||
<li>
|
||||
gemäß Art. 16 DSGVO unverzüglich die Berichtigung unrichtiger oder
|
||||
Vervollständigung Ihrer bei uns gespeicherten personenbezogenen Daten
|
||||
zu verlangen;
|
||||
</li>
|
||||
<li>
|
||||
gemäß Art. 17 DSGVO die Löschung Ihrer bei uns gespeicherten
|
||||
personenbezogenen Daten zu verlangen;
|
||||
</li>
|
||||
<li>
|
||||
gemäß Art. 18 DSGVO die Einschränkung der Verarbeitung Ihrer
|
||||
personenbezogenen Daten zu verlangen;
|
||||
</li>
|
||||
<li>
|
||||
gemäß Art. 20 DSGVO Ihre personenbezogenen Daten, die Sie uns
|
||||
bereitgestellt haben, in einem strukturierten, gängigen und
|
||||
maschinenlesbaren Format zu erhalten oder die Übermittlung an einen
|
||||
anderen Verantwortlichen zu verlangen;
|
||||
</li>
|
||||
<li>
|
||||
gemäß Art. 77 DSGVO sich bei einer Aufsichtsbehörde zu beschweren.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>6. Kontaktaufnahme</h2>
|
||||
<p>
|
||||
Bei Fragen zur Erhebung, Verarbeitung oder Nutzung Ihrer
|
||||
personenbezogenen Daten, bei Auskünften, Berichtigung, Sperrung oder
|
||||
Löschung von Daten sowie Widerruf erteilter Einwilligungen wenden Sie
|
||||
sich bitte an:<br />
|
||||
[E-Mail-Adresse für Datenschutzanfragen]
|
||||
</p>
|
||||
</div>
|
||||
<div th:replace="~{_footer :: footer}"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<div th:replace="~{_metadata :: metadata}"></div>
|
||||
<title>Impressum</title>
|
||||
</head>
|
||||
<body>
|
||||
<div th:replace="~{_header :: header(activePage=${home})}"></div>
|
||||
<div>
|
||||
<h1>Impressum</h1>
|
||||
<h2>Angaben gemäß § 5 TMG</h2>
|
||||
<p>
|
||||
Max Mustermann<br />
|
||||
Musterstraße 1<br />
|
||||
12345 Musterstadt<br />
|
||||
Deutschland
|
||||
</p>
|
||||
|
||||
<h2>Kontakt</h2>
|
||||
<p>
|
||||
Telefon: +49 (0)123 456 7890<br />
|
||||
E-Mail: <a href="mailto:info@beispiel.de">info@beispiel.de</a>
|
||||
</p>
|
||||
|
||||
<h2>Vertreten durch</h2>
|
||||
<p>Max Mustermann</p>
|
||||
|
||||
<h2>Registereintrag</h2>
|
||||
<p>
|
||||
Eintragung im Handelsregister.<br />
|
||||
Registergericht: Musterstadt<br />
|
||||
Registernummer: HRB 12345
|
||||
</p>
|
||||
|
||||
<h2>Umsatzsteuer-ID</h2>
|
||||
<p>
|
||||
Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:<br />
|
||||
DE123456789
|
||||
</p>
|
||||
|
||||
<h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
|
||||
<p>
|
||||
Max Mustermann<br />
|
||||
Musterstraße 1<br />
|
||||
12345 Musterstadt
|
||||
</p>
|
||||
|
||||
<h2>Haftungsausschluss</h2>
|
||||
<h3>Haftung für Inhalte</h3>
|
||||
<p>
|
||||
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die
|
||||
Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir
|
||||
jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7
|
||||
Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen
|
||||
Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als
|
||||
Diensteanbieter jedoch nicht verpflichtet, übermittelte oder
|
||||
gespeicherte fremde Informationen zu überwachen oder nach Umständen zu
|
||||
forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
|
||||
</p>
|
||||
|
||||
<h3>Haftung für Links</h3>
|
||||
<p>
|
||||
Unser Angebot enthält Links zu externen Websites Dritter, auf deren
|
||||
Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden
|
||||
Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten
|
||||
Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten
|
||||
verantwortlich.
|
||||
</p>
|
||||
|
||||
<h2>Urheberrecht</h2>
|
||||
<p>
|
||||
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen
|
||||
Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung,
|
||||
Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der
|
||||
Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des
|
||||
jeweiligen Autors bzw. Erstellers.
|
||||
</p>
|
||||
</div>
|
||||
<div th:replace="~{_footer :: footer}"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<div th:replace="~{_metadata :: metadata}"></div>
|
||||
<title>My Skill Management System</title>
|
||||
<link rel="stylesheet" href="/notes.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div th:replace="~{_header :: header(activePage=${home})}"></div>
|
||||
<div class="content container mt-4"></div>
|
||||
<div th:replace="~{_footer :: footer}"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<div th:replace="~{_metadata :: metadata}"></div>
|
||||
<title>Create Project</title>
|
||||
<link rel="stylesheet" href="/projects.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div th:replace="~{_header :: header(activePage=${createProject})}"></div>
|
||||
<div class="content container mt-4">
|
||||
<h2 class="mb-4">Create Project</h2>
|
||||
<form
|
||||
th:action="@{/projects/save}"
|
||||
th:object="${project}"
|
||||
method="post"
|
||||
class="project-card"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="name">Project Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
th:field="*{name}"
|
||||
class="form-control"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="startDate">Start Date:</label>
|
||||
<input
|
||||
type="date"
|
||||
id="startDate"
|
||||
th:field="*{startDate}"
|
||||
class="form-control"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="endDate">End Date:</label>
|
||||
<input
|
||||
type="date"
|
||||
id="endDate"
|
||||
th:field="*{endDate}"
|
||||
class="form-control"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn-create-project">
|
||||
Save Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div th:replace="~{_footer :: footer}"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<div th:replace="~{_metadata :: metadata}"></div>
|
||||
<title>My Skill Management System</title>
|
||||
<link rel="stylesheet" href="/projects.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div th:replace="~{_header :: header(activePage=${home})}"></div>
|
||||
<div class="content container mt-4">
|
||||
<h2 class="mb-4">Projects</h2>
|
||||
<a th:href="@{/projects/create}" class="btn-create-project"
|
||||
>Create Project</a
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-12" th:each="project : ${projectData}">
|
||||
<div class="project-card mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" th:text="${project.name}">
|
||||
Project Name
|
||||
</h5>
|
||||
<div class="card-details">
|
||||
<div class="card-text">
|
||||
<strong>Start Date:</strong>
|
||||
<span th:text="${project.startDate}">Start Date</span><br />
|
||||
<strong>End Date:</strong>
|
||||
<span th:text="${project.endDate}">End Date</span>
|
||||
</div>
|
||||
<form
|
||||
th:action="@{/projects/delete}"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
>
|
||||
<input type="hidden" name="id" th:value="${project.id}" />
|
||||
<button type="submit" class="btn-delete">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:replace="~{_footer :: footer}"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<title>Add Skill</title>
|
||||
<!-- never remove this metadata -->
|
||||
<div th:replace="~{_metadata :: metadata}"></div>
|
||||
<link rel="stylesheet" href="/skills.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div th:replace="~{_header :: header(activePage=${skills})}"></div>
|
||||
<div class="content container mt-4">
|
||||
<h2 class="mb-4">Add Skill</h2>
|
||||
<form
|
||||
th:action="@{/skills/add}"
|
||||
th:object="${skillForm}"
|
||||
method="post"
|
||||
class="project-card"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label for="primarySkill">Primary Skill</label>
|
||||
<select
|
||||
id="primarySkill"
|
||||
name="primarySkillId"
|
||||
class="form-control"
|
||||
th:field="*{primarySkillId}"
|
||||
>
|
||||
<option
|
||||
th:each="primarySkill : ${primarySkills}"
|
||||
th:value="${primarySkill.psid}"
|
||||
th:text="${primarySkill.description}"
|
||||
></option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="secondarySkill">Secondary Skill</label>
|
||||
<select
|
||||
id="secondarySkill"
|
||||
name="secondarySkillId"
|
||||
class="form-control"
|
||||
th:field="*{secondarySkillId}"
|
||||
>
|
||||
<option value="" disabled selected>
|
||||
Select a secondary skill
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="level">Level</label>
|
||||
<select
|
||||
id="level"
|
||||
name="level"
|
||||
class="form-control"
|
||||
th:field="*{level}"
|
||||
>
|
||||
<option
|
||||
th:each="level : ${#numbers.sequence(1, 5)}"
|
||||
th:value="${level}"
|
||||
th:text="${level}"
|
||||
></option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn-create-project">Add Skill</button>
|
||||
</form>
|
||||
</div>
|
||||
<div th:replace="~{_footer :: footer}"></div>
|
||||
</div>
|
||||
<script>
|
||||
document
|
||||
.getElementById("primarySkill")
|
||||
.addEventListener("change", function () {
|
||||
var primarySkillId = this.value;
|
||||
fetch("/skills/secondary-skills?primarySkillId=" + primarySkillId)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log("Fetch response data:", data);
|
||||
var secondarySkillSelect =
|
||||
document.getElementById("secondarySkill");
|
||||
secondarySkillSelect.innerHTML =
|
||||
'<option value="" disabled selected>Select a secondary skill</option>';
|
||||
data.forEach(function (secondarySkill) {
|
||||
var option = document.createElement("option");
|
||||
option.value = secondarySkill.ssid;
|
||||
option.text = secondarySkill.description;
|
||||
secondarySkillSelect.add(option);
|
||||
});
|
||||
})
|
||||
.catch((error) =>
|
||||
console.error("Error fetching secondary skills:", error)
|
||||
);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<div th:replace="~{_metadata :: metadata}"></div>
|
||||
<title>Create Skill</title>
|
||||
<link rel="stylesheet" href="/skills.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div th:replace="~{_header :: header(activePage=${createSkill})}"></div>
|
||||
<div class="content container mt-4">
|
||||
<h2 class="mb-4">Create Skill</h2>
|
||||
<form
|
||||
th:action="@{/skills/save}"
|
||||
th:object="${secondarySkill}"
|
||||
method="post"
|
||||
class="project-card"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="primarySkill">Primary Skill:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="primarySkill"
|
||||
th:field="*{primarySkill.description}"
|
||||
class="form-control"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="secondarySkill">Secondary Skill:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="secondarySkill"
|
||||
th:field="*{description}"
|
||||
class="form-control"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn-create-project">
|
||||
Save Skill
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div th:replace="~{_footer :: footer}"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<div th:replace="~{_metadata :: metadata}"></div>
|
||||
<title>My Skill Management System</title>
|
||||
<link rel="stylesheet" href="/skills.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div th:replace="~{_header :: header(activePage=${skills})}"></div>
|
||||
<div class="content container mt-4">
|
||||
<h2 class="mb-4">Profile</h2>
|
||||
<div class="project-card mb-4">
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li th:text="${employee.formOfAddress.description}">
|
||||
Form of Address
|
||||
</li>
|
||||
<li th:text="${employee.firstName}">First Name</li>
|
||||
<li th:text="${employee.lastName}">Last Name</li>
|
||||
<li th:text="${employee.mail}">Email</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2 class="mb-0">Skills</h2>
|
||||
<div>
|
||||
<a th:href="@{/skills/add}" class="btn-create-project">Add Skill</a>
|
||||
<a th:href="@{/skills/create}" class="btn-create-project"
|
||||
>Create Skill</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12" th:each="skillDto : ${skillData}">
|
||||
<div class="project-card mb-4">
|
||||
<div class="card-body">
|
||||
<h5
|
||||
class="card-title"
|
||||
th:text="${skillDto.primarySkill.description}"
|
||||
>
|
||||
Primary Skill
|
||||
</h5>
|
||||
<div class="card-details">
|
||||
<div class="card-text">
|
||||
<ul>
|
||||
<li th:each="pair : ${skillDto.secondarySkills}">
|
||||
<span th:text="${pair.first.description}"
|
||||
>Secondary Skill</span
|
||||
>
|
||||
<span class="stars">
|
||||
<span th:each="i : ${#numbers.sequence(1, 5)}">
|
||||
<form
|
||||
th:action="@{/skills/update-level}"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="skillId"
|
||||
th:value="${pair.first.ssid}"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="level"
|
||||
th:value="${i}"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
th:classappend="${i <= pair.second} ? 'star-filled' : 'star-empty'"
|
||||
class="star"
|
||||
>
|
||||
★
|
||||
</button>
|
||||
</form>
|
||||
</span>
|
||||
</span>
|
||||
<form
|
||||
th:action="@{/skills/remove}"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="id"
|
||||
th:value="${pair.first.ssid}"
|
||||
/>
|
||||
<button type="submit" class="btn-delete">
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:replace="~{_footer :: footer}"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue