lotus/curiosrc/web/static/config/edit.html
Andrew Jackson (Ajax) fd7f1a95e2
feat: curio: web based config edit (#11822)
* cfg edit 1

* jsonschema deps

* feat: lp mig - first few steps

* lp mig: default tasks

* code comments

* docs

* lp-mig-progress

* shared

* comments and todos

* fix: curio: rename lotus-provider to curio (#11645)

* rename provider to curio

* install gotext

* fix lint errors, mod tidy

* fix typo

* fix API_INFO and add gotext to circleCI

* add back gotext

* add gotext after remerge

* lp: channels doc

* finish easy-migration TODOs

* out generate

* merging and more renames

* avoid make-all

* minor doc stuff

* cu: make gen

* make gen fix

* make gen

* tryfix

* go mod tidy

* minor ez migration fixes

* ez setup - ui cleanups

* better error message

* guided setup colors

* better path to saveconfigtolayer

* loadconfigwithupgrades fix

* readMiner oops

* guided - homedir

* err if miner is running

* prompt error should exit

* process already running, miner_id sectors in migration

* dont prompt for language a second time

* check miner stopped

* unlock repo

* render and sql oops

* curio easyMig - some fixes

* easyMigration runs successfully

* lint

* part 2 of last

* message

* merge addtl

* fixing guided setup for myself

* warn-on-no-post

* EditorLoads

* cleanups and styles

* create info

* fix tests

* make gen

* change layout, add help button

* Duration custom json

* mjs naming

---------

Co-authored-by: LexLuthr <88259624+LexLuthr@users.noreply.github.com>
Co-authored-by: LexLuthr <lexluthr@protocol.ai>
Co-authored-by: LexLuthr <lexluthr@curiostorage.org>
2024-04-16 09:30:27 -05:00

151 lines
5.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>JSON Schema Editor</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/theme.min.css" rel="stylesheet">
</head>
<body>
<style>
#saveButton {
display: block;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: green;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#saveButton:hover {
background-color: #555;
}
.help-button button {
font-size: 24px;
border-radius: 50%;
width: 50px;
height: 50px;
position: fixed;
bottom: 20px;
right: 120px;
z-index: 99;
}
.help-text {
display: none;
position: fixed;
border: 1px solid #ccc;
background-color: gray;
padding: 10px;
width: 200px;
bottom: 20px;
right: 200px;
z-index: 100;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.hidden {
display: none;
}
.show {
display: block;
}
</style>
<section class="section container-fluid implementations">
<div class="row justify-content-center content">
<div class="col-md-8">
<div>
<button id="saveButton" class="saveButton">Save</button>
</div>
<div class="help-button">
<button id="helpBtn">?</button>
<p id="helpText" class="hidden help-text">Checking a box and entering a non default value will uncomment the corresponding configuration variable.
Unchecking a box will reset the value to default.</p>
</div>
<div id="editor" ></div>
<script>
var editor;
var urlParams = new URLSearchParams(window.location.search);
var layer = urlParams.get('layer');
// Make simultaneous GET requests to fetch the existing data and JSON Schema
const layerPath = layer === 'default' ? 'config/default' : `config/layers/${layer}`;
Promise.all([
axios.get(`/api/${layerPath}`),
axios.get('/api/config/schema')
])
.then(responses => {
const existingData = responses[0].data;
const schema = responses[1].data;
// Create a JSON Editor instance and pass the schema and existing data
const container = document.getElementById('editor');
const options = {
//mode: 'tree',
schema: schema,
startval: existingData,
theme: 'bootstrap5',
iconlib: 'jqueryui',
show_opt_in: true,
disable_edit_json: true,
form_name_root: "Configuration",
disable_properties: true,
};
editor = new JSONEditor(container, options);
document.getElementById("helpBtn").addEventListener("click", function() {
var helpText = document.getElementById("helpText");
if (helpText.classList.contains("hidden")) {
helpText.classList.remove("hidden");
helpText.classList.add("show");
} else {
helpText.classList.remove("show");
helpText.classList.add("hidden");
}
});
// Attach function to saveButton click event
var saveButton = document.getElementById('saveButton');
saveButton.addEventListener('click', function() {
if (layer === 'default'){
alert('Error: cannot edit defaults');
} else {
const value = editor.getValue();
console.log(value)
axios.post('/api/config/layers/' + layer, value)
.then(response => {
// Set cookie named 'message' with the value 'Data saved successfully'
document.cookie = 'message=The layer "' + layer + '" saved successfully.; path=/;';
window.location.href = '/config/';
})
.catch(error => {
alert('Error saving data:', error);
});
}
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</div>
</div>
</section>
</body>
</html>