crasa-transport/webtest/templates.go

90 lines
3.8 KiB
Go

package main
import (
"context"
"io"
"github.com/a-h/templ"
)
func indexPage() templ.Component {
return templ.ComponentFunc(func(_ context.Context, w io.Writer) error {
_, err := io.WriteString(w, `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Transport WebTest</title>
<link rel="stylesheet" href="/static/tailwind.css" />
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<main class="mx-auto max-w-7xl p-4 md:p-6">
<h1 class="mb-4 text-xl font-semibold tracking-tight">Transport WebTest</h1>
<div class="layout h-[80vh]">
<section class="flex min-h-0 flex-col rounded-lg border border-slate-700 bg-slate-900">
<header class="pane-tabs border-b border-slate-700 px-3 py-2">
<button id="left-tab-server" class="pane-tab active" type="button">Server</button>
<button id="left-tab-system" class="pane-tab" type="button">System</button>
</header>
<div id="left-pane-server" class="grid flex-1 min-h-0 grid-cols-1 gap-3 p-3">
<div class="flex min-h-0 flex-col rounded-lg border border-slate-700">
<div class="border-b border-slate-700 px-3 py-2 text-sm font-medium">stdout</div>
<div id="server-stdout" class="flex-1 overflow-auto p-3 text-sm"></div>
</div>
<div class="flex min-h-0 flex-col rounded-lg border border-slate-700">
<div class="border-b border-slate-700 px-3 py-2 text-sm font-medium">stderr</div>
<div id="server-stderr" class="flex-1 overflow-auto p-3 text-sm"></div>
</div>
</div>
<div id="left-pane-system" class="flex-1 min-h-0 p-3" hidden>
<div class="flex h-full min-h-0 flex-col rounded-lg border border-slate-700">
<div class="border-b border-slate-700 px-3 py-2 text-sm font-medium">orchestrator/build</div>
<div id="system-log" class="flex-1 overflow-auto p-3 text-sm"></div>
</div>
</div>
</section>
<section class="flex min-h-0 flex-col rounded-lg border border-slate-700 bg-slate-900">
<header class="clients-header border-b border-slate-700 px-3 py-2">
<span class="font-medium">clients</span>
<button id="add-client" class="btn-add" type="button">+ add client</button>
</header>
<div id="client-tabs" class="client-tabs"></div>
<div id="client-panels" class="client-panels"></div>
</section>
</div>
</main>
<template id="client-card-template">
<section class="client-card rounded-lg border border-slate-700 bg-slate-900">
<header class="client-card-header border-b border-slate-700 px-3 py-2">
<span class="client-name font-medium"></span>
<div class="client-actions">
<button class="btn-close-tab" type="button">Close Tab</button>
<button class="btn-kill" type="button">Kill</button>
</div>
</header>
<div class="grid flex-1 min-h-0 grid-cols-1 gap-3 p-3">
<div class="flex min-h-0 flex-col rounded-lg border border-slate-700">
<div class="border-b border-slate-700 px-3 py-2 text-sm font-medium">stdout</div>
<div class="client-stdout flex-1 overflow-auto p-3 text-sm"></div>
</div>
<div class="flex min-h-0 flex-col rounded-lg border border-slate-700">
<div class="border-b border-slate-700 px-3 py-2 text-sm font-medium">stderr</div>
<div class="client-stderr flex-1 overflow-auto p-3 text-sm"></div>
</div>
</div>
</section>
</template>
<template id="client-tab-template">
<div class="client-tab">
<button class="client-tab-select" type="button"></button>
</div>
</template>
<script src="/static/app.js"></script>
</body>
</html>`)
return err
})
}