feat: improve UI for Spoolman and Bambu Lab printer credentials, enhancing layout and styling

This commit is contained in:
Manuel Weiser 2025-02-23 20:23:09 +01:00
parent e7537f94d4
commit 6098c3b052
3 changed files with 39 additions and 23 deletions

View File

@ -95,27 +95,36 @@
<div class="content"> <div class="content">
<h1>Spoolman API URL / Bambu Credentials</h1> <h1>Spoolman API URL / Bambu Credentials</h1>
<label for="spoolmanUrl">Set URL/IP to your Spoolman-Instanz:</label>
<input type="text" id="spoolmanUrl" placeholder="http://ip-or-url-of-your-spoolman-instanz:port">
<button onclick="checkSpoolmanInstance()">Save Spoolman URL</button>
<p id="statusMessage"></p>
<h2>Bambu Lab Printer Credentials</h2> <div class="card">
<div class="bambu-settings"> <div class="card-body">
<div class="input-group"> <h5 class="card-title">Set URL/IP to your Spoolman-Instanz</h5>
<label for="bambuIp">Bambu Drucker IP-Adresse:</label> <input type="text" id="spoolmanUrl" placeholder="http://ip-or-url-of-your-spoolman-instanz:port">
<input type="text" id="bambuIp" placeholder="192.168.1.xxx" value="{{bambuIp}}"> <button onclick="checkSpoolmanInstance()">Save Spoolman URL</button>
<p id="statusMessage"></p>
</div> </div>
<div class="input-group"> </div>
<label for="bambuSerial">Drucker Seriennummer:</label>
<input type="text" id="bambuSerial" placeholder="BBLXXXXXXXX" value="{{bambuSerial}}"> <div class="card">
<div class="card-body">
<h5 class="card-title">Bambu Lab Printer Credentials</h5>
<div class="bambu-settings">
<div class="input-group">
<label for="bambuIp">Bambu Drucker IP-Adresse:</label>
<input type="text" id="bambuIp" placeholder="192.168.1.xxx" value="{{bambuIp}}">
</div>
<div class="input-group">
<label for="bambuSerial">Drucker Seriennummer:</label>
<input type="text" id="bambuSerial" placeholder="BBLXXXXXXXX" value="{{bambuSerial}}">
</div>
<div class="input-group">
<label for="bambuCode">Access Code:</label>
<input type="text" id="bambuCode" placeholder="Access Code vom Drucker" value="{{bambuCode}}">
</div>
<button onclick="saveBambuCredentials()">Save Bambu Credentials</button>
<p id="bambuStatusMessage"></p>
</div>
</div> </div>
<div class="input-group">
<label for="bambuCode">Access Code:</label>
<input type="text" id="bambuCode" placeholder="Access Code vom Drucker" value="{{bambuCode}}">
</div>
<button onclick="saveBambuCredentials()">Save Bambu Credentials</button>
<p id="bambuStatusMessage"></p>
</div> </div>
</div> </div>
</body> </body>

View File

@ -279,9 +279,10 @@ a:hover {
/* Karten-Stil für optische Trennung */ /* Karten-Stil für optische Trennung */
.card { .card {
background: #f9f9f9; background: var(--primary-color);
width: 500px;
padding: 15px; padding: 15px;
margin: 20px 0; margin: 20px auto;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
@ -959,7 +960,6 @@ input[type="submit"]:disabled,
/* Bambu Settings Erweiterung */ /* Bambu Settings Erweiterung */
.bambu-settings { .bambu-settings {
background: white;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

View File

@ -384,7 +384,8 @@ void setupWebserver(AsyncWebServer &server) {
html.replace("{{spoolmanUrl}}", spoolmanUrl); html.replace("{{spoolmanUrl}}", spoolmanUrl);
JsonDocument doc; JsonDocument doc;
if (loadJsonValue("/bambu_credentials.json", doc) && doc["bambu_ip"].is<String>()) { if (loadJsonValue("/bambu_credentials.json", doc) && doc["bambu_ip"].is<String>())
{
String bambuIp = doc["bambu_ip"].as<String>(); String bambuIp = doc["bambu_ip"].as<String>();
String bambuSerial = doc["bambu_serialnr"].as<String>(); String bambuSerial = doc["bambu_serialnr"].as<String>();
String bambuCode = doc["bambu_accesscode"].as<String>(); String bambuCode = doc["bambu_accesscode"].as<String>();
@ -396,6 +397,12 @@ void setupWebserver(AsyncWebServer &server) {
html.replace("{{bambuSerial}}", bambuSerial ? bambuSerial : ""); html.replace("{{bambuSerial}}", bambuSerial ? bambuSerial : "");
html.replace("{{bambuCode}}", bambuCode ? bambuCode : ""); html.replace("{{bambuCode}}", bambuCode ? bambuCode : "");
} }
else
{
html.replace("{{bambuIp}}", "");
html.replace("{{bambuSerial}}", "");
html.replace("{{bambuCode}}", "");
}
request->send(200, "text/html", html); request->send(200, "text/html", html);
}); });