93 lines
3.0 KiB
HTML
93 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<webview id="main-content" src="https://photos.onedrive.com"></webview>
|
|
|
|
<div id="config-panel">
|
|
<div class="panel-header">
|
|
<h1>Configuration</h1>
|
|
<button class="close-button" id="close-config">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="panel-content">
|
|
<form id="config-form">
|
|
<div class="form-group">
|
|
<label for="dest-folder">Destination Folder for Photo Sync</label>
|
|
<div class="input-with-button">
|
|
<input type="text" id="dest-folder" name="dest-folder" readonly placeholder="Select a folder...">
|
|
<button type="button" id="select-folder">Browse</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="onedrive-source">OneDrive Source Path</label>
|
|
<input
|
|
type="text"
|
|
id="onedrive-source"
|
|
name="onedrive-source"
|
|
placeholder="Enter OneDrive path..."
|
|
>
|
|
</div>
|
|
|
|
<button type="submit" class="submit-button">Save Changes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { ipcRenderer } = require('electron');
|
|
|
|
// Wait for webview to load
|
|
const webview = document.getElementById('main-content');
|
|
webview.addEventListener('did-finish-load', () => {
|
|
// Create and add the configuration button
|
|
const button = document.createElement('button');
|
|
button.id = 'config-button';
|
|
button.innerHTML = '<i class="fas fa-cog"></i> Configuration';
|
|
document.body.appendChild(button);
|
|
|
|
// Add click handler to the dynamically created button
|
|
button.addEventListener('click', () => {
|
|
ipcRenderer.send('toggle-config');
|
|
});
|
|
});
|
|
|
|
// Configuration panel toggle
|
|
ipcRenderer.on('toggle-config', () => {
|
|
const panel = document.getElementById('config-panel');
|
|
panel.classList.toggle('open');
|
|
});
|
|
|
|
// Folder selection
|
|
document.getElementById('select-folder').addEventListener('click', () => {
|
|
ipcRenderer.send('select-folder');
|
|
});
|
|
|
|
ipcRenderer.on('folder-selected', (event, path) => {
|
|
document.getElementById('dest-folder').value = path;
|
|
});
|
|
|
|
// Form submission
|
|
document.getElementById('config-form').addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
const destFolder = document.getElementById('dest-folder').value;
|
|
const onedriveSource = document.getElementById('onedrive-source').value;
|
|
ipcRenderer.send('set-config', { destFolder, onedriveSource });
|
|
// Close the panel after saving
|
|
document.getElementById('config-panel').classList.remove('open');
|
|
});
|
|
|
|
// Close button handler
|
|
document.getElementById('close-config').addEventListener('click', () => {
|
|
document.getElementById('config-panel').classList.remove('open');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|