about/templates/admin.html

170 lines
5.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plugin Admin Dashboard</title>
<link rel="stylesheet" href="/static/css/admin.css">
<style>
.image-preview {
max-width: 96px;
max-height: 96px;
object-fit: contain;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px;
}
.image-preview--icon {
max-width: 40px;
max-height: 40px;
border: none;
padding: 0;
}
.image-field-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.image-upload-group {
display: flex;
align-items: center;
gap: 8px;
}
.current-image-preview {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 8px;
}
.upload-progress {
display: none;
padding: 8px;
background: #e3f2fd;
border-radius: 4px;
margin-top: 8px;
}
.field-with-upload {
display: flex;
align-items: center;
gap: 8px;
}
.field-with-upload .field-input {
flex: 1;
}
</style>
</head>
<body>
<div class="header">
<h1>Plugin Admin Dashboard</h1>
</div>
<div class="container">
<div class="controls">
<div class="controls-left">
<button class="btn btn-primary" onclick="saveAllPlugins()">Save All Changes</button>
<button class="btn btn-secondary" onclick="previewSite()">Preview Site</button>
<button class="btn btn-secondary" onclick="refreshData()">Refresh Data</button>
<button class="btn btn-secondary" onclick="reloadConfig()">Reload Config</button>
</div>
<div class="controls-right">
<div class="search-box">
<input type="text" class="search-input" placeholder="Search plugins..." id="plugin-search">
</div>
</div>
</div>
<div id="plugins-container" class="plugins-grid">
{{range .Plugins}}
<div class="plugin" data-plugin="{{.Name}}" data-order="{{.Order}}" data-plugin-id="plugin-{{.Name}}">
<div class="plugin-header">
<div class="plugin-info">
<div class="plugin-title">{{.Name}}</div>
<div class="plugin-description">{{.Description}}</div>
</div>
<div class="plugin-controls">
<div class="order-control">
<label class="order-label">Order</label>
<input type="number" name="order" value="{{.Order}}" class="order-input" min="0" max="100">
</div>
<label class="toggle-switch">
<input type="checkbox" class="plugin-toggle" data-plugin="{{.Name}}" {{if .Enabled}}checked{{end}}>
<span class="slider"></span>
</label>
</div>
</div>
<form class="plugin-form" data-plugin="{{.Name}}" id="form-{{.Name}}">
<div class="form-section">
<div class="form-section-title">Configuration</div>
<div id="settings-{{.Name}}" class="settings-editor" data-settings='{{.Settings | jsonPretty}}'></div>
</div>
<div class="actions">
<button type="submit" class="btn btn-primary">Save Plugin</button>
<button type="button" class="btn btn-secondary" onclick="reloadPlugin('{{.Name}}')">Reload</button>
<button type="button" class="btn btn-secondary export-btn" data-plugin="{{.Name}}">Export</button>
<button type="button" class="btn btn-secondary reset-btn" data-plugin="{{.Name}}">Reset</button>
</div>
</form>
</div>
{{end}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script src="/static/js/admin.js?v={{.Config.AdminUser}}"></script>
<script>
console.log('Initializing admin dashboard...');
const pluginsData = {};
{{range $plugin := .Plugins}}
try {
const container = document.getElementById('settings-{{$plugin.Name}}');
if (container) {
const settingsStr = container.dataset.settings;
if (settingsStr) {
const settings = JSON.parse(settingsStr);
pluginsData["{{$plugin.Name}}"] = settings;
console.log('Loaded settings for {{$plugin.Name}}:', settings);
}
}
} catch (e) {
console.error('Failed to load settings for {{$plugin.Name}}:', e);
pluginsData["{{$plugin.Name}}"] = {};
}
{{end}}
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM loaded, initializing plugins...');
{{range $plugin := .Plugins}}
try {
const settings = pluginsData['{{$plugin.Name}}'] || {};
console.log('Initializing {{$plugin.Name}} with:', settings);
initSettingsEditor('{{$plugin.Name}}', settings);
} catch (e) {
console.error('Error initializing {{$plugin.Name}}:', e);
}
{{end}}
initSortable();
initSearch();
console.log('Admin dashboard initialization complete');
});
</script>
</body>
</html>