iobroker.staticsfilefolder 0.0.10 → 0.0.11

package/io-package.json

@@ -1,8 +1,11 @@
 {
 	"common": {
 		"name": "staticsfilefolder",
-		"version": "0.0.10",
+		"version": "0.0.11",
 		"news": {
+			"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.staticsfilefolder",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "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,105 @@ 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: "
+    }
+};
+
+let currentLang = 'en'; // default English
+
 // Setup PDF.js worker
 if (window.pdfjsLib) {
     window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'libs/pdfjs/pdf.worker.min.mjs';
 }
 
+// Language Initialization
+function initLang() {
+    currentLang = localStorage.getItem('staticsfilefolder_lang') || 'en';
+    applyTranslations();
+}
+
+function toggleLang() {
+    currentLang = currentLang === 'en' ? 'az' : 'en';
+    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 === 'en' ? '🌐 AZ' : '🌐 EN';
+    
+    // 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 +151,7 @@ function toggleTheme() {
 // Initialize
 document.addEventListener('DOMContentLoaded', () => {
     initTheme();
+    initLang();
     loadPath('');
     
     // Event Listeners
@@ -63,6 +159,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 +229,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 +314,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 +323,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 +453,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 +480,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 +509,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 +528,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>