Skip to content

Commit e8f59fb

Browse files
acebergaceberg
committed
UI upd
1 parent 97cbaa6 commit e8f59fb

File tree

12 files changed

+111
-81
lines changed

12 files changed

+111
-81
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
# Change Log
33
All notable changes to this project will be documented in this file.
44

5+
## [0.1.5] - 2025-04-
6+
### Added
7+
- Item Page
8+
- Highlight sorted field
9+
- Auto update for logs
10+
- UI update
11+
512
## [0.1.4] - 2025-04-02
613
### Added
714
- User defined command [#2](https://github.com/aceberg/AnyAppStart/issues/2)

‎backend/internal/web/public/assets/index.js‎

Lines changed: 18 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/components/All/EditItemForm.tsx‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,7 @@ import { prepareAllData, updAllItems } from "../../functions/updstate";
77

88
function EditItemForm(_props: any) {
99

10-
const item:Item = {
11-
ID: _props.item.ID,
12-
Group: _props.item.Group,
13-
Name: _props.item.Name,
14-
Type: _props.item.Type,
15-
Link: _props.item.Link,
16-
Icon: _props.item.Icon,
17-
Exec: "",
18-
State: "",
19-
CPU: "",
20-
Mem: "",
21-
AnyCom: _props.item.AnyCom,
22-
};
23-
24-
const [formData, setFormData] = useState<Item>(item);
10+
const [formData, setFormData] = useState<Item>(_props.item);
2511

2612
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
2713
const { name, value } = e.target;
@@ -49,7 +35,7 @@ function EditItemForm(_props: any) {
4935
}
5036

5137
const saveChanges = async (data: Item) => {
52-
await apiSaveItem(item, data);
38+
await apiSaveItem(_props.item, data);
5339
prepareAllData();
5440
setTimeout(() => {
5541
updAllItems();
@@ -58,11 +44,11 @@ function EditItemForm(_props: any) {
5844

5945
return (
6046
<>
61-
<form>
47+
<form autoComplete="on" onSubmit={e => e.preventDefault()}>
6248
<label htmlFor="gid" className="form-label text-primary">Group</label>
63-
<input className="form-control mb-3" defaultValue={item.Group} id="gid" name="Group" onChange={handleChange} placeholder="Not empty string"></input>
49+
<input className="form-control mb-3" defaultValue={_props.item.Group} id="gid" name="Group" type="text" onChange={handleChange} placeholder="Not empty string"></input>
6450
<label htmlFor="nid" className="form-label text-primary">Name</label>
65-
<input className="form-control mb-3" defaultValue={item.Name} id="nid" name="Name" onChange={handleChange} placeholder="Not empty string"></input>
51+
<input className="form-control mb-3" defaultValue={_props.item.Name} id="nid" name="Name" type="text" onChange={handleChange} placeholder="Not empty string"></input>
6652
<label htmlFor="tid" className="form-label text-primary">Type</label>
6753
<select className="form-select mb-3" id="tid" onChange={handleSelectType} defaultValue={formData.Type}>
6854
<option value="" disabled>Select type</option>
@@ -71,13 +57,13 @@ function EditItemForm(_props: any) {
7157
))}
7258
</select>
7359
<label htmlFor="iid" className="form-label text-primary">Icon</label>
74-
<input className="form-control mb-3" defaultValue={item.Icon} id="iid" name="Icon" onChange={handleChange} placeholder="Link to Icon (optional)"></input>
60+
<input className="form-control mb-3" defaultValue={_props.item.Icon} id="iid" name="Icon" onChange={handleChange} placeholder="Link to Icon (optional)"></input>
7561
<label htmlFor="lid" className="form-label text-primary">Link</label>
76-
<input className="form-control mb-3" defaultValue={item.Link} id="lid" name="Link" onChange={handleChange} placeholder="URL (optional)"></input>
62+
<input className="form-control mb-3" defaultValue={_props.item.Link} id="lid" name="Link" onChange={handleChange} placeholder="URL (optional)"></input>
7763
<hr></hr>
7864
<div className='d-flex justify-content-between'>
7965
<button className="btn btn-danger" type="button" onClick={handleDel}>Delete</button>
80-
<button className="btn btn-primary" type="button" onClick={handleSave}>Save</button>
66+
<button className="btn btn-outline-primary" type="submit" onClick={handleSave}>Save</button>
8167
</div>
8268
</form>
8369
</>

‎frontend/src/components/All/LogsOutput.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useState } from "react";
1+
import { useEffect, useRef, useState } from "react";
22

33
import { apiExec } from "../../functions/api";
44

@@ -8,6 +8,19 @@ function LogsOutput(_props: any) {
88
const [logs, setLogs] = useState<string>("");
99
let interval: NodeJS.Timeout;
1010

11+
const containerRef = useRef<HTMLDivElement>(null);
12+
13+
const scrollToBottom = () => {
14+
window.scrollTo({
15+
top: document.documentElement.scrollHeight,
16+
behavior: "smooth",
17+
});
18+
const container = containerRef.current;
19+
if (container) {
20+
container.scrollTop = container.scrollHeight;
21+
}
22+
};
23+
1124
const updateLogs = async () => {
1225

1326
let item = _props.item;
@@ -24,17 +37,26 @@ function LogsOutput(_props: any) {
2437
interval = setInterval(() => {
2538
console.log("Update logs for ", _props.item.Name);
2639
updateLogs();
27-
}, 10000); // 10000 ms = 10 s
40+
}, 5000); // 5000 ms = 5 s
2841

2942
return () => {
3043
clearInterval(interval);
3144
}
3245
}, []);
3346

3447
return (
35-
<div className="overflow-auto" style={{ height: _props.height }}>
48+
<>
49+
<div className="overflow-auto" ref={containerRef} style={{ height: _props.height }}>
3650
{isLoading ? <pre>Loading logs for {_props.item.Name}...</pre> : <pre>{logs}</pre>}
51+
52+
<div className="position-absolute top-0 end-0">
53+
<i className="bi bi-chevron-bar-down shade-hover fs-3 opacity-50"
54+
title="Scroll down logs"
55+
onClick={scrollToBottom}
56+
></i>
57+
</div>
3758
</div>
59+
</>
3860
)
3961
}
4062

‎frontend/src/components/All/UserCommandForm.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,17 @@ function UserCommandForm(_props: any) {
3030

3131
return (
3232
<>
33-
<div className="input-group mb-4">
34-
<input type="text" className="form-control"
35-
placeholder="Set default command in Types menu"
36-
defaultValue={anyCommand}
37-
onChange={(e) => setAnyCommand(e.target.value)}
38-
onKeyUp={(e) => {e.key === "Enter" ? handleRun() : {}}}></input>
39-
<button type="submit" className="btn btn-outline-primary"
40-
onClick={handleRun}>Run</button>
41-
</div>
33+
<form autoComplete="on" onSubmit={e => e.preventDefault()}>
34+
<div className="input-group mb-4">
35+
<input type="text" name="any-com" className="form-control"
36+
placeholder="Set default command in Types menu"
37+
defaultValue={anyCommand}
38+
onChange={(e) => setAnyCommand(e.target.value)}
39+
onKeyUp={(e) => {e.key === "Enter" ? handleRun() : {}}}
40+
></input>
41+
<button className="btn btn-outline-primary" type="submit" onClick={handleRun}>Run</button>
42+
</div>
43+
</form>
4244
<hr></hr>
4345
{result}
4446
<hr></hr>

‎frontend/src/components/Body/ItemShow.tsx‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -30,22 +30,18 @@ function ItemShow(_props: any) {
3030

3131
return (
3232
<>
33-
<td>
34-
{_props.item.Icon
35-
? <a href={_props.item.Link} target="_blank">
36-
<img src={_props.item.Icon} width={30} height={30}></img>
37-
</a>
38-
: <></>
39-
}
40-
</td>
41-
<td>
42-
{_props.item.Link
43-
? <a href={_props.item.Link} target="_blank">{_props.item.Name}</a>
44-
: _props.item.Name
45-
}
46-
</td>
47-
<td onClick={() => _props.handleNavigate(_props.item)}>{_props.item.Type}<Toaster position="top-center"/></td>
48-
<td onClick={() => _props.handleNavigate(_props.item)}>{_props.item.Group}</td>
33+
{_props.item.Icon
34+
? <td><a href={_props.item.Link} target="_blank">
35+
<img src={_props.item.Icon} width={30} height={30}></img>
36+
</a></td>
37+
: <td onClick={() => _props.handleNavigate(_props.item.ID)}></td>
38+
}
39+
{_props.item.Link
40+
? <td><a href={_props.item.Link} target="_blank">{_props.item.Name}</a></td>
41+
: <td onClick={() => _props.handleNavigate(_props.item.ID)}>{_props.item.Name}</td>
42+
}
43+
<td onClick={() => _props.handleNavigate(_props.item.ID)}>{_props.item.Type}<Toaster position="top-center"/></td>
44+
<td onClick={() => _props.handleNavigate(_props.item.ID)}>{_props.item.Group}</td>
4945
<td>
5046
<i className="bi bi-play shade-hover me-1 fs-5" onClick={() => handleExec("Start")} title="Start"></i>
5147
<i className="bi bi-arrow-clockwise shade-hover me-1 fs-5" onClick={() => handleExec("Restart")} title="Restart"></i>

‎frontend/src/components/Body/Logs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function Logs(_props: any) {
1414
isOpen={isModalOpen}
1515
title={"Logs: "+_props.item.Name}
1616
size="modal-xl"
17-
body={<LogsOutput item={_props.item} height="800px"></LogsOutput>}
17+
body={<LogsOutput item={_props.item} height="80vh"></LogsOutput>}
1818
onClose={() => setModalOpen(false)}
1919
/>
2020
</>

‎frontend/src/components/Header/Config/ConfigSettings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function ConfigSettings() {
8787
<hr></hr>
8888
<div className='d-flex justify-content-between'>
8989
<span></span>
90-
<button className="btn btn-primary" type="button" onClick={handleSave}>Save</button>
90+
<button className="btn btn-primary" type="submit" onClick={handleSave}>Save</button>
9191
</div>
9292
</form>
9393
}

‎frontend/src/components/Header/Type/TypeEdit.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ function TypeEdit(_props: any) {
9494
<hr></hr>
9595
<div className='d-flex justify-content-between'>
9696
<button className="btn btn-danger" type="button" onClick={handleDel}>Delete</button>
97-
<button className="btn btn-primary" type="button" onClick={handleSave}>Save</button>
97+
<button className="btn btn-primary" type="submit" onClick={handleSave}>Save</button>
9898
</div>
9999
</form>
100100
}

‎frontend/src/components/ItemPage/ItemPageMain.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,24 @@ const ItemPageMain: React.FC<ChildProps> = ({ id }) => {
3232
<div className="row">
3333
<div className="col-md mt-4">
3434
<div className="card border-primary">
35-
<div className="card-header">Item</div>
35+
<div className="card-header d-flex justify-content-start">
36+
<div>
37+
{item.Icon
38+
? <a href={item.Link} target="_blank" className="pe-3">
39+
<img src={item.Icon} width={25} height={25}></img>
40+
</a>
41+
: <></>
42+
}
43+
</div>
44+
<div>
45+
{item.Link
46+
? <a href={item.Link} target="_blank">{item.Name}</a>
47+
: item.Name
48+
}
49+
</div>
50+
</div>
3651
<div className="card-body">
37-
<EditItemForm item={item} onSave={() => navigate("/")}
52+
<EditItemForm item={item} onSave={() => {}}
3853
onDelete={() => navigate("/")} />
3954
</div>
4055
</div>

0 commit comments

Comments
 (0)