Berufsschule/Webshop
Berufsschule/Webshop
Template
5
2
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

Css angepasst. Ünnotiges Script gelöscht

Browse Source
This commit is contained in:
gitfreeking 2025-04-30 15:33:19 +02:00
parent a75bd6ee5f
commit 4ca9ee39e7
6 changed files with 109 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/Warenkorb/warenkorb.html
View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Warenkorb</title> <title>Warenkorb</title>
<link rel="stylesheet" href="/Styles/Warenkorb/warenkorb.css">
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script> <script src="/header_footer"></script>

156
public/bestellformular/bestellformular.html
View File

@ -4,7 +4,6 @@
<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>Bestellformular</title> <title>Bestellformular</title>
<link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css">
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script> <script src="/header_footer"></script>
@ -37,53 +36,14 @@
<label for="ort">Ort:</label> <label for="ort">Ort:</label>
<input type="text" id="ort" name="ort" required placeholder="Ort"> <input type="text" id="ort" name="ort" required placeholder="Ort">
<label for="ArtikelNr">Artikel Nr.:</label> <label>Artikel Nr. / Stückzahl:</label>
<div class="Artikel">
<button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
<input type="text" class="ArtikelNrText" id="ArtikelNr" name="ArtikelNr" required placeholder="Artikel Nr.">
<input type="text" class="StueckzahlText" id="Stueckzahl" name="Stueckzahl" required placeholder="Anzahl">
<div class="verfuegbarkeit"></div>
</div>
<style>
.Artikel {
display: flex;
align-content: center;
}
.ArtikelNrText {
max-width: 50%;
}
.StueckzahlText {
max-width: 15%;
margin-left: 2.5%;
}
.loeschen-button {
background-color: #ff6600;
color: white;
border: none;
border-radius: 5px;
width: 5%;
height: 30px;
cursor: pointer;
margin-right: 5px;
}
.verfuegbarkeit {
display: flex;
align-content: center;
max-width: 20%;
padding-left: 2.5%;
}
#KundenNr, #Vorname, #Nachname{
background-color: #F5F5F5;
border: none;
}
</style>
<a class="button-submit" id="sendOrder">Bestellung absenden</a> <a class="button-submit" id="sendOrder">Bestellung absenden</a>
<div class="link-text-formular">
<br>
<p>Zurück zum <a href="/Warenkorb">Warenkorb</a></p>
</div>
</form> </form>
</div> </div>
</main> </main>
@ -182,101 +142,8 @@
} }
}); });
// Artikelnummer prüfen bei Eingabe
formular.addEventListener('input', async function (event) {
if (event.target.classList.contains('ArtikelNrText')) {
if (event.target.value.trim() !== '') {
await pruefeVerfuegbarkeit(event.target);
fuegeNeuesArtikelFeldHinzu();
}
}
});
}); });
// Funktion: Verfügbarkeit prüfen
async function pruefeVerfuegbarkeit(inputFeld) {
const artikelnummer = inputFeld.value.trim();
const verfuegbarkeitDiv = inputFeld.parentElement.querySelector('.verfuegbarkeit');
const sendButton = document.getElementById('sendOrder');
if (artikelnummer.length === 0) {
verfuegbarkeitDiv.textContent = "";
return;
}
try {
const response = await fetch(`/api/pruefe-artikel?nummer=${encodeURIComponent(artikelnummer)}`);
const data = await response.json();
const artikelDivs = document.querySelectorAll('.Artikel');
let artikelVerfuegbarkeiten = [];
artikelDivs.forEach(div => {
const artikelNrInput = div.querySelector('.ArtikelNrText');
const verfDiv = div.querySelector('.verfuegbarkeit');
if (artikelNrInput.value.trim() !== '') {
if (artikelNrInput === inputFeld) {
if (data.verfuegbar) {
verfDiv.textContent = "Artikel verfügbar.";
verfDiv.style.color = "green";
artikelVerfuegbarkeiten.push(true);
} else {
verfDiv.textContent = "Artikel nicht verfügbar!";
verfDiv.style.color = "red";
artikelVerfuegbarkeiten.push(false);
}
} else {
// Für andere Felder bisherige Anzeige berücksichtigen
if (verfDiv.textContent.includes("nicht verfügbar")) {
artikelVerfuegbarkeiten.push(false);
} else {
artikelVerfuegbarkeiten.push(true);
}
}
}
});
// Button sperren/freigeben
if (artikelVerfuegbarkeiten.every(status => status === true)) {
sendButton.disabled = false;
} else {
sendButton.disabled = true;
}
} catch (error) {
console.error('Fehler bei der Artikelsuche:', error);
verfuegbarkeitDiv.textContent = "Fehler bei der Prüfung.";
verfuegbarkeitDiv.style.color = "orange";
sendButton.disabled = true;
}
}
// Funktion: Neues Artikelfeld hinzufügen
function fuegeNeuesArtikelFeldHinzu() {
const formular = document.getElementById('bestellform');
const artikelnummerFelder = formular.querySelectorAll('.ArtikelNrText');
const letztesFeld = artikelnummerFelder[artikelnummerFelder.length - 1];
if (letztesFeld && letztesFeld.value.trim() !== '') {
const neueArtikelDiv = document.createElement('div');
neueArtikelDiv.className = 'Artikel';
neueArtikelDiv.innerHTML = `
<input type="text" class="ArtikelNrText" name="ArtikelNr" required placeholder="Artikel Nr.">
<input type="text" class="StueckzahlText" name="Stueckzahl" required placeholder="Anzahl">
<div class="verfuegbarkeit"></div>
`;
const sendButton = document.getElementById('sendOrder');
formular.insertBefore(neueArtikelDiv, sendButton);
}
}
// Funktion: Artikel löschen
function loescheArtikel(button) {
const artikelDiv = button.parentElement;
artikelDiv.remove();
}
function ladeWarenkorb() { function ladeWarenkorb() {
// RICHTIG lesen: aus localStorage (nicht sessionStorage!) // RICHTIG lesen: aus localStorage (nicht sessionStorage!)
@ -294,18 +161,19 @@
const artikelDiv = document.createElement('div'); const artikelDiv = document.createElement('div');
artikelDiv.className = 'Artikel'; artikelDiv.className = 'Artikel';
artikelDiv.innerHTML = ` artikelDiv.innerHTML = `
<input type="text" class="ArtikelNrText" name="ArtikelNr" value="${produkt.product_id}" required placeholder="Artikel Nr."> <input type="text" class="ArtikelNrText" name="ArtikelNr" value="${produkt.product_id}" required readonly ="Artikel Nr.">
<input type="text" class="StueckzahlText" name="Stueckzahl" value="${produkt.quantity}" required placeholder="Anzahl"> <input type="text" class="StueckzahlText" name="Stueckzahl" value="${produkt.quantity}" required readonly ="Anzahl">
<div class="verfuegbarkeit"></div> <div class="verfuegbarkeit"></div>
`; `;
formular.insertBefore(artikelDiv, sendButton); formular.insertBefore(artikelDiv, sendButton);
}); });
} }
window.warenkorbLeeren = function (){ window.warenkorbLeeren = function () {
localStorage.removeItem('warenkorb'); // Oder: localStorage.setItem('warenkorb', '[]'); localStorage.removeItem('warenkorb'); // Oder: localStorage.setItem('warenkorb', '[]');
ladeWarenkorb(); // Aktualisiert die Ansicht ladeWarenkorb(); // Aktualisiert die Ansicht
if (window.zeigeWarenkorbAnzahl) zeigeWarenkorbAnzahl(); // Optional: Warenkorb-Zähler im Header aktualisieren if (window.zeigeWarenkorbAnzahl) zeigeWarenkorbAnzahl(); // Warenkorb-Zähler im Header aktualisieren
} }
</script> </script>

1
public/bestellung/bestellung.html
View File

@ -4,7 +4,6 @@
<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>Ihre Bestellung</title> <title>Ihre Bestellung</title>
<link rel="stylesheet" href="/Styles/bestellung/bestellung.css">
<link rel="stylesheet" href="/Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script> <script src="/header_footer"></script>

0
static/Styles/bestellformular/bestellformular.css
View File

2
static/Styles/registrieren/registrieren.css
View File

@ -53,7 +53,7 @@
.register-link { .register-link {
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
margin-top: 15px; margin-top: 5px;
} }
.register-link a { .register-link a {

106
static/Styles/styles-main.css
View File

@ -421,12 +421,43 @@ main > h2 {
/* ========== Bestellformular Styling ========== */ /* ========== Bestellformular Styling ========== */
.form-container { .form-container {
background: #ffffff; background: #fff;
border-radius: 12px; max-width: 700px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
padding: 30px;
max-width: 600px;
margin: 40px auto; margin: 40px auto;
padding: 30px;
border-radius: 20px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
#bestellform {
display: flex;
flex-direction: column;
gap: 15px;
}
#bestellform h2 {
text-align: center;
margin-bottom: 10px;
font-size: 26px;
color: #ff6600;
}
#bestellform label {
font-weight: 500;
font-weight: bold;
}
#bestellform input[type="text"] {
padding: 12px;
border-radius: 10px;
border: 1px solid #ccc;
font-size: 16px;
transition: border-color 0.3s;
}
#bestellform input[type="text"]:focus {
border-color: #ff6600;
outline: none;
} }
h2 { h2 {
@ -461,19 +492,27 @@ input[type="text"]:focus, input[type="number"]:focus {
.Artikel { .Artikel {
display: flex; display: flex;
flex-wrap: wrap; gap: 5px;
gap: 10px;
align-items: center; align-items: center;
margin-bottom: 20px; flex-wrap: wrap;
}
.Artikel input {
flex: 1 1 120px;
margin-bottom: 5px;
}
.Artikel .verfuegbarkeit {
font-size: 14px;
flex-basis: 100%;
margin-top: 5px;
} }
.ArtikelNrText, .StueckzahlText { .ArtikelNrText, .StueckzahlText {
width: calc(50% - 5px); width: calc(50% - 5px);
padding: 10px;
font-size: 16px; font-size: 16px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #ddd; border: 1px solid #ddd;
margin-right: 10px;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
@ -497,6 +536,24 @@ input[type="text"]:focus, input[type="number"]:focus {
background-color: #c0392b; background-color: #c0392b;
} }
.button-submit {
margin-top: 20px;
padding: 14px;
background: #ff6600;
color: white;
font-weight: bold;
border-radius: 25px;
text-align: center;
display: inline-block;
cursor: pointer;
transition: background 0.3s ease;
text-decoration: none;
}
.button-submit:hover {
background: #e95b00;
}
.verfuegbarkeit { .verfuegbarkeit {
font-size: 14px; font-size: 14px;
color: #888; color: #888;
@ -536,6 +593,35 @@ input[type="text"]:focus, input[type="number"]:focus {
} }
} }
.link-text-formular {
text-align: center;
font-size: 17px;
color: #555;
}
.link-text-formular a {
color: #ff6600;
text-decoration: none;
font-weight: 500;
}
.link-text-formular a:hover {
text-decoration: underline;
}
input[readonly] {
background-color: #f0f0f0;
color: #666;
border: 1px dashed #999;
cursor: not-allowed;
}
input:not([readonly]) {
background-color: #ffffff;
color: #000;
border: 1px solid #333;
}
/* ========== Formulare und Buttons allgemein ========== */ /* ========== Formulare und Buttons allgemein ========== */
.input-box { .input-box {
position: relative; position: relative;