247 lines
9.4 KiB
JavaScript
247 lines
9.4 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||
|
||
import { createRoot, createSignal, createState, createEffect } from 'solid-js';
|
||
import { r } from 'solid-js/dom';
|
||
|
||
function createLocalState(initState) {
|
||
const [state, setState] = createState(initState);
|
||
if (localStorage.odoodockerssh) { setState(JSON.parse(localStorage.odoodockerssh)); }
|
||
createEffect(() => localStorage.odoodockerssh = JSON.stringify(state));
|
||
return [state, setState];
|
||
}
|
||
|
||
const initialState = {
|
||
address: '', port: '', username: '', key: '', password: '',
|
||
database: '', databases: [], modules: '', serverlog: ''
|
||
};
|
||
|
||
const OdooDockerSshAdminConfig = () => {
|
||
const [state, setState] = createLocalState(initialState);
|
||
const valueSet = ({target}) => setState(target.name, target.value);
|
||
|
||
return <div>
|
||
<h2>🛠 Configuration</h2>
|
||
<form name="configuration-form">
|
||
<div class="row">
|
||
<div class="col-4">
|
||
<label for="address">Hôte / Adressse IP</label>
|
||
<input name="address" type="text" required
|
||
value={(state.address)} onChange={valueSet} />
|
||
<label for="port">Port</label>
|
||
<input name="port" type="text" pattern="\d+" placeholder="Exemple : 22"
|
||
value={(state.port)} onChange={valueSet}/>
|
||
</div>
|
||
<div class="col-4">
|
||
<label for="username">Identifiant</label>
|
||
<input name="username" type="text" required
|
||
value={(state.username)} onChange={valueSet}/>
|
||
</div>
|
||
<div class="col-4">
|
||
<label for="key">Clé privée</label>
|
||
<textarea name="key" placeholder="Please paste your private key"
|
||
value={(state.key)} onChange={valueSet}/>
|
||
<label for="keypassword">Mot de passe clé</label>
|
||
<input name="password" type="password" required />
|
||
</div>
|
||
</div>
|
||
<button type="button" class="button outline primary">🔗 Connect</button>
|
||
<button type="button" class="button outline secondary">🔴 Disconnect</button>
|
||
</form>
|
||
</div>
|
||
};
|
||
|
||
const OdooDockerSshAdminDatabases = () => {
|
||
const [state, setState] = createLocalState(initialState);
|
||
const valueSet = ({target}) => setState(target.name, target.value);
|
||
|
||
const add = (e) => {
|
||
e.preventDefault();
|
||
if (state.database) {
|
||
let database = {name: state.database, checked: false};
|
||
setState(['databases', [...state.databases, database]], ['database', '']);
|
||
}
|
||
};
|
||
const inverseCheck = () => {
|
||
let databases = state.databases.map((db) => Object.assign({}, db));
|
||
setState('databases', databases.map((db) => Object.assign(db, {checked: !db.checked})));
|
||
};
|
||
const allCheck = () => {
|
||
let databases = state.databases.map((db) => Object.assign({}, db));
|
||
setState('databases', databases.map((db) => Object.assign(db, {checked: true})));
|
||
};
|
||
const noCheck = () => {
|
||
let databases = state.databases.map((db) => Object.assign({}, db));
|
||
setState('databases', databases.map((db) => Object.assign(db, {checked: false})));
|
||
};
|
||
const toggle = ({target: {checked}}, name) => {
|
||
setState('databases', db => db.name === name, {name: name, checked: checked});
|
||
};
|
||
const remove = (name) => {
|
||
setState('databases', state.databases.filter(db => db.name !== name));
|
||
};
|
||
|
||
return <div>
|
||
<h2>📙 Bases de données</h2>
|
||
<p>Merci de renseigner toutes les bases de votre domaine ici. Pour effectuer une installation ou mise à jour de module, sélectionnez les bases sur lesquelles agir.</p>
|
||
<div class="row">
|
||
<div class="col-12" >
|
||
<button type="button" class="button outline" onClick={inverseCheck}>☑ Inverser la sélection</button>
|
||
<button type="button" class="button dark" onClick={allCheck}>☑ Sélectionner tout</button>
|
||
<button type="button" class="button dark" onClick={noCheck}>◻ Sélectionner aucun</button>
|
||
<ul class="database-list">
|
||
<$ each={ state.databases }>{ (database, index) =>
|
||
<li>
|
||
<input type="checkbox" checked={(database.checked)}
|
||
onClick={(e) => toggle(e, database.name)} />
|
||
<span>{(database.name)}</span>
|
||
<button type="button" class="button outline"
|
||
onClick={() => remove(database.name)}>X</button>
|
||
</li>
|
||
}
|
||
</$>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12" >
|
||
<form name="database-form">
|
||
<div class="row">
|
||
<div class="col-8" >
|
||
<input type="text" name="database" placeholder="Nom de la base de données"
|
||
value={(state.database)} onInput={valueSet}/>
|
||
</div>
|
||
<div class="col-4" >
|
||
<button type="submit" class="button outline primary"
|
||
disabled={(!state.database)} onClick={add}>
|
||
➕ Ajouter
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
};
|
||
|
||
const OdooDockerSshAdminActions = () => {
|
||
const [state, setState] = createLocalState(initialState);
|
||
|
||
return <div>
|
||
<h2>🚩 Actions</h2>
|
||
<div class="row">
|
||
<div class="col">
|
||
<button type="button" class="button clear">⏩ Odoo : démarrer</button>
|
||
</div>
|
||
<div class="col">
|
||
<button type="button" class="button clear">⏹ Odoo : arrêter</button>
|
||
</div>
|
||
<div class="col">
|
||
<button type="button" class="button clear">🔄 Odoo : redémarrer</button>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col">
|
||
<button type="button" class="button clear">⏩ Frontal : démarrer</button>
|
||
</div>
|
||
<div class="col">
|
||
<button type="button" class="button clear">⏹ Frontal : arrêter</button>
|
||
</div>
|
||
<div class="col">
|
||
<button type="button" class="button clear">🔄 Frontal : redémarrer</button>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col">
|
||
<button type="button" class="button clear">⏩ Moteur de base de données : démarrer</button>
|
||
</div>
|
||
<div class="col">
|
||
<button type="button" class="button clear">⏹ Moteur de base de données : arrêter</button>
|
||
</div>
|
||
<div class="col">
|
||
<button type="button" class="button clear">🔄 Moteur de base de données : redémarrer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
};
|
||
|
||
const OdooDockerSshAdminModules = () => {
|
||
const [state, setState] = createLocalState(initialState);
|
||
const valueSet = ({target}) => setState(target.name, target.value);
|
||
|
||
const checkedDatabases = (databases) => {
|
||
let names = databases.filter((db) => db.checked).map((db) => db.name);
|
||
return names.length ? names.join(', ') : 'Aucune base sélectionnée';
|
||
};
|
||
|
||
return <div>
|
||
<h2>🗄 Modules</h2>
|
||
<form name="modules-form">
|
||
<p>Bases sélectionnées : {checkedDatabases(state.databases)}</p>
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<label for="modules">Liste de modules, séparés par des virgules</label>
|
||
<input name="modules" type="text" required placeholder="account,crm"
|
||
value={(state.modules)} onInput={valueSet}/>
|
||
</div>
|
||
<div class="col-6">
|
||
<label for="stop">❗ Arrêt serveur préalable ?</label>
|
||
<input type="checkbox" name="stop" value={(state.stop)} />
|
||
</div>
|
||
</div>
|
||
<button type="button" class="button primary outline">Installer</button>
|
||
<button type="button" class="button primary">Mettre à jour</button>
|
||
</form>
|
||
</div>
|
||
};
|
||
|
||
const OdooDockerSshAdminServerLog = () => {
|
||
const [state, setState] = createLocalState(initialState);
|
||
const serverlogClean = () => setState('serverlog', '');
|
||
|
||
return <div>
|
||
<h2>🖥 Retour serveur</h2>
|
||
<div class="row">
|
||
<div class="col-11">
|
||
<textarea name="serverlog" class="serverlog" rows="20" readonly>{(state.serverlog)}</textarea>
|
||
</div>
|
||
<div class="col-1">
|
||
<button type="button" onClick={serverlogClean}>💢 Nettoyer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
};
|
||
|
||
const OdooDockerSshAdmin = () => {
|
||
const [visibleTab, setVisibleTab] = createSignal('configuration');
|
||
const getClassName = (name) => visibleTab() === name ? 'active' : '';
|
||
|
||
return <>
|
||
<h1>Odoo Docker SSH Admin</h1>
|
||
<nav class="tabs is-full">
|
||
<a onClick={() => setVisibleTab('configuration')} className={(getClassName('configuration'))}>
|
||
🛠 Configuration
|
||
</a>
|
||
<a onClick={() => setVisibleTab('actions')} className={(getClassName('actions'))}>
|
||
🚩 Actions
|
||
</a>
|
||
<a onClick={() => setVisibleTab('databases')} className={(getClassName('databases'))}>
|
||
📙 Bases de données
|
||
</a>
|
||
<a onClick={() => setVisibleTab('modules')} className={(getClassName('modules'))}>
|
||
🗄 Modules
|
||
</a>
|
||
<a onClick={() => setVisibleTab('serverlog')} className={(getClassName('serverlog'))}>
|
||
🖥 Retour serveur
|
||
</a>
|
||
</nav>
|
||
<$ when={(visibleTab() === 'configuration')}><OdooDockerSshAdminConfig /></$>
|
||
<$ when={(visibleTab() === 'databases')}><OdooDockerSshAdminDatabases /></$>
|
||
<$ when={(visibleTab() === 'modules')}><OdooDockerSshAdminModules /></$>
|
||
<$ when={(visibleTab() === 'actions')}><OdooDockerSshAdminActions /></$>
|
||
<$ when={(visibleTab() === 'serverlog')}><OdooDockerSshAdminServerLog /></$>
|
||
</>
|
||
}
|
||
createRoot(() => document.body.appendChild(<OdooDockerSshAdmin />));
|