udo/uce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

getting closer to full port of web app starter

Browse Source
This commit is contained in:
udo
2026-04-19 19:09:21 +00:00
parent 2b5586d7df
commit d1167aec3b
96 changed files with 3395 additions and 1027 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/examples/uce-starter/views/account/profile.uce
+1 -1
View File
@@ -21,7 +21,7 @@ RENDER(Request& context)
<h1>Profile</h1>
<p>Email: <?= user["email"].to_string() ?></p>
<p>Roles: <?= roles ?></p>
<p>Created: <?= date("%Y-%m-%dT%H:%M:%S", int_val(user["created"].to_string())) ?></p>
<p>Created: <?= time_format_local("%Y-%m-%dT%H:%M:%S", int_val(user["created"].to_string())) ?></p>
<p><a href="<?= starter_link("account/logout", context) ?>">Logout</a></p>
</>
}
site/examples/uce-starter/views/gauges.uce
+56 -16
View File
@@ -5,6 +5,7 @@ RENDER(Request& context)
starter_boot(context);
context.var["starter"]["page_title"] = "Gauges";
starter_register_css("themes/common/css/gauges.css", context);
f64 pi = 3.14159265358979323846;
DTree props;
DTree item;
@@ -20,10 +21,19 @@ RENDER(Request& context)
props["layout"] = "horizontal";
props["style"] = "flex:1 1 24rem";
props["listen"].set_bool(true);
item["value"] = "45"; item["min"] = "0"; item["max"] = "200"; item["label"] = "CPU"; item["tooltip"] = "CPU Usage"; props["items"]["cpu"] = item; item.clear();
props["markers"]["zero"]["value"] = "0";
props["markers"]["zero"]["label"] = "Zero";
props["markers"]["zero"]["color"] = "var(--bg-color)";
props["markers"]["high"]["value"] = "100";
props["markers"]["high"]["label"] = "High";
item["value"] = "45"; item["min"] = "0"; item["max"] = "200"; item["label"] = "CPU"; item["tooltip"] = "CPU Usage";
item["color"]["0"]["from"] = "-50"; item["color"]["0"]["to"] = "20"; item["color"]["0"]["color"] = "var(--text-muted)";
item["color"]["1"]["from"] = "20"; item["color"]["1"]["to"] = "80"; item["color"]["1"]["color"] = "var(--primary)";
item["color"]["2"]["from"] = "80"; item["color"]["2"]["to"] = "100"; item["color"]["2"]["color"] = "var(--warning)";
props["items"]["cpu"] = item; item.clear();
item["value"] = "92"; item["min"] = "-50"; item["max"] = "100"; item["label"] = "Memory"; item["tooltip"] = "Memory Usage"; props["items"]["memory"] = item; item.clear();
item["value"] = "28"; item["min"] = "0"; item["max"] = "100"; item["label"] = "Disk I/O"; item["tooltip"] = "Disk I/O"; props["items"]["disk"] = item;
print(component("../components/gauges/gauges:PROGRESSBAR", props, context));
print(component("../components/gauges/progressbar", props, context));
props.clear();
props["id"] = "vertical_demo";
@@ -33,10 +43,15 @@ RENDER(Request& context)
props["style"] = "flex:1 1 24rem";
props["height"] = "350";
props["listen"].set_bool(true);
item.clear(); item["value"] = "45"; item["min"] = "0"; item["max"] = "200"; item["label"] = "CPU"; props["items"]["cpu"] = item;
item.clear(); item["value"] = "92"; item["min"] = "-50"; item["max"] = "100"; item["label"] = "RAM"; props["items"]["memory"] = item;
item.clear(); item["value"] = "28"; item["min"] = "0"; item["max"] = "100"; item["label"] = "I/O"; props["items"]["disk"] = item;
print(component("../components/gauges/gauges:PROGRESSBAR", props, context));
props["markers"]["zero"]["value"] = "0";
props["markers"]["zero"]["label"] = "Zero";
props["markers"]["zero"]["color"] = "var(--bg-color)";
props["markers"]["high"]["value"] = "100";
props["markers"]["high"]["label"] = "High";
item.clear(); item["value"] = "45"; item["min"] = "0"; item["max"] = "200"; item["label"] = "CPU"; item["tooltip"] = "CPU Usage"; props["items"]["cpu"] = item;
item.clear(); item["value"] = "92"; item["min"] = "-50"; item["max"] = "100"; item["label"] = "RAM"; item["tooltip"] = "Memory Usage"; props["items"]["memory"] = item;
item.clear(); item["value"] = "28"; item["min"] = "0"; item["max"] = "100"; item["label"] = "I/O"; item["tooltip"] = "Disk I/O"; props["items"]["disk"] = item;
print(component("../components/gauges/progressbar", props, context));
<>
<div class="gauge-control-panel">
@@ -54,13 +69,34 @@ RENDER(Request& context)
props.clear();
props["id"] = "needle_demo";
props["title"] = "Needle Gauge";
props["subtitle"] = "The original analog gauge now uses the same elevated panels and theme-token palette as the arc gauges.";
props["subtitle"] = "The original analog gauge now uses the same elevated panels, typography, and theme-token palette as the arc gauges.";
props["style"] = "flex:1 1 24rem";
props["listen"].set_bool(true);
item.clear(); item["value"] = "45"; item["min"] = "0"; item["max"] = "200"; item["label"] = "CPU"; item["tooltip"] = "CPU Usage"; props["items"]["cpu"] = item;
item.clear(); item["value"] = "92"; item["min"] = "-50"; item["max"] = "100"; item["label"] = "Memory"; item["tooltip"] = "Memory Usage"; props["items"]["memory"] = item;
item.clear(); item["value"] = "28"; item["min"] = "0"; item["max"] = "100"; item["label"] = "Disk I/O"; item["tooltip"] = "Disk I/O"; props["items"]["disk"] = item;
print(component("../components/gauges/gauges:NEEDLEGAUGE", props, context));
props["label"] = "CPU";
props["tooltip"] = "CPU Usage";
props["scale"]["angle_start"] = std::to_string(-1.2 * pi);
props["scale"]["angle_end"] = std::to_string(0.2 * pi);
props["scale"]["max"] = "100";
props["scale"]["unit"] = "%";
props["scale"]["ticks-every"] = "10";
props["scale"]["value-labels-every"] = "20";
props["scale"]["tick-color"] = "var(--text-muted)";
props["scale"]["color"]["0"]["from"] = "-50";
props["scale"]["color"]["0"]["to"] = "10";
props["scale"]["color"]["0"]["color"] = "var(--primary)";
props["scale"]["color"]["1"]["from"] = "10";
props["scale"]["color"]["1"]["to"] = "70";
props["scale"]["color"]["1"]["color"] = "var(--text-muted)";
props["scale"]["color"]["2"]["from"] = "70";
props["scale"]["color"]["2"]["to"] = "90";
props["scale"]["color"]["2"]["color"] = "var(--warning)";
props["scale"]["color"]["3"]["from"] = "90";
props["scale"]["color"]["3"]["to"] = "200";
props["scale"]["color"]["3"]["color"] = "var(--error)";
item.clear(); item["max"] = "200"; item["value"] = "45"; item["label"] = "CPU"; props["items"]["cpu"] = item;
item.clear(); item["value"] = "92"; item["min"] = "-50"; item["label"] = "Memory"; item["tooltip"] = "Memory Usage"; props["items"]["memory"] = item;
item.clear(); item["value"] = "28"; item["label"] = "Disk I/O"; item["tooltip"] = "Disk I/O"; props["items"]["disk"] = item;
print(component("../components/gauges/needlegauge", props, context));
<>
</div>
@@ -70,13 +106,17 @@ RENDER(Request& context)
props.clear();
props["id"] = "arc_demo";
props["title"] = "SVG Arc Gauges";
props["subtitle"] = "Backported from the llm2 overview as reusable KPI-style gauges.";
props["subtitle"] = "Backported from the llm2 overview as reusable KPI-style gauges with optional watermark tracking.";
props["style"] = "flex: 2 1 36rem";
props["listen"].set_bool(true);
item.clear(); item["label"] = "System Load"; item["value"] = "1.8"; item["max"] = "8"; item["precision"] = "1"; item["caption"] = "LOAD 1M"; item["meta"] = "4 cores available"; props["items"]["load"] = item;
item.clear(); item["label"] = "Memory"; item["value"] = "62"; item["max"] = "100"; item["precision"] = "0"; item["unit"] = "%"; item["caption"] = "MEMORY"; item["meta"] = "9.9 / 16 GB"; props["items"]["memory_arc"] = item;
item.clear(); item["label"] = "Network"; item["value"] = "18"; item["max"] = "100"; item["precision"] = "0"; item["unit"] = " MB/s"; item["caption"] = "THROUGHPUT"; item["meta"] = "Inbound + outbound"; props["items"]["network"] = item;
print(component("../components/gauges/gauges:ARCGAUGE", props, context));
item.clear(); item["label"] = "System Load"; item["value"] = "1.8"; item["max"] = "8"; item["precision"] = "1"; item["caption"] = "LOAD 1M"; item["meta"] = "4 cores available"; item["watermark_prefix"] = "loadDemo";
item["color"]["0"]["from"] = "0"; item["color"]["0"]["to"] = "3.5"; item["color"]["0"]["color"] = "var(--success, #10b981)";
item["color"]["1"]["from"] = "3.5"; item["color"]["1"]["to"] = "6"; item["color"]["1"]["color"] = "var(--warning, #f59e0b)";
item["color"]["2"]["from"] = "6"; item["color"]["2"]["to"] = "8"; item["color"]["2"]["color"] = "var(--error, #ef4444)";
props["items"]["load"] = item;
item.clear(); item["label"] = "Memory"; item["value"] = "62"; item["max"] = "100"; item["precision"] = "0"; item["unit"] = "%"; item["caption"] = "MEMORY"; item["meta"] = "9.9 / 16 GB"; item["watermark_prefix"] = "memoryDemo"; props["items"]["memory_arc"] = item;
item.clear(); item["label"] = "Network"; item["value"] = "18"; item["max"] = "100"; item["precision"] = "0"; item["unit"] = " MB/s"; item["caption"] = "THROUGHPUT"; item["meta"] = "Inbound + outbound"; item["watermark_prefix"] = "networkDemo"; props["items"]["network"] = item;
print(component("../components/gauges/arcgauge", props, context));
<>
<div class="gauge-control-panel">