282 lines
10 KiB
JavaScript
282 lines
10 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';
|
||
|
||
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: '', database: '',
|
||
databases: [], modules: '', serverlog: '', connected: false
|
||
};
|
||
|
||
const OdooDockerSshAdminConfig = () => {
|
||
const [state, setState] = createLocalState(initialState);
|
||
const [isConnected, setIsConnected] = createSignal(false);
|
||
const [passphrase, setPassphrase] = createSignal('');
|
||
const valueSet = ({target}) => setState(target.name, target.value);
|
||
|
||
let cantConnect = !(state.address && state.username && state.key && state.port);
|
||
|
||
const connect = () => {
|
||
fetch('/connect',
|
||
{method: 'POST',
|
||
body: JSON.stringify({
|
||
address: state.address,
|
||
port: state.port,
|
||
username: state.username,
|
||
key: state.key,
|
||
password: passphrase()
|
||
}),
|
||
headers:{ 'Content-Type': 'application/json'}})
|
||
.then(response => {
|
||
setIsConnected(response.status == 200);
|
||
return response.json();
|
||
})
|
||
.then(body => humane.log(body))
|
||
};
|
||
const disconnect = () => {
|
||
fetch ('/disconnect')
|
||
.then(response => {
|
||
setIsConnected(!(response.status == 200));
|
||
return response.json();
|
||
})
|
||
.then(body => humane.log(body))
|
||
};
|
||
|
||
return <div>
|
||
<h2>🛠 Configuration
|
||
<span style="margin-left: 0.5em;">
|
||
<$ when={(isConnected())}>🔵</$>
|
||
<$ when={(!isConnected())}>🔴</$>
|
||
</span>
|
||
</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="password">Mot de passe clé</label>
|
||
<input name="password" type="password" required value={(passphrase())}
|
||
onInput={({target}) => setPassphrase(target.value)} />
|
||
</div>
|
||
</div>
|
||
<button type="button" class="button outline primary" onClick={connect}>🔗 Connecter</button>
|
||
<button type="button" class="button outline secondary" onClick={disconnect}>🔴 Déconnecter</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 />));
|