Align Config Web UI Code Layout, API with the rest of the application

- Put code to configure app via web interface under `src/interface/web` directory with the rest of the web interface code
- Make config web UI available under `/config` instead of at the generic `/ui` endpoint
- Rename `/config` API endpoint (that gets/sets config from/to yaml file) to `/config/data`
- Add Khoj App title, favicon to config web page
This commit is contained in:
Debanjum
2022-08-01 01:53:21 +03:00
committed by GitHub
6 changed files with 24 additions and 22 deletions

View File

@@ -10,7 +10,7 @@ var emptyValueDefault = "🖊️";
/** /**
* Fetch the existing config file. * Fetch the existing config file.
*/ */
fetch("/config") fetch("/config/data")
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
rawConfig = data; rawConfig = data;
@@ -26,15 +26,16 @@ fetch("/config")
configForm.addEventListener("submit", (event) => { configForm.addEventListener("submit", (event) => {
event.preventDefault(); event.preventDefault();
console.log(rawConfig); console.log(rawConfig);
const response = fetch("/config", { fetch("/config/data", {
method: "POST", method: "POST",
credentials: "same-origin", credentials: "same-origin",
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify(rawConfig) body: JSON.stringify(rawConfig)
}).then(response => response.json()) })
.then((data) => console.log(data)); .then(response => response.json())
.then(data => console.log(data));
}); });
}); });

View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦅</text></svg>">
<link rel="stylesheet" href="static/assets/config.css">
<title>Khoj - Configure App</title>
</head>
<body>
<form id="config-form">
</form>
<button id="config-regenerate">regenerate</button>
</body>
<script src="static/assets/config.js"></script>
</html>

View File

@@ -85,7 +85,7 @@
function populate_type_dropdown() { function populate_type_dropdown() {
// Populate type dropdown field with enabled search types only // Populate type dropdown field with enabled search types only
var possible_search_types = ["org", "markdown", "ledger", "music", "image"]; var possible_search_types = ["org", "markdown", "ledger", "music", "image"];
fetch("/config") fetch("/config/data")
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
document.getElementById("type").innerHTML = document.getElementById("type").innerHTML =

View File

@@ -34,22 +34,21 @@ app = FastAPI()
web_directory = f'src/interface/web/' web_directory = f'src/interface/web/'
app.mount("/static", StaticFiles(directory=web_directory), name="static") app.mount("/static", StaticFiles(directory=web_directory), name="static")
app.mount("/views", StaticFiles(directory="views"), name="views") templates = Jinja2Templates(directory=web_directory)
templates = Jinja2Templates(directory="views/")
@app.get("/", response_class=FileResponse) @app.get("/", response_class=FileResponse)
def index(): def index():
return FileResponse(web_directory + "index.html") return FileResponse(web_directory + "index.html")
@app.get('/ui', response_class=HTMLResponse) @app.get('/config', response_class=HTMLResponse)
def ui(request: Request): def ui(request: Request):
return templates.TemplateResponse("config.html", context={'request': request}) return templates.TemplateResponse("config.html", context={'request': request})
@app.get('/config', response_model=FullConfig) @app.get('/config/data', response_model=FullConfig)
def config_data(): def config_data():
return config return config
@app.post('/config') @app.post('/config/data')
async def config_data(updated_config: FullConfig): async def config_data(updated_config: FullConfig):
global config global config
config = updated_config config = updated_config

View File

@@ -1,12 +0,0 @@
<!DOCTYPE html>
<head>
<title>Set directories for your config file.</title>
<link rel="stylesheet" href="views/style.css">
</head>
<body>
<form id="config-form">
</form>
<button id="config-regenerate">regenerate</button>
</body>
<script src="views/scripts/config.js"></script>
</html>