Skip to content

Commit

Permalink
fix settings save
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dodoooh
Dodoooh committed Dec 15, 2024
1 parent 904f48b commit 4e5a4f1
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 144 deletions.
3 changes: 1 addition & 2 deletions app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

app = Flask(__name__)

SETTINGS_FILE = os.path.join(os.path.dirname(os.path.abspath(__file__)), "app_settings.json")
SETTINGS_FILE = "settings.json"
UPLOAD_FOLDER = "uploads"
os.makedirs(UPLOAD_FOLDER, exist_ok=True)

Expand Down Expand Up @@ -76,7 +76,6 @@ def get_settings():

@app.route("/update_settings", methods=["POST"])
def update_settings():
logging.debug(f"Update settings request received: {request.form}")
"""
Updates settings from the Web-GUI form and saves them.
"""
Expand Down
4 changes: 0 additions & 4 deletions repository.json
View file

This file was deleted.

266 changes: 128 additions & 138 deletions static/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("DOMContentLoaded", async () => {
const darkModeToggle = document.getElementById("dark-mode-toggle");
const languageDropdown = document.getElementById("language-dropdown");
const settingsToggle = document.getElementById("settings-toggle");
const settingsContent = document.getElementById("settings-content");
const saveSettingsButton = document.getElementById("save-settings");
Expand All @@ -11,8 +12,82 @@ document.addEventListener("DOMContentLoaded", () => {
const imageUpload = document.getElementById("image-upload");
const imagePreview = document.getElementById("image-preview");
const previewImg = document.getElementById("preview-img");
const textArea = document.getElementById("text");

// Initial Dark Mode setzen basierend auf Systemeinstellungen oder localStorage
let translations = {};
let currentLanguage = "en";

const availableLanguages = {
de: { name: "Deutsch", emoji: "🇨🇭" },
en: { name: "English", emoji: "🇬🇧" },
es: { name: "Español", emoji: "🇪🇸" },
fr: { name: "Français", emoji: "🇫🇷" },
nl: { name: "Nederlands", emoji: "🇳🇱" }
};

// Lade Übersetzungen aus einer JSON-Datei
async function loadLocale(locale) {
try {
const response = await fetch(`/locales/${locale}.json`);
if (!response.ok) throw new Error(`Locale ${locale} not found`);
const data = await response.json();
console.log(`Loaded translations for ${locale}:`, data); // Debugging
return data;
} catch (error) {
console.error("Error loading locale:", error);
return {};
}
}

// Übersetzungen auf die Seite anwenden
function applyTranslations() {
const translatableElements = document.querySelectorAll("[data-translate]");
translatableElements.forEach((element) => {
const key = element.getAttribute("data-translate");
const translation = translations[key];

if (translation) {
if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
element.placeholder = translation; // Placeholder für Eingabefelder
} else if (element.tagName === "SELECT") {
const options = element.querySelectorAll("option");
options.forEach((option) => {
const optionKey = option.getAttribute("data-translate");
if (translations[optionKey]) {
option.textContent = translations[optionKey];
}
});
} else {
element.textContent = translation; // Standardtexte ersetzen
}
} else {
console.warn(`Missing translation for key: ${key}`); // Debugging
}
});
}

// Sprache wechseln
async function changeLanguage(newLanguage) {
console.log("Switching to language:", newLanguage); // Debugging
currentLanguage = newLanguage;
localStorage.setItem("language", newLanguage);
translations = await loadLocale(newLanguage);
applyTranslations();
}

// Dropdown für Sprachauswahl aktualisieren
function updateLanguageDropdown() {
languageDropdown.innerHTML = "";
Object.entries(availableLanguages).forEach(([key, { name, emoji }]) => {
const option = document.createElement("option");
option.value = key;
option.textContent = `${emoji} ${name}`;
if (key === currentLanguage) option.selected = true;
languageDropdown.appendChild(option);
});
}

// Dark Mode initialisieren
function setInitialMode() {
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const savedMode = localStorage.getItem("darkMode");
Expand All @@ -23,115 +98,69 @@ document.addEventListener("DOMContentLoaded", () => {
}
}

// Dark Mode umschalten und speichern
// Dark Mode umschalten
function toggleDarkMode() {
const isDarkMode = document.body.classList.toggle("dark-mode");
localStorage.setItem("darkMode", isDarkMode);
localStorage.setItem("darkMode", isDarkMode ? "dark" : "light");
darkModeToggle.textContent = isDarkMode ? "☀️" : "🌙";
}

// Einstellungen aus dem Backend laden und in die Formulare einfügen
// Schriftgröße und Textausrichtung dynamisch aktualisieren
function updateTextAppearance() {
const fontSize = document.getElementById("font_size").value;
const alignment = document.getElementById("alignment").value;
textArea.style.fontSize = `${fontSize}px`;
textArea.style.textAlign = alignment;
}

// Einstellungen vom Server laden
async function loadSettings() {
try {
const response = await fetch("/settings");
if (!response.ok) throw new Error(`Settings load error: ${response.status}`);
const settings = await response.json();

// Druckerkonfiguration
document.getElementById("printer_uri").value = settings.printer_uri || "";
document.getElementById("printer_model").value = settings.printer_model || "";
document.getElementById("label_size").value = settings.label_size || "62";

// Druckeinstellungen
document.getElementById("font_size").value = settings.font_size || 50;
document.getElementById("rotate").value = settings.rotate || "0";
document.getElementById("threshold").value = settings.threshold || "70";
document.getElementById("dither").value = settings.dither ? "true" : "false";
document.getElementById("red").value = settings.red ? "true" : "false";
} catch (error) {
console.error("Fehler beim Laden der Einstellungen:", error);
alert(translations.messages?.error_loading_settings || "Failed to load settings.");
}
}

// Einstellungen speichern
async function saveSettings() {
const formData = new FormData();

// Druckerkonfiguration
formData.append("printer_uri", document.getElementById("printer_uri").value);
formData.append("printer_model", document.getElementById("printer_model").value);
formData.append("label_size", document.getElementById("label_size").value);

// Druckeinstellungen
formData.append("font_size", document.getElementById("font_size").value);
formData.append("rotate", document.getElementById("rotate").value);
formData.append("threshold", document.getElementById("threshold").value);
formData.append("dither", document.getElementById("dither").value);
formData.append("red", document.getElementById("red").value);

try {
const response = await fetch("/update_settings", {
method: "POST",
body: formData,
});
const result = await response.json();
alert(result.message || "Einstellungen gespeichert!");
const response = await fetch("/update_settings", { method: "POST", body: formData });
if (!response.ok) throw new Error(`Settings save error: ${response.status}`);
alert(translations.messages?.settings_saved || "Settings saved successfully.");
} catch (error) {
console.error("Fehler beim Speichern der Einstellungen:", error);
alert("Fehler beim Speichern der Einstellungen.");
alert(translations.messages?.error_saving_settings || "Failed to save settings.");
}
}

// Schriftgröße und Ausrichtung live anwenden
function updateTextAppearance() {
const textArea = document.getElementById("text");
const fontSize = document.getElementById("font_size").value;
const alignment = document.getElementById("alignment").value;

textArea.style.fontSize = `${fontSize}px`;
textArea.style.textAlign = alignment;
}

// Text drucken
async function printText(event) {
event.preventDefault();
const textArea = document.getElementById("text");
const text = textArea.value.replace(/\n/g, "<br>"); // Ersetzt Zeilenumbrüche durch <br>
const fontSize = document.getElementById("font_size").value;
const alignment = document.getElementById("alignment").value;

const jsonData = {
text: text,
settings: {
font_size: fontSize,
alignment: alignment,
rotate: document.getElementById("rotate").value,
threshold: document.getElementById("threshold").value,
dither: document.getElementById("dither").value === "true",
red: document.getElementById("red").value === "true",
},
};

try {
const response = await fetch("/api/text/", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(jsonData),
});
const result = await response.json();
alert(result.message || "Text wurde gedruckt!");
} catch (error) {
console.error("Fehler beim Drucken des Textes:", error);
alert("Fehler beim Drucken.");
}
}

// JSON generieren und anzeigen
// JSON generieren
function generateJson() {
const textArea = document.getElementById("text");
const text = textArea.value.replace(/\n/g, "<br>"); // Zeilenumbrüche in <br> umwandeln

const text = textArea.value.trim();
if (!text) {
alert(translations.messages?.error_no_text || "Please enter text.");
return;
}
const jsonData = {
text: text,
text: text.replace(/\n/g, "<br>"),
settings: {
printer_uri: document.getElementById("printer_uri").value,
printer_model: document.getElementById("printer_model").value,
Expand All @@ -144,23 +173,28 @@ document.addEventListener("DOMContentLoaded", () => {
red: document.getElementById("red").value === "true",
},
};

const jsonString = JSON.stringify(jsonData, null, 2);

resultContainer.innerText = jsonString;
resultContainer.style.whiteSpace = "pre-wrap";
resultContainer.textContent = JSON.stringify(jsonData, null, 2);
resultSection.classList.remove("hidden");
}

// JSON in die Zwischenablage kopieren
function copyToClipboard() {
const jsonString = resultContainer.innerText;
navigator.clipboard.writeText(jsonString)
.then(() => alert("JSON wurde in die Zwischenablage kopiert!"))
.catch((error) => alert("Fehler beim Kopieren in die Zwischenablage."));
}
// Einstellungen ein-/ausklappen
settingsToggle.addEventListener("click", () => {
settingsContent.classList.toggle("open");
settingsContent.classList.toggle("hidden");
const isOpen = settingsContent.classList.contains("open");
settingsToggle.textContent = isOpen ? "➖" : "➕";
});

// Bildvorschau
// Event-Listener hinzufügen
generateJsonButton.addEventListener("click", generateJson);
darkModeToggle.addEventListener("click", toggleDarkMode);
languageDropdown.addEventListener("change", (e) => changeLanguage(e.target.value));
document.getElementById("font_size").addEventListener("input", updateTextAppearance);
document.getElementById("alignment").addEventListener("change", updateTextAppearance);
document.getElementById("text-form").addEventListener("reset", () => {
resultSection.classList.add("hidden");
resultContainer.innerText = "";
});
imageUpload.addEventListener("change", () => {
const file = imageUpload.files[0];
if (file) {
Expand All @@ -170,62 +204,18 @@ document.addEventListener("DOMContentLoaded", () => {
imagePreview.classList.remove("hidden");
};
reader.readAsDataURL(file);
} else {
imagePreview.classList.add("hidden");
previewImg.src = "";
}
});

// Bild drucken
imageForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData();
const file = imageUpload.files[0];
if (!file) {
alert("Bitte wählen Sie ein Bild aus!");
return;
}

formData.append("image", file);
formData.append("rotate", document.getElementById("rotate").value);

try {
const response = await fetch("/api/image/", {
method: "POST",
body: formData,
});
const result = await response.json();
alert(result.message || "Bild wurde gedruckt!");
} catch (error) {
console.error("Fehler beim Drucken des Bildes:", error);
alert("Fehler beim Drucken.");
}
});

// Einstellungen ein- und ausklappen
settingsToggle.addEventListener("click", () => {
const isHidden = settingsContent.classList.contains("hidden");
settingsContent.classList.toggle("hidden");
settingsToggle.textContent = isHidden ? "➕" : "➖";
});

// Initial Dark Mode setzen
// Initiale Sprache und Einstellungen laden
const browserLanguage = navigator.language.split("-")[0];
currentLanguage = localStorage.getItem("language") || (availableLanguages[browserLanguage] ? browserLanguage : "en");
translations = await loadLocale(currentLanguage);
applyTranslations();
updateLanguageDropdown();
setInitialMode();
darkModeToggle.addEventListener("click", toggleDarkMode);

// Einstellungen laden
loadSettings();

// Einstellungen speichern
saveSettingsButton.addEventListener("click", saveSettings);

// Schriftgröße und Ausrichtung live anwenden
document.getElementById("font_size").addEventListener("input", updateTextAppearance);
document.getElementById("alignment").addEventListener("change", updateTextAppearance);

// Text drucken
document.getElementById("text-form").addEventListener("submit", printText);

// JSON generieren
generateJsonButton.addEventListener("click", generateJson);

// JSON in die Zwischenablage kopieren
copyToClipboardButton.addEventListener("click", copyToClipboard);
});

0 comments on commit 4e5a4f1

Please # to comment.