public override void Render(Ui ui, T rows)
{
var accessor = Accessors[typeof(T)];
var columns = Members[typeof(T)];
Header(ui, columns);
ui.BeginElement("tbody");
{
foreach (var row in rows)
{
ui.BeginElement("tr");
ui.BeginElement("td", new { @class = "collapsing" });
{
ui.BeginDiv("ui fitted slider checkbox")
.Input(InputType.Checkbox)
.Label("")
.EndDiv();
}
ui.EndElement("td");
foreach (var column in columns)
{
ui.BeginElement("td")
.Literal(accessor[row, column.Name]?.ToString());
ui.EndElement("td");
}
ui.EndElement("tr");
}
}
ui.EndElement("tbody");
Footer(ui);
}
public static void SurveyPrompt(this Ui ui, string title)
{
ui.BeginElement("div");
ui.Attribute("class", "alert alert-secondary mt-4");
ui.Attribute("role", "alert");
{
ui.BeginElement("span");
ui.Attribute("class", "oi oi-pencil mr-2");
ui.Attribute("aria-hidden", true);
ui.EndElement("span");
ui.BeginElement("strong");
ui._(title);
ui.EndElement("strong");
ui.BeginElement("span");
ui.Attribute("class", "text-nowrap");
{
ui._(" Please take our ");
ui.BeginElement("a");
{
ui.Attribute("target", "_blank");
ui.Attribute("class", "font-weight-bold");
ui.Attribute("href", "https://go.microsoft.com/fwlink/?linkid=2121313");
ui._(" brief survey");
ui.EndElement("a");
}
ui.EndElement("span");
}
ui._(" and tell us what you think.");
ui.EndElement("div");
}
}
public static ElementRef NestedDirective(Ui ui, string element, Action <Ui> closure, Value128?id = default)
{
ui.BeginElement(element, id);
closure?.Invoke(ui);
ui.EndElement(element);
return(new ElementRef(ui, id));
}
private static ElementRef InlineDirective(Ui ui, string element, object inner, Value128?id = default)
{
ui.BeginElement(element, id);
ui._(inner);
ui.EndElement(element);
return(new ElementRef(ui, id));
}
private static void Header(Ui ui, AccessorMembers members)
{
ui.BeginTable("ui compact celled definition table");
{
ui.BeginElement("thead", new { @class = "full-width" });
{
ui.BeginElement("tr");
ui.Element("th");
foreach (var member in members)
{
ui.Element("th", member.Name);
}
ui.EndElement("tr");
}
ui.EndElement("thead");
}
ui.EndTable();
}
private static void Footer(Ui ui)
{
ui.BeginTfoot("full-width");
{
ui.BeginElement("tr");
{
ui.Element("th");
ui.BeginElement("th", new { colspan = 4 });
{
ui.BeginDiv("ui right floated small primary labeled icon button");
ui.Icon(InterfaceIcons.User).Literal("Add User");
ui.EndDiv();
ui.BeginDiv("ui small button").Literal("Approve").EndDiv();
ui.BeginDiv("ui small button disabled").Literal("Approve All").EndDiv();
}
ui.EndElement("th");
}
ui.EndElement("tr");
}
ui.EndTfoot();
}
public void MainLayout(Ui ui)
{
ui.BeginElement("div");
ui.Attribute("class", "sidebar");
{
ui.NavBar(collapseNavMenu);
ui.EndElement("div");
}
ui.BeginElement("div");
ui.Attribute("class", "main");
{
ui.BeginElement("div");
{
ui.Attribute("class", "top-row px-4");
ui.BeginElement("a");
ui.Attribute("href", "http://blazor.net");
ui.Attribute("target", "_blank");
ui.Attribute("class", "ml-md-auto");
{
ui._("About");
ui.EndElement("a");
}
ui.EndElement("div");
}
ui.BeginElement("div");
{
ui.Attribute("class", "content px-4");
ui.Body();
ui.EndElement("div");
}
ui.EndElement("div");
}
}
public override void Render(Ui ui)
{
ui.BeginDiv(new { @class = "ui four column grid" });
{
ui.BeginDiv(new { @class = "column" });
{
ui.Element("h1", "Log Stream");
}
ui.EndDiv();
ui.BeginDiv(new { @class = "column" });
{
ui.BeginElement("button", new { @class = "ui labeled small icon button", id = "clear-logs" });
{
ui.Element("i", "", new { @class = "trash icon" });
ui.Literal("Clear");
}
ui.EndElement("button");
}
ui.EndDiv();
}
ui.EndDiv();
ui.Element("p", "");
ui.BeginDiv(new { @class = "ui segment" });
{
ui.BeginDiv(new { @class = "ui active dimmer", id = "no-logs" });
{
ui.Div("Waiting for logs...", new { @class = "ui indeterminate text loader" });
}
ui.EndDiv();
ui.BeginDiv(new
{
id = "logs", @class = "ui relaxed divided list", style = "height: 300px; overflow: auto;"
});
ui.EndDiv();
}
ui.EndDiv();
}
public override void Render(Ui ui)
{
var accessor = ui.GetRequiredService <IHttpContextAccessor>();
var connection = accessor.HttpContext.Features.Get <IHttpConnectionFeature>();
var local = $"{connection?.LocalIpAddress}:{connection?.LocalPort}";
//
// Top Bar Menu:
//
ui.BeginDiv(new { @class = "ui fixed inverted menu" });
{
ui.BeginDiv(new { @class = "ui container" });
{
ui.BeginElement("a", new { href = "#", @class = "header item" });
{
ui.Element("img", "HQ", new { @class = "logo", src = "assets/images/logo.png", style = "margin-right: 1.5em;" });
}
ui.EndElement("a");
ui.Element("a", $"{local}", new { href = "#", @class = "item" });
/*
* ui.BeginDiv(new { @class = "ui simple dropdown item" });
* {
* ui.Literal("Dropdown ");
* ui.Element("i", attr: new { @class = "dropdown icon" });
* ui.BeginDiv(new {@class = "menu"});
* {
* ui.Element("a", "Link Item", new { href = "#", @class = "item" });
* ui.Element("a", "Link Item", new { href = "#", @class = "item" });
* ui.Div(attr: new { @class = "divider" });
*
* ui.Div("Header Item", new { @class = "header" });
* ui.BeginDiv(attr: new { @class = "item"});
* {
* ui.Element("i", attr: new { @class = "dropdown icon" });
* ui.Literal("Sub Menu");
* ui.BeginDiv(new {@class = "menu"});
* {
* ui.Element("a", "Link Item", new { href = "#", @class = "item" });
* ui.Element("a", "Link Item", new { href = "#", @class = "item" });
* }
* ui.EndDiv();
* }
* ui.EndDiv();
*
* ui.Element("a", "Link Item", new { href = "#", @class = "item" });
* }
* ui.EndDiv();
* }
* ui.EndDiv();
*/
}
ui.EndDiv();
}
ui.EndDiv();
//
// Main:
//
ui.BeginDiv(new { @class = "ui main text container", style = "margin-top: 7em;" });
{
ui.BeginDiv(new { @class = "ui four column grid" });
{
ui.BeginDiv(new { @class = "column" });
{
ui.Element("h1", "Server Logs");
}
ui.EndDiv();
ui.BeginDiv(new { @class = "column" });
{
ui.BeginElement("button", new { @class = "ui labeled small icon button", id = "clear-logs" });
{
ui.Element("i", "", new { @class = "trash icon" });
ui.Literal("Clear");
}
ui.EndElement("button");
}
ui.EndDiv();
}
ui.EndDiv();
ui.Element("p", "");
ui.BeginDiv(new { @class = "ui segment" });
{
ui.BeginDiv(new { @class = "ui active dimmer", id = "no-logs" });
{
ui.Div("Tailing logs...", new { @class = "ui indeterminate text loader" });
}
ui.EndDiv();
ui.BeginDiv(new { id = "logs", @class = "ui relaxed divided list", style = "height: 300px; overflow: auto;" });
ui.EndDiv();
}
ui.EndDiv();
}
ui.EndDiv();
//
// Footer:
//
ui.BeginDiv(new { @class = "ui inverted footer segment", style = "margin: 5em 0em 0em; padding: 5em 0em;" });
{
ui.BeginDiv(new { @class = "ui center aligned container" });
{
ui.BeginDiv(new { @class = "ui stackable inverted divided grid" });
{
ui.BeginDiv(new { @class = "three wide column" });
{
ui.Element("h4", "Platform", new { @class = "ui inverted header" });
ui.BeginDiv(new { @class = "ui inverted link list" });
{
ui.Element("a", "Security", new { href = "#", @class = "item" });
ui.Element("a", "Pricing", new { href = "#", @class = "item" });
ui.Element("a", "Integrations", new { href = "#", @class = "item" });
ui.Element("a", "Documentations", new { href = "#", @class = "item" });
}
ui.EndDiv();
}
ui.EndDiv();
ui.BeginDiv(new { @class = "three wide column" });
{
ui.Element("h4", "Corporate", new { @class = "ui inverted header" });
ui.BeginDiv(new { @class = "ui inverted link list" });
{
ui.Element("a", "About", new { href = "#", @class = "item" });
ui.Element("a", "Jobs", new { href = "#", @class = "item" });
ui.Element("a", "Blog", new { href = "#", @class = "item" });
ui.Element("a", "Press", new { href = "#", @class = "item" });
ui.Element("a", "Partners", new { href = "#", @class = "item" });
}
ui.EndDiv();
}
ui.EndDiv();
ui.BeginDiv(new { @class = "three wide column" });
{
ui.Element("h4", "Community", new { @class = "ui inverted header" });
ui.BeginDiv(new { @class = "ui inverted link list" });
{
ui.Element("a", "Events", new { href = "#", @class = "item" });
ui.Element("a", "Case Studies", new { href = "#", @class = "item" });
}
ui.EndDiv();
}
ui.EndDiv();
ui.BeginDiv(new { @class = "seven wide column" });
{
ui.Element("h4", "Build Info", new { @class = "ui inverted header" });
ui.BeginDiv(new { @class = "text container" });
{
ui.Element("p", $"UI Version: {typeof(SplashPage).Assembly.GetName().Version}");
ui.Element("p", $"Platform Version: {typeof(Schema).Assembly.GetName().Version}");
ui.Element("p", $"App Version: {Assembly.GetEntryAssembly().GetName().Version}");
}
ui.EndDiv();
}
ui.EndDiv();
}
ui.EndDiv();
ui.Element("div", attr: new { @class = "ui inverted section divider" });
ui.Element("img", attr: new { src = "assets/images/logo.png", @class = "ui centered mini image" });
ui.BeginDiv(new { @class = "ui horizontal inverted small divided link list" });
{
ui.Element("a", "Privacy Policy", new { href = "https://hq.io/privacy", @class = "item" });
ui.Element("a", "Terms & Conditions", new { href = "https://hq.io/toc", @class = "item" });
ui.BeginElement("a", new { href = "https://github.com/hq-io", @class = "item" });
{
ui.Literal("Open Source ");
ui.Element("i", "", new { @class = "github icon" });
}
ui.EndElement("a");
}
ui.EndDiv();
}
ui.EndDiv();
}
ui.EndDiv();
}
public override void Render(Ui ui)
{
ui.BeginDiv(new { @class = "ui inverted footer segment", style = "margin: 5em 0em 0em; padding: 5em 0em;" });
{
ui.BeginDiv(new { @class = "ui center aligned container" });
{
ui.BeginDiv(new { @class = "ui stackable inverted divided grid" });
{
ui.BeginDiv(new { @class = "three wide column" });
{
ui.Element("h4", "Platform", new { @class = "ui inverted header" });
ui.BeginDiv(new { @class = "ui inverted link list" });
{
ui.Element("a", "Security", new { href = "#", @class = "item" });
ui.Element("a", "Pricing", new { href = "#", @class = "item" });
ui.Element("a", "Integrations", new { href = "#", @class = "item" });
ui.Element("a", "Documentations", new { href = "#", @class = "item" });
}
ui.EndDiv();
}
ui.EndDiv();
ui.BeginDiv(new { @class = "three wide column" });
{
ui.Element("h4", "Corporate", new { @class = "ui inverted header" });
ui.BeginDiv(new { @class = "ui inverted link list" });
{
ui.Element("a", "About", new { href = "#", @class = "item" });
ui.Element("a", "Jobs", new { href = "#", @class = "item" });
ui.Element("a", "Blog", new { href = "#", @class = "item" });
ui.Element("a", "Press", new { href = "#", @class = "item" });
ui.Element("a", "Partners", new { href = "#", @class = "item" });
}
ui.EndDiv();
}
ui.EndDiv();
ui.BeginDiv(new { @class = "three wide column" });
{
ui.Element("h4", "Community", new { @class = "ui inverted header" });
ui.BeginDiv(new { @class = "ui inverted link list" });
{
ui.Element("a", "Events", new { href = "#", @class = "item" });
ui.Element("a", "Case Studies", new { href = "#", @class = "item" });
}
ui.EndDiv();
}
ui.EndDiv();
ui.BeginDiv(new { @class = "seven wide column" });
{
ui.Element("h4", "Build Info", new { @class = "ui inverted header" });
ui.BeginDiv(new { @class = "text container" });
{
ui.Element("p", $"UI Version: {typeof(Dashboard).Assembly.GetName().Version}");
ui.Element("p",
$"Platform Version: {typeof(Constants.Schemas).Assembly.GetName().Version}");
ui.Element("p", $"App Version: {Assembly.GetEntryAssembly().GetName().Version}");
}
ui.EndDiv();
}
ui.EndDiv();
}
ui.EndDiv();
ui.Element("div", new { @class = "ui inverted section divider" });
ui.Element("img", new { src = "assets/images/logo.png", @class = "ui centered mini image" });
ui.BeginDiv(new { @class = "ui horizontal inverted small divided link list" });
{
ui.Element("a", "Privacy Policy", new { href = "https://hq.io/privacy", @class = "item" });
ui.Element("a", "Terms & Conditions", new { href = "https://hq.io/toc", @class = "item" });
ui.BeginElement("a", new { href = "https://github.com/hq-io", @class = "item" });
{
ui.Literal("Open Source ");
ui.Element("i", "", new { @class = "github icon" });
}
ui.EndElement("a");
}
ui.EndDiv();
}
ui.EndDiv();
}
ui.EndDiv();
}
public override async void Render(Ui ui)
{
var accessor = ui.Context.UiServices.GetRequiredService <IHttpContextAccessor>();
var connection = accessor.HttpContext.Features.Get <IHttpConnectionFeature>();
var local = $"{connection?.LocalIpAddress}:{connection?.LocalPort}";
ui.BeginDiv(new { @class = "ui fixed inverted menu" });
{
ui.BeginDiv(new { @class = "ui container" });
{
ui.BeginElement("a", new { href = "#", @class = "header item" });
{
ui.Element("img", "HQ",
new { @class = "logo", src = "assets/images/logo.png", style = "margin-right: 1.5em;" });
}
ui.EndElement("a");
ui.BeginA("item", id: "sidebar-btn");
ui.I(new { @class = "sidebar icon" });
ui.Literal("Menu");
ui.EndA();
ui.OnReady(@"
$('#sidebar-btn').click(function() {
$('.ui.sidebar')
.sidebar('toggle')
.sidebar({ context: $('.ui.basic.section')});
});");
ui.BeginDiv(new { @class = "ui simple dropdown item" });
{
ui.Literal("Docs ");
ui.Element("i", new { @class = "dropdown icon" });
ui.BeginDiv(new { @class = "menu" });
{
ui.Div("Specs", new { @class = "header" });
ui.BeginA("item", href: "/meta/postman").Icon(BusinessIcons.FileOutline)
.Literal("Postman 2.1").EndA();
ui.BeginA("item", href: "/meta/swagger").Icon(BusinessIcons.FileOutline)
.Literal("Swagger 2.0").EndA();
ui.Div(new { @class = "divider" });
ui.Div("Help Pages", new { @class = "header" });
ui.BeginA("item", href: "/docs/swagger").Icon(BusinessIcons.Book).Literal("Swagger UI")
.EndA();
}
ui.EndDiv();
}
ui.EndDiv();
if (ui.Context.User.Identity.IsAuthenticated)
{
ui.BeginDiv(new { @class = "right menu" });
{
ui.BeginDiv("ui dropdown item");
{
ui.Literal("Language ");
ui.Element("i", new { @class = "dropdown icon" });
ui.BeginDiv(new { @class = "menu" });
{
ui.BeginA("item", href: "#").Icon(BusinessIcons.Globe).Literal("English").EndA();
}
ui.EndDiv();
}
ui.EndDiv();
ui.BeginDiv("item");
{
var id = ui.NextId();
ui.Div("Sign Out", new { @class = "ui primary button", id = id.ToString() });
if (ui.OnClick())
{
await accessor.HttpContext.SignOutAsync();
}
}
ui.EndDiv();
}
ui.EndDiv();
}
}
ui.EndDiv();
}
ui.EndDiv();
}
public static void NavBar(this Ui ui, bool collapse)
{
ui.BeginElement("div");
ui.Attribute("class", "top-row pl-4 navbar navbar-dark");
{
ui.BeginElement("a");
ui.Attribute("class", "navbar-brand");
ui.Attribute("href", "");
{
ui._("BlazorApp1");
ui.EndElement("a");
}
ui.BeginElement("button");
ui.Attribute("class", "navbar-toggler");
{
ui.BeginElement("span");
ui.Attribute("class", "navbar-toggler-icon");
ui.EndElement("span");
ui.EndElement("button");
}
ui.EndElement("div");
}
ui.BeginElement("div");
ui.Attribute("class", collapse ? "collapse" : "");
{
ui.BeginElement("ul");
ui.Attribute("class", "nav flex-column");
{
ui.BeginElement("li");
ui.Attribute("class", "nav-item px-3");
{
ui.BeginElement("a");
ui.Attribute("class", "nav-link");
ui.Attribute("href", "");
{
ui.BeginElement("span");
ui.Attribute("class", "oi oi-home");
ui.Attribute("aria-hidden", true);
ui.EndElement("span");
ui._(" Home");
ui.EndElement("a");
}
ui.BeginElement("a");
ui.Attribute("class", "nav-link");
ui.Attribute("href", "counter");
{
ui.BeginElement("span");
ui.Attribute("class", "oi oi-plus");
ui.Attribute("aria-hidden", true);
ui.EndElement("span");
ui._(" Counter");
ui.EndElement("a");
}
ui.BeginElement("a");
ui.Attribute("class", "nav-link");
ui.Attribute("href", "fetchdata");
{
ui.BeginElement("span");
ui.Attribute("class", "oi oi-list-rich");
ui.Attribute("aria-hidden", true);
ui.EndElement("span");
ui._(" Fetch Data");
ui.EndElement("a");
}
ui.EndElement("li");
}
ui.EndElement("ul");
}
ui.EndElement("div");
}
}