iobroker.staticsfilefolder 0.0.10 → 0.0.12

package/io-package.json

@@ -1,8 +1,14 @@
 {
 	"common": {
 		"name": "staticsfilefolder",
-		"version": "0.0.10",
+		"version": "0.0.12",
 		"news": {
+			"0.0.12": {
+				"en": "Automatically detect ioBroker system language. Added German and Russian translations."
+			},
+			"0.0.11": {
+				"en": "Added multi-language support (English and Azerbaijani) with English as the default."
+			},
 			"0.0.10": {
 				"en": "Updated README.md with detailed instructions for instance configuration settings."
 			},

package/lib/web.js

@@ -12,6 +12,7 @@ class ExtensionExample {
      */
 	constructor(server, webSettings, adapter, instanceSettings, app) {
 		this.app = app;
+		this.adapter = adapter;
 		this.config = instanceSettings ? instanceSettings.native : {};
 		this.config.route = this.config.route || "demo";
 
@@ -27,6 +28,17 @@ class ExtensionExample {
 				this.app.use("/" + this.config.route + "/files", express.static(this.config.dirname));
 			}
 
+			// API Endpoint for configuration and system language
+			this.app.get("/" + this.config.route + "/api/config", async (req, res) => {
+				try {
+					const systemConfig = await this.adapter.getForeignObjectAsync("system.config");
+					const systemLanguage = (systemConfig && systemConfig.common && systemConfig.common.language) || "en";
+					res.json({ success: true, language: systemLanguage });
+				} catch (e) {
+					res.json({ success: false, language: "en" });
+				}
+			});
+
 			// API Endpoint for listing files
 			this.app.get("/" + this.config.route + "/api/list", (req, res) => {
 				try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.staticsfilefolder",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Static Files Folder",
   "author": {
     "name": "gokturk413",

package/www/app.js

@@ -16,6 +16,7 @@ const btnBack = document.getElementById('btn-back');
 const btnForward = document.getElementById('btn-forward');
 const btnHome = document.getElementById('btn-home');
 const btnTheme = document.getElementById('btn-theme');
+const btnLang = document.getElementById('btn-lang');
 const searchBox = document.getElementById('search-box');
 const typeFilter = document.getElementById('type-filter');
 const sortSelect = document.getElementById('sort-select');
@@ -33,11 +34,176 @@ const modalBtnDownload = document.getElementById('modal-btn-download');
 let currentOpenItem = null;
 let currentFilesList = [];
 
+// Localization Settings
+const translations = {
+    en: {
+        back: "← Back",
+        forward: "Forward →",
+        home: "Home",
+        searchPlaceholder: "Search...",
+        allTypes: "All Types",
+        sortAz: "Sort A-Z",
+        sortZa: "Sort Z-A",
+        sortNewest: "Newest First",
+        sortOldest: "Oldest First",
+        title: "Omni Reports",
+        loadingPdf: "Loading PDF...",
+        loadingExcel: "Loading Excel...",
+        loadingWord: "Loading Word...",
+        emptyFolder: "This folder is empty.",
+        root: "Root",
+        themeTooltip: "Toggle Dark/Light Mode",
+        langTooltip: "Change Language / Dili Dəyiş",
+        modalTitle: "File Viewer",
+        modalBack: "← Back",
+        modalForward: "Next →",
+        modalPrint: "🖨️ Print / PDF",
+        modalDownload: "📥 Download",
+        todayBadge: "Today",
+        errorLoading: "An error occurred: "
+    },
+    az: {
+        back: "← Geri",
+        forward: "İrəli →",
+        home: "Ev (Home)",
+        searchPlaceholder: "Axtarış...",
+        allTypes: "Bütün Tiplər",
+        sortAz: "A-Z Sırala",
+        sortZa: "Z-A Sırala",
+        sortNewest: "Ən Yeni",
+        sortOldest: "Ən Köhnə",
+        title: "Omni Hesabatlar",
+        loadingPdf: "PDF Yüklənir...",
+        loadingExcel: "Excel Yüklənir...",
+        loadingWord: "Word Yüklənir...",
+        emptyFolder: "Bu qovluq boşdur.",
+        root: "Kök",
+        themeTooltip: "Gecə/Gündüz Rejimi",
+        langTooltip: "Change Language / Dili Dəyiş",
+        modalTitle: "Fayl Baxışı",
+        modalBack: "← Geri",
+        modalForward: "İrəli →",
+        modalPrint: "🖨️ Çap / PDF",
+        modalDownload: "📥 Yüklə",
+        todayBadge: "Bu gün",
+        errorLoading: "Xəta baş verdi: "
+    },
+    de: {
+        back: "← Zurück",
+        forward: "Weiter →",
+        home: "Startseite",
+        searchPlaceholder: "Suchen...",
+        allTypes: "Alle Typen",
+        sortAz: "A-Z sortieren",
+        sortZa: "Z-A sortieren",
+        sortNewest: "Neueste zuerst",
+        sortOldest: "Älteste zuerst",
+        title: "Omni Berichte",
+        loadingPdf: "PDF wird geladen...",
+        loadingExcel: "Excel wird geladen...",
+        loadingWord: "Word wird geladen...",
+        emptyFolder: "Dieser Ordner ist leer.",
+        root: "Hauptverzeichnis",
+        themeTooltip: "Dunkel/Hell-Modus umschalten",
+        langTooltip: "Sprache ändern",
+        modalTitle: "Dateibetrachter",
+        modalBack: "← Zurück",
+        modalForward: "Weiter →",
+        modalPrint: "🖨️ Drucken / PDF",
+        modalDownload: "📥 Herunterladen",
+        todayBadge: "Heute",
+        errorLoading: "Ein Fehler ist aufgetreten: "
+    },
+    ru: {
+        back: "← Назад",
+        forward: "Вперед →",
+        home: "Главная",
+        searchPlaceholder: "Поиск...",
+        allTypes: "Все типы",
+        sortAz: "Сортировка А-Я",
+        sortZa: "Сортировка Я-А",
+        sortNewest: "Сначала новые",
+        sortOldest: "Сначала старые",
+        title: "Omni Отчеты",
+        loadingPdf: "Загрузка PDF...",
+        loadingExcel: "Загрузка Excel...",
+        loadingWord: "Загрузка Word...",
+        emptyFolder: "Эта папка пуста.",
+        root: "Корень",
+        themeTooltip: "Переключить тему",
+        langTooltip: "Изменить язык",
+        modalTitle: "Просмотр файла",
+        modalBack: "← Назад",
+        modalForward: "Вперед →",
+        modalPrint: "🖨️ Печать / PDF",
+        modalDownload: "📥 Скачать",
+        todayBadge: "Сегодня",
+        errorLoading: "Произошла ошибка: "
+    }
+};
+
+const supportedLangs = ['en', 'az', 'de', 'ru'];
+let currentLang = 'en'; // default English
+
 // Setup PDF.js worker
 if (window.pdfjsLib) {
     window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'libs/pdfjs/pdf.worker.min.mjs';
 }
 
+// Language Initialization
+async function initLang() {
+    let savedLang = localStorage.getItem('staticsfilefolder_lang');
+    if (!savedLang) {
+        try {
+            const res = await fetch(`${BASE_ROUTE}/api/config`);
+            const data = await res.json();
+            if (data && data.language) {
+                savedLang = data.language;
+            }
+        } catch (e) {
+            // ignore
+        }
+    }
+    
+    currentLang = savedLang || navigator.language.split('-')[0] || 'en';
+    if (!translations[currentLang]) {
+        currentLang = 'en';
+    }
+    applyTranslations();
+}
+
+function toggleLang() {
+    let index = supportedLangs.indexOf(currentLang);
+    index = (index + 1) % supportedLangs.length;
+    currentLang = supportedLangs[index];
+    localStorage.setItem('staticsfilefolder_lang', currentLang);
+    applyTranslations();
+}
+
+function applyTranslations() {
+    const t = translations[currentLang];
+    
+    // Update elements with data-i18n attribute
+    document.querySelectorAll('[data-i18n]').forEach(el => {
+        const key = el.getAttribute('data-i18n');
+        if (t[key]) {
+            if (el.tagName === 'INPUT') {
+                el.placeholder = t[key];
+            } else {
+                el.textContent = t[key];
+            }
+        }
+    });
+
+    // Update search placeholder and other specific inputs
+    searchBox.placeholder = t.searchPlaceholder;
+    btnLang.textContent = `🌐 ${currentLang.toUpperCase()}`;
+    
+    // Refresh UI to update dynamic content like dates/breadcrumbs
+    updateBreadcrumb();
+    renderItems();
+}
+
 // Theme Initialization
 function initTheme() {
     const savedTheme = localStorage.getItem('staticsfilefolder_theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
@@ -56,6 +222,7 @@ function toggleTheme() {
 // Initialize
 document.addEventListener('DOMContentLoaded', () => {
     initTheme();
+    initLang();
     loadPath('');
     
     // Event Listeners
@@ -63,6 +230,7 @@ document.addEventListener('DOMContentLoaded', () => {
     btnForward.addEventListener('click', goForward);
     btnHome.addEventListener('click', () => navigateTo(''));
     btnTheme.addEventListener('click', toggleTheme);
+    btnLang.addEventListener('click', toggleLang);
     
     searchBox.addEventListener('input', renderItems);
     typeFilter.addEventListener('change', renderItems);
@@ -132,13 +300,14 @@ function updateNavButtons() {
 }
 
 function updateBreadcrumb() {
+    const rootName = translations[currentLang]?.root || 'Root';
     if (!currentPath) {
-        breadcrumbEl.innerHTML = '<span><i class="icon">🏠</i> Kök Qovluq</span>';
+        breadcrumbEl.innerHTML = `<span><i class="icon">🏠</i> ${rootName}</span>`;
         return;
     }
     
     const parts = currentPath.split('/');
-    let html = '<span data-path="">🏠 Kök</span>';
+    let html = `<span data-path="">🏠 ${rootName}</span>`;
     let buildPath = '';
     
     parts.forEach((part, index) => {
@@ -216,7 +385,8 @@ function renderItems() {
         const isToday = itemDate.setHours(0,0,0,0) === today;
         if (isToday) div.classList.add('is-today');
         
-        const dateStr = new Date(item.mtime).toLocaleString('az-AZ');
+        const locale = currentLang === 'en' ? 'en-US' : 'az-AZ';
+        const dateStr = new Date(item.mtime).toLocaleString(locale);
         
         let sizeStr = '';
         if (!item.isDirectory) {
@@ -224,11 +394,13 @@ function renderItems() {
             else sizeStr = (item.size / 1024).toFixed(2) + ' KB';
         }
         
+        const todayText = translations[currentLang]?.todayBadge || 'Today';
+        
         div.innerHTML = `
             <div class="file-icon">${icon}</div>
             <div class="file-name" title="${item.name}">${item.name}</div>
             <div class="file-meta">${dateStr}<br>${sizeStr}</div>
-            ${isToday ? '<div class="today-badge">Bu gün</div>' : ''}
+            ${isToday ? `<div class="today-badge">${todayText}</div>` : ''}
         `;
         
         div.addEventListener('click', () => handleItemClick(item));
@@ -352,7 +524,7 @@ function downloadCurrentFile() {
 
 async function openPdf(url) {
     viewerModal.style.display = 'block';
-    viewerBody.innerHTML = '<h2>PDF Yüklənir...</h2>';
+    viewerBody.innerHTML = `<h2>${translations[currentLang]?.loadingPdf || 'Loading PDF...'}</h2>`;
     
     try {
         const loadingTask = window.pdfjsLib.getDocument({ url: url });
@@ -379,13 +551,14 @@ async function openPdf(url) {
             await page.render(renderContext).promise;
         }
     } catch (e) {
-        viewerBody.innerHTML = `<h2 style="color:red">Xəta baş verdi: ${e.message}</h2>`;
+        const errorText = translations[currentLang]?.errorLoading || 'An error occurred: ';
+        viewerBody.innerHTML = `<h2 style="color:red">${errorText}${e.message}</h2>`;
     }
 }
 
 async function openExcel(url) {
     viewerModal.style.display = 'block';
-    viewerBody.innerHTML = '<h2>Excel Yüklənir...</h2>';
+    viewerBody.innerHTML = `<h2>${translations[currentLang]?.loadingExcel || 'Loading Excel...'}</h2>`;
     
     try {
         const res = await fetch(url);
@@ -407,13 +580,14 @@ async function openExcel(url) {
         if(table) table.className = 'sheetjs-table';
         
     } catch (e) {
-        viewerBody.innerHTML = `<h2 style="color:red">Xəta baş verdi: ${e.message}</h2>`;
+        const errorText = translations[currentLang]?.errorLoading || 'An error occurred: ';
+        viewerBody.innerHTML = `<h2 style="color:red">${errorText}${e.message}</h2>`;
     }
 }
 
 async function openWord(url) {
     viewerModal.style.display = 'block';
-    viewerBody.innerHTML = '<h2>Word Sənədi Yüklənir...</h2>';
+    viewerBody.innerHTML = `<h2>${translations[currentLang]?.loadingWord || 'Loading Word...'}</h2>`;
     
     try {
         const res = await fetch(url);
@@ -425,6 +599,7 @@ async function openWord(url) {
             ${result.value}
         </div>`;
     } catch (e) {
-        viewerBody.innerHTML = `<h2 style="color:red">Xəta baş verdi: ${e.message}</h2>`;
+        const errorText = translations[currentLang]?.errorLoading || 'An error occurred: ';
+        viewerBody.innerHTML = `<h2 style="color:red">${errorText}${e.message}</h2>`;
     }
 }

package/www/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="az">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,31 +16,32 @@
     <div class="app-container">
         <!-- Header & Toolbar -->
         <header class="app-header">
-            <div class="header-title">Omni Reports</div>
+            <div class="header-title" id="app-title" data-i18n="title">Omni Reports</div>
             
             <div class="toolbar">
-                <button id="btn-back" class="nav-btn" disabled>&larr; Geri</button>
-                <button id="btn-forward" class="nav-btn" disabled>İrəli &rarr;</button>
-                <button id="btn-home" class="nav-btn">Evə (Home)</button>
+                <button id="btn-back" class="nav-btn" data-i18n="back" disabled>&larr; Back</button>
+                <button id="btn-forward" class="nav-btn" data-i18n="forward" disabled>Forward &rarr;</button>
+                <button id="btn-home" class="nav-btn" data-i18n="home">Home</button>
                 
                 <div class="breadcrumb" id="breadcrumb">
                     <!-- Path will be injected here -->
                 </div>
 
                 <div class="filters">
-                    <button id="btn-theme" class="nav-btn" title="Gecə/Gündüz Rejimi">🌙</button>
-                    <input type="text" id="search-box" placeholder="Axtarış...">
+                    <button id="btn-lang" class="nav-btn" title="Change Language / Dili Dəyiş">🌐 AZ</button>
+                    <button id="btn-theme" class="nav-btn" title="Toggle Dark/Light Mode">🌙</button>
+                    <input type="text" id="search-box" placeholder="Search...">
                     <select id="type-filter">
-                        <option value="all">Bütün Tiplər</option>
+                        <option value="all" data-i18n="allTypes">All Types</option>
                         <option value=".pdf">PDF</option>
                         <option value=".xlsx">Excel</option>
                         <option value=".docx">Word</option>
                     </select>
                     <select id="sort-select">
-                        <option value="name-asc">A-Z Sırala</option>
-                        <option value="name-desc">Z-A Sırala</option>
-                        <option value="date-desc">Ən Yeni</option>
-                        <option value="date-asc">Ən Köhnə</option>
+                        <option value="name-asc" data-i18n="sortAz">Sort A-Z</option>
+                        <option value="name-desc" data-i18n="sortZa">Sort Z-A</option>
+                        <option value="date-desc" data-i18n="sortNewest">Newest First</option>
+                        <option value="date-asc" data-i18n="sortOldest">Oldest First</option>
                     </select>
                 </div>
             </div>
@@ -51,8 +52,8 @@
             <div id="file-list" class="file-list">
                 <!-- File items will be injected here -->
             </div>
-            <div id="empty-state" class="empty-state" style="display: none;">
-                Fayl tapılmadı
+            <div id="empty-state" class="empty-state" data-i18n="emptyFolder" style="display: none;">
+                This folder is empty.
             </div>
         </main>
     </div>
@@ -61,12 +62,12 @@
     <div id="viewer-modal" class="modal">
         <div class="modal-content">
             <header class="modal-header">
-                <div class="modal-title" id="modal-title">Fayl Baxışı</div>
+                <div class="modal-title" id="modal-title" data-i18n="modalTitle">File Viewer</div>
                 <div class="modal-toolbar">
-                    <button id="modal-btn-prev" class="nav-btn" title="Əvvəlki">&larr; Geri</button>
-                    <button id="modal-btn-next" class="nav-btn" title="Növbəti">İrəli &rarr;</button>
-                    <button id="modal-btn-print" class="nav-btn" title="Çap et / PDF olaraq saxla">🖨️ Çap / PDF</button>
-                    <button id="modal-btn-download" class="nav-btn" title="Faylı Yüklə / Export">📥 Yüklə</button>
+                    <button id="modal-btn-prev" class="nav-btn" data-i18n="modalBack" title="Previous">&larr; Back</button>
+                    <button id="modal-btn-next" class="nav-btn" data-i18n="modalForward" title="Next">Next &rarr;</button>
+                    <button id="modal-btn-print" class="nav-btn" data-i18n="modalPrint" title="Print / Save as PDF">🖨️ Print / PDF</button>
+                    <button id="modal-btn-download" class="nav-btn" data-i18n="modalDownload" title="Download File">📥 Download</button>
                     <span id="close-modal" class="close-button">&times;</span>
                 </div>
             </header>