Tooloop/Tooloop-Kiosk-Browser
2
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

config file loading and saving

Browse Source
This commit is contained in:
Daniel Stock
2024-06-03 16:32:05 +02:00
parent 57ece16e14
commit c4cc2170f5
7 changed files with 149 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.example.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"url": "file:///assets/data/index.html", "url": "file:///assets/data/index.html",
"allowedDomains": [ "whitelist": [
"localhost", "localhost",
"127.0.0.1", "127.0.0.1",
"tooloop.de", "tooloop.de",
html/config.html
+14 -15
View File
@@ -15,12 +15,6 @@
padding: 1rem; padding: 1rem;
} }
h1 {
font-weight: 500;
font-size: 1.333rem;
margin-bottom: 2em;
}
label { label {
color: #ccc; color: #ccc;
text-align: right; text-align: right;
@@ -36,7 +30,7 @@
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
} }
input, input,
textarea { textarea {
font-family: monospace; font-family: monospace;
@@ -46,19 +40,23 @@
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.25rem; border-radius: 0.25rem;
} }
textarea#whitelist {
height: 5.25em;
}
textarea:focus, textarea:focus,
input:focus { input:focus {
outline: none; outline: none;
} }
.buttons { .buttons {
grid-column: 2; grid-column: 2;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
margin-top: 2rem; margin-top: 2rem;
} }
button { button {
background-color: hsl(0, 0%, 50%); background-color: hsl(0, 0%, 50%);
/* border: 1px solid rgba(255, 255, 255, 0.12); */ /* border: 1px solid rgba(255, 255, 255, 0.12); */
@@ -72,7 +70,6 @@
</head> </head>
<body> <body>
<h1>Config</h1>
<div class="config"> <div class="config">
<label for="url">Url</label> <label for="url">Url</label>
<input type="text" id="url" value="file:///assets/data/index.html"> <input type="text" id="url" value="file:///assets/data/index.html">
@@ -80,14 +77,16 @@
<label for="whitelist">Allowed Domains</label> <label for="whitelist">Allowed Domains</label>
<textarea name="whitelist" id="whitelist"></textarea> <textarea name="whitelist" id="whitelist"></textarea>
<label for="logPath">Logging Path</label> <label for="logpath">Logging Path</label>
<input type="text" id="logPath" value="/assets/logs/tooloop-kiosk-browser.log"> <input type="text" id="logpath" value="/assets/logs/tooloop-kiosk-browser.log">
</div> </div>
<div class="buttons"> <div class="buttons">
<button>Save</button> <button id="save">Save</button>
<button>Cancel</button> <button id="cancel">Cancel</button>
</div> </div>
<script src="../js/configRenderer.js"></script>
</body> </body>
</html> </html>
html/onboarding.html
+1 -1
View File
@@ -165,7 +165,7 @@
<p> <p>
<pre><code>{ <pre><code>{
"url": "https://www.tooloop.de", "url": "https://www.tooloop.de",
"allowedDomains": [ "whitelist": [
"tooloop.de", "tooloop.de",
"www.tooloop.de" "www.tooloop.de"
], ],
js/config.js
+2 -2
View File
@@ -3,7 +3,7 @@ class Config {
constructor() { constructor() {
this.config = { this.config = {
"url": "https://www.tooloop.de", "url": "https://www.tooloop.de",
"allowedDomains": [ "whitelist": [
"tooloop.de", "tooloop.de",
"www.tooloop.de" "www.tooloop.de"
], ],
@@ -15,7 +15,7 @@ class Config {
let config = { let config = {
"url": "https://www.tooloop.de", "url": "https://www.tooloop.de",
"allowedDomains": [ "whitelist": [
"tooloop.de", "tooloop.de",
"www.tooloop.de" "www.tooloop.de"
], ],
js/configPreload.js
+7
View File
@@ -0,0 +1,7 @@
const { contextBridge, ipcRenderer } = require('electron/renderer')
contextBridge.exposeInMainWorld('electronAPI', {
save: (configData) => ipcRenderer.send('save-config', configData),
cancel: () => ipcRenderer.send('cancel-config'),
onUpdate: (callback) => ipcRenderer.on('update-config', (_event, configData) => callback(configData))
});
js/configRenderer.js
+35
View File
@@ -0,0 +1,35 @@
const urlField = document.getElementById('url');
const whitelistField = document.getElementById('whitelist');
const logPathField = document.getElementById('logpath');
const saveButton = document.getElementById('save');
const cancelButton = document.getElementById('cancel');
saveButton.addEventListener('click', () => {
let configData = {
url: "",
whitelist: [],
logPath: "",
};
configData.url = urlField.value;
configData.logPath = logPathField.value;
configData.whitelist = whitelistField.value;
window.electronAPI.save(configData);
})
cancelButton.addEventListener('click', () => { window.electronAPI.cancel() });
window.electronAPI.onUpdate((configData) => {
urlField.value = configData.url;
let whitelist = "";
configData.whitelist.forEach(item => {
whitelist += item + ";\n";
});
whitelistField.value = whitelist;
logPathField.value = configData.logPath;
});
document.addEventListener('keyup', (event) => {
if (event.code == 'Escape') window.electronAPI.cancel();
});
main.js
+89 -33
View File
@@ -1,4 +1,4 @@
const { app, BrowserWindow, BaseWindow, nativeTheme, Menu, MenuItem } = require('electron/main'); const { app, BrowserWindow, ipcMain, nativeTheme, Menu, MenuItem } = require('electron/main');
const path = require('node:path'); const path = require('node:path');
const fs = require('fs'); const fs = require('fs');
const os = require('os'); const os = require('os');
@@ -14,6 +14,7 @@ const isMac = process.platform === 'darwin';
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
let config; let config;
let configPath;
let configWindow; let configWindow;
let win; let win;
let menu; let menu;
@@ -40,28 +41,104 @@ function loadConfig() {
__dirname __dirname
]; ];
let filePath;
// Check all locations // Check all locations
for (const location of locations) { for (const location of locations) {
// Update the filepath // Update the filepath
filePath = path.join(location, 'config.json'); configPath = path.join(location, 'config.json');
try { try {
// Try access // Try access
fs.accessSync(filePath); fs.accessSync(configPath);
// Parse the file if found // Parse the file if found
console.info('Found config file at ' + filePath); console.info('Found config file at ' + configPath);
const data = fs.readFileSync(filePath, { encoding: 'utf8' }); const data = fs.readFileSync(configPath, { encoding: 'utf8' });
config = JSON.parse(data); config = JSON.parse(data);
// Break the loop // Break the loop
break; break;
} catch (err) { } catch (err) {
console.warn('No config file found at ' + filePath); console.warn('No config file found at ' + configPath);
} }
} }
}
function saveConfig(newConfig) {
if (!configPath) {
console.error("No config file path was set");
return;
}
if(config.url != newConfig.url) {
config.url = newConfig.url;
loadUrlAsync(config.url);
}
config.whitelist = [];
let whitelist = newConfig.whitelist.split(";");
whitelist = whitelist.filter(function (entry) { return entry.trim() != ''; });
whitelist.forEach(
token => {
config.whitelist.push(token.replace(/\r?\n|\r/g, ""));
}
);
config.logPath = newConfig.logPath;
fs.writeFile(configPath, JSON.stringify(config, null, " "), (error) => {
if (error) log.warn('Error writing to ' + configPath, error);
log.info("Saved config to " + configPath);
});
// updare UI with new values
configWindow.webContents.send('update-config', config);
}
/**
* Creates a modal config view and attaches as to the main window
*/
function showConfigWindow() {
// create lazily
if (configWindow == undefined) {
configWindow = new BrowserWindow({
parent: win,
width: 640,
height: 460,
minimizable: false,
maximizable: false,
fullscreenable: false,
backgroundColor: '#1f1f1f',
autoHideMenuBar: true,
excludedFromShownWindowsMenu: true,
webPreferences: {
preload: path.join(__dirname, 'js/configPreload.js')
}
});
configWindow.on('close', (event) => {
event.preventDefault();
configWindow.hide();
});
ipcMain.on('save-config', (event, configData) => {
configWindow.hide();
saveConfig(configData);
});
ipcMain.on('cancel-config', (event) => {
configWindow.hide();
configWindow.webContents.send('update-config', config);
});
configWindow.loadFile('./html/config.html');
}
// update text field values
configWindow.webContents.send('update-config', config);
// show window
configWindow.show();
} }
@@ -75,8 +152,9 @@ function createMainWindow() {
backgroundColor: '#000000', backgroundColor: '#000000',
icon: 'images/icon-512.png', icon: 'images/icon-512.png',
autoHideMenuBar: true, autoHideMenuBar: true,
kiosk: true,
webPreferences: { webPreferences: {
preload: path.join(__dirname, './js/preload.js'), preload: path.join(__dirname, 'js/preload.js'),
webSecurity: false, webSecurity: false,
disableDialogs: true disableDialogs: true
}, },
@@ -99,11 +177,6 @@ function createMainWindow() {
}); });
win.on("page-title-updated", (event) => event.preventDefault()); win.on("page-title-updated", (event) => event.preventDefault());
// show initial black window
// win.setKiosk(true);
win.show();
// Load page from config file // Load page from config file
if (config != undefined && 'url' in config) { if (config != undefined && 'url' in config) {
loadUrlAsync(config.url); loadUrlAsync(config.url);
@@ -119,22 +192,6 @@ function createMainWindow() {
} }
} }
/**
* Creates a modal config view and attaches as to the main window
*/
function createConfigWindow() {
configWindow = new BrowserWindow({
parent: win,
modal: true,
width: 640,
height: 460,
show: false,
backgroundColor: '#1f1f1f'
});
configWindow.loadFile('./html/config.html');
}
/** /**
* Creates all available keyboard shortcuts * Creates all available keyboard shortcuts
@@ -155,7 +212,7 @@ function createMenu() {
{ {
label: 'Config', label: 'Config',
accelerator: isMac ? 'Cmd+,' : 'Ctrl+,', accelerator: isMac ? 'Cmd+,' : 'Ctrl+,',
click: () => { configWindow.isVisible() ? configWindow.hide() : configWindow.show(); } click: () => { showConfigWindow(); }
} }
] ]
})); }));
@@ -178,7 +235,7 @@ function validateDomain(event) {
// allow local urls // allow local urls
if (['file:', 'file'].includes(url.protocol)) return true; if (['file:', 'file'].includes(url.protocol)) return true;
if ('allowedDomains' in config && !config.allowedDomains.includes(url.hostname)) { if ('whitelist' in config && !config.whitelist.includes(url.hostname)) {
event.preventDefault(); event.preventDefault();
log.info("Navigation to " + event.url + " prevented"); log.info("Navigation to " + event.url + " prevented");
return false; return false;
@@ -256,7 +313,6 @@ app.whenReady().then(() => {
createMenu(); createMenu();
createMainWindow(); createMainWindow();
createConfigWindow()
}); });
app.on('activate', () => { app.on('activate', () => {