112 lines
2.8 KiB
JavaScript
112 lines
2.8 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import ApplicationDetails from './ApplicationDetails'
|
|
|
|
const ApplicationSettings = () => {
|
|
const [state, setState] = useState([]);
|
|
|
|
const getData = async () => {
|
|
const response = await fetch("/sui/api/apps");
|
|
const data = await response.json();
|
|
setState(data);
|
|
};
|
|
|
|
const addRow = () => {
|
|
setState([
|
|
...state,
|
|
{ key: state.length +1,name: "", url: "home.halfaperture.com/", icon: "", urlbase: "/", NSFW: false}
|
|
]);
|
|
};
|
|
|
|
useEffect(() => {
|
|
getData();
|
|
}, []);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
let names = []
|
|
let urls = []
|
|
let icons = []
|
|
let urlbases = []
|
|
let NSFWs = []
|
|
let exportData = {
|
|
apps: []
|
|
}
|
|
for (const item of e.target.form) {
|
|
if (item.type === "text") {
|
|
switch (item.id) {
|
|
case "name":
|
|
names.push(item.value)
|
|
break;
|
|
case "url":
|
|
urls.push(item.value)
|
|
break;
|
|
case "icon":
|
|
icons.push(item.value)
|
|
break;
|
|
case "urlbase":
|
|
urlbases.push(item.value)
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
} else if (item.type === "checkbox") {
|
|
if (item.checked) {
|
|
NSFWs.push("NSFW")
|
|
} else {
|
|
NSFWs.push("SAFE")
|
|
}
|
|
}
|
|
}
|
|
for (let index = 0; index < names.length; ++index) {
|
|
exportData.apps.push({
|
|
"name" : names[index],
|
|
"url" : urls[index],
|
|
"icon" : icons[index],
|
|
"urlbase" : urlbases[index],
|
|
"NSFW" : NSFWs[index]
|
|
});
|
|
}
|
|
let exportJSON = JSON.stringify(exportData)
|
|
const requestOptions = {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: exportJSON
|
|
};
|
|
fetch("/sui/api/appUpdate", requestOptions)
|
|
.then(getData())
|
|
};
|
|
|
|
return (
|
|
<div id="settings-panel">
|
|
<div id="settings-panel-header">
|
|
<h1>Applications</h1>
|
|
</div>
|
|
<form id="applicationForm">
|
|
<div id="applicationHeader">
|
|
<div>Name</div>
|
|
<div>URL</div>
|
|
<div>Icon</div>
|
|
<div>Base URL</div>
|
|
<div>Hideable</div>
|
|
</div>
|
|
{state.map((apps) => (
|
|
<ApplicationDetails
|
|
key={apps.name}
|
|
name={apps.name}
|
|
url={apps.url}
|
|
icon={apps.icon}
|
|
urlbase={apps.urlbase}
|
|
NSFW={apps.NSFW}
|
|
/>
|
|
))}
|
|
|
|
</form>
|
|
<button onClick={addRow} className="addRow">Add Application</button>
|
|
<button onClick={handleSubmit} type="submit" form="applicationForm" value="submit">Save</button>
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
export default ApplicationSettings;
|