From d098eae761a991f57f149c2b69d9b528a101c3cb Mon Sep 17 00:00:00 2001
From: Charles 'XP' Xavier <jmueller@d120.de>
Date: Tue, 11 Mar 2025 14:23:34 +0100
Subject: [PATCH] Some minor changes, added php file, creating Database
---
README.md | 33 ++++++++++++++++++++++++++++++
index.html | 25 +++++++++++++++++++----
mifflin.php | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++
style.css | 43 ++++++++++++++++++++++++++++++++++++--
4 files changed, 154 insertions(+), 6 deletions(-)
create mode 100644 mifflin.php
diff --git a/README.md b/README.md
index 037f749..6e0d59f 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@
## Current State
- Frontpage created
+ - MySQL Datenbank und generischer Nutzer erstellt
## Features
@@ -19,6 +20,7 @@
### Intern
- Inventur durchführen
- Gegenstand suchen, Lagerort ausgeben
+ - Gegenstand scannen um Soll-Lagerort zu erhalten
- Gegenstand einlagern
- Gegenstand auslagern
- Gegenstand Lagerort anpassen/ändern
@@ -47,12 +49,43 @@
- Lagerort Raum
- Anzahl
- Verleihstatus
+ - Nutzer der Gegenstand zuletzt ein/ausgelagert hat
## Aufbau des Webinterfaces
+## Bedienung
+ - Benötigt werden Zugang zum Webtool (WLan und FS-Account) und ein Barcodescanner
+ - Sollte jedes Smartphone von Haus aus können
+ - Für Laptops gibts Barcodescanner die entweder per USB oder Bluetooth verbunden werden können
+
+### Einlagerung
+ - via SSO Einloggen
+ - Auf den Reiter "Einlagerung" gehen
+ - Gegenstand scannen
+ - an den vorgesehenen Platz legen
+ - Einlagerung bestätigen
+ - ggfs ausloggen
+
---
## Inventur: Ablauf
+ - Laptop mit Barcodescanner oder Smartphone bereit legen
+ - Akkuladestand prüfen
+ - Im Webtool via SSO einloggen und auf den Reiter "Inventur" gehen
+ - "Start" auswählen
+ - Nachfolgend wiederholen:
+ - Raum auswählen
+ - Anweisungen im Tool befolgen (Alles im genannten Regal/Schrank scannen)
+ - Nachdem alles gescannt wurde die Eingabe bestätigen
+ - Nachdem alle Schränke in allen Räumen gescannt wurden einmal "Bestätigen" auswählen
+ - Nachfolgend werden 2 Listen erstellt:
+ - Liste mit fehlenden Gegenständen
+ - Liste mit falsch eingelagerten Gegenständen
+
+Die Liste mit den flasch eingelagerten Gegenständen gibt euch den jetzigen (durch die Inventarisierung ermittelten) Ort, zusammen mit dem Soll-Ort an. Ihr könnt anschließend die Funktion "Option 1 korregieren" sowie "Option 2" nutzen. Beides ist ein vereinfachtes Umlagern. Bei ersterem scannt ihr einen Gegenstand auf der Liste und bestätigt anschließend, dass er jetzt an seinem Soll-Ort liegt. Bei zweiterem werden die ermittelten Lagerorte als neue Lagerorte für die Gegenstände verwendet und eine automatische "Umlagerung" aller aufgelisteten Gegenstände durchgeführt.
+
+Tipp für gemischte Korrekturen:
+Nutzt zuerst "Option 1" und bringt die "falsch" eingelagerten Gegenstände an ihren eigentlichen Ort zurück und verwendet anschließend für die übrige Liste "Option 2"
#### Test User
- Name: inventory
diff --git a/index.html b/index.html
index 088cc3b..a89c3e3 100644
--- a/index.html
+++ b/index.html
@@ -7,16 +7,33 @@
</head>
<body class="container">
<header>
- Put navigation here
+ <ul>
+ <li>
+ <a href="index.html">HTML</a>
+ </li>
+ <li>
+ <a href="mifflin.php">PHP</a>
+ </li>
+ </ul>
</header>
<div class="news">
- NEWS!
+ NEWS!
</div>
<div class="navigation">
- Navigation
+ <ul>
+ <li>
+ klick mich
+ </li>
+ <li>
+ klick mich
+ </li>
+ </ul>
</div>
<div class="search-bar">
- What are you looking for?
+ <form>
+ <label for="input"> Search query: </label><br>
+ <input type="text" id="frame" name="input"><br>
+ </form>
</div>
<div class="result">
Here's what i found:
diff --git a/mifflin.php b/mifflin.php
new file mode 100644
index 0000000..960e863
--- /dev/null
+++ b/mifflin.php
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="de">
+<meta charset="utf-8">
+<head>
+ <title>DunderMifflin</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+ <body class="container">
+ <header>
+ <ul>
+ <li>
+ <a href="index.html">HTML</a>
+ </li>
+ <li>
+ <a href="mifflin.php">PHP</a>
+ </li>
+ </ul>
+ </header>
+ <div class="news">
+ NEWS!
+ </div>
+ <div class="navigation">
+ <ul>
+ <li>
+ SHOW TABLES
+ </li>
+ <li>
+ klick mich
+ </li>
+ </ul>
+ </div>
+ <div class="search-bar">
+ <form>
+ <label for="input"> Search query: </label><br>
+ <input type="text" id="frame" name="input"><br>
+ </form>
+ </div>
+ <div class="result">
+ Here's what i found:
+ <?php
+ $servername = "localhost";
+ $username = "inventory";
+ $password = "password";
+
+ // Create connection
+ $conn = new mysqli($servername, $username, $password);
+
+ // Check connection
+ if ($conn->connect_error) {
+ die("Connection failed: " . $conn->connect_error);
+ }
+ echo "Connected successfully";
+?>
+ </div>
+ <!--<footer>
+ Impress etc...
+ </footer>-->
+ </body>
+</html>
diff --git a/style.css b/style.css
index 6ee86d4..172271c 100644
--- a/style.css
+++ b/style.css
@@ -34,7 +34,29 @@ header {
top: 0px;
padding: 0px;
+ display: grid;
+ /*grid-template-areas: 'left' 'right';*/
}
+header ul{
+ /*grid-area: left;*/
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ /*background-color: var(--matrix);*/
+}
+header li {
+ float: left;
+}
+
+li a {
+ display: block;
+ color: white;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+}
+
.container {
display: grid;
grid-template-areas: 'header header' 'news news' 'navigation search-bar' 'navigation result' 'footer footer';
@@ -43,22 +65,39 @@ header {
max-width: 800px;
margin-left: auto;
margin-right: auto;
- row-gap: 5px;
+ gap: 5px;
}
.navigation {
grid-area: navigation;
+ /*width: 30px;*/
+ text-align: center;
+ border: solid;
+ border-color: var(--pink);
+ border-width: 4px;
+ overflow: hidden;
}
.result {
grid-area: result;
+ /*width: 500px;*/
+ border: solid;
+ border-color: var(--silicon);
+ border-width: 2px;
}
.news {
grid-area: news;
+ text-align: center;
}
.search-bar {
grid-area: search-bar;
+ text-align: center;
+ align: center;
+ border: solid;
+ border-width: 2px;
+ border-color: var(--silicon);
+ /*width: 500px;*/
+}
footer {
display: grid;
grid-area: 'footer';
grid-template-columns: auto;
}
-