You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
7.4 KiB
166 lines
7.4 KiB
4 weeks ago
|
{{define "layout"}}
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="ko">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>{{.Title}} - {{.AppName}}</title>
|
||
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
||
|
|
</head>
|
||
|
|
<body data-current-path="{{.CurrentPath}}" data-current-tab-key="{{(index .WorkspaceTabs 0).Key}}" data-current-tab-label="{{(index .WorkspaceTabs 0).Label}}">
|
||
|
|
<div class="app-shell">
|
||
|
|
<aside class="sidebar">
|
||
|
|
<div class="brand">
|
||
|
|
<div class="brand-mark">TC</div>
|
||
|
|
<div class="brand-copy">
|
||
|
|
<div class="brand-title">{{.AppName}}</div>
|
||
|
|
<div class="brand-subtitle">Device console mock</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="nav">
|
||
|
|
{{range .Menu}}
|
||
|
|
<div class="nav-group {{if .Expanded}}expanded{{end}}" data-nav-group data-path="{{.Path}}" data-default-expanded="{{if .Expanded}}true{{else}}false{{end}}">
|
||
|
|
<a class="nav-item {{if .Active}}active{{end}}" href="{{.Path}}" {{if .Children}}data-nav-toggle aria-expanded="{{if .Expanded}}true{{else}}false{{end}}"{{end}}>
|
||
|
|
<span class="nav-label">{{.Label}}</span>
|
||
|
|
{{if .Children}}<span class="nav-caret" aria-hidden="true"></span>{{end}}
|
||
|
|
</a>
|
||
|
|
{{if .Children}}
|
||
|
|
<div class="nav-children">
|
||
|
|
{{range .Children}}
|
||
|
|
<a class="nav-child {{if .Active}}active{{end}}" href="{{.Path}}">{{.Label}}</a>
|
||
|
|
{{end}}
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<main class="main">
|
||
|
|
<header class="topbar">
|
||
|
|
<div class="topbar-left">
|
||
|
|
<button class="menu-toggle" type="button" data-sidebar-toggle>Menu</button>
|
||
|
|
<div class="topbar-crumbs">
|
||
|
|
{{range $idx, $crumb := .Breadcrumbs}}
|
||
|
|
{{if gt $idx 0}}<span class="crumb-sep">/</span>{{end}}
|
||
|
|
<span class="crumb">{{$crumb}}</span>
|
||
|
|
{{end}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="topbar-right">
|
||
|
|
<a class="legacy-link" href="/legacy">이전 화면</a>
|
||
|
|
<div class="user-pill">{{.CurrentUser}}</div>
|
||
|
|
<form class="logout-form" action="/logout" method="post">
|
||
|
|
<button class="logout-button" type="submit">로그아웃</button>
|
||
|
|
</form>
|
||
|
|
<button class="theme-pill" type="button" data-mock-action="open-options">Quick Action</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="workspace-tabs">
|
||
|
|
{{range .WorkspaceTabs}}
|
||
|
|
<div class="workspace-tab {{if .Active}}active{{end}}" data-tab-key="{{.Key}}" data-tab-path="{{.Path}}">
|
||
|
|
<a class="workspace-tab-link" href="{{.Path}}">{{.Label}}</a>
|
||
|
|
<button class="workspace-close" type="button" aria-label="{{.Label}} 닫기">x</button>
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<section class="content">
|
||
|
|
<div class="page-header">
|
||
|
|
<div class="page-kicker">{{.Section}}</div>
|
||
|
|
<h1>{{.Title}}</h1>
|
||
|
|
{{if .MockMode}}
|
||
|
|
<div class="mock-badge">MOCK MODE</div>
|
||
|
|
{{end}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{if .SubTabs}}
|
||
|
|
<div class="subtabs">
|
||
|
|
{{range .SubTabs}}
|
||
|
|
<a class="subtab {{if .Active}}active{{end}}" href="{{.Path}}">{{.Label}}</a>
|
||
|
|
{{end}}
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
|
||
|
|
<div class="blocks">
|
||
|
|
{{range .Blocks}}
|
||
|
|
{{if eq .Kind "port-links"}}
|
||
|
|
{{template "block_port-links" .}}
|
||
|
|
{{else if eq .Kind "port-selector"}}
|
||
|
|
{{template "block_port-selector" .}}
|
||
|
|
{{else if eq .Kind "key-values"}}
|
||
|
|
{{template "block_key-values" .}}
|
||
|
|
{{else if eq .Kind "form"}}
|
||
|
|
{{template "block_form" .}}
|
||
|
|
{{else if eq .Kind "table"}}
|
||
|
|
{{template "block_table" .}}
|
||
|
|
{{else if eq .Kind "action"}}
|
||
|
|
{{template "block_action" .}}
|
||
|
|
{{else if eq .Kind "tool"}}
|
||
|
|
{{template "block_tool" .}}
|
||
|
|
{{else if eq .Kind "modal"}}
|
||
|
|
{{template "block_modal" .}}
|
||
|
|
{{end}}
|
||
|
|
{{end}}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="toastRoot" class="toast-root"></div>
|
||
|
|
<section class="modal-layer" data-modal-root="group-create" hidden>
|
||
|
|
<div class="modal-backdrop" data-modal-close></div>
|
||
|
|
<div class="modal-box group-modal" role="dialog" aria-modal="true" aria-label="그룹 추가">
|
||
|
|
<div class="panel-header modal-header">
|
||
|
|
<h2>그룹 추가</h2>
|
||
|
|
<button type="button" class="modal-close" aria-label="닫기" data-modal-close>x</button>
|
||
|
|
</div>
|
||
|
|
<p class="modal-message">그룹 이름과 권한을 지정해 사용자 계정에 연결할 그룹을 관리합니다.</p>
|
||
|
|
<form class="modal-form" data-group-form>
|
||
|
|
<input type="hidden" name="id" value="">
|
||
|
|
<div class="form-grid compact-grid">
|
||
|
|
<div class="form-row">
|
||
|
|
<label>그룹 이름</label>
|
||
|
|
<input type="text" name="name" value="" placeholder="예: operator">
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label>설명</label>
|
||
|
|
<input type="text" name="description" value="" placeholder="그룹 설명을 입력하세요">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="group-permission-grid">
|
||
|
|
<div class="group-permission-cell heading">로그인</div>
|
||
|
|
<div class="group-permission-cell heading">네트워크 설정</div>
|
||
|
|
<div class="group-permission-cell heading">포트 설정</div>
|
||
|
|
<div class="group-permission-cell heading">포트 디버그</div>
|
||
|
|
<div class="group-permission-cell heading">Admin 설정</div>
|
||
|
|
<div class="group-permission-cell heading">공통 설정</div>
|
||
|
|
<div class="group-permission-cell heading">상태</div>
|
||
|
|
<div class="group-permission-cell heading">비밀번호 변경</div>
|
||
|
|
<div class="group-permission-cell heading">Operate</div>
|
||
|
|
</div>
|
||
|
|
<div class="group-permission-checks">
|
||
|
|
<label class="permission-chip"><input type="checkbox" name="permissions" value="login"> <span>사용</span></label>
|
||
|
|
<label class="permission-chip"><input type="checkbox" name="permissions" value="network"> <span>사용</span></label>
|
||
|
|
<label class="permission-chip"><input type="checkbox" name="permissions" value="ports"> <span>사용</span></label>
|
||
|
|
<label class="permission-chip"><input type="checkbox" name="permissions" value="tools"> <span>사용</span></label>
|
||
|
|
<label class="permission-chip"><input type="checkbox" name="permissions" value="admin"> <span>사용</span></label>
|
||
|
|
<label class="permission-chip"><input type="checkbox" name="permissions" value="common"> <span>사용</span></label>
|
||
|
|
<label class="permission-chip"><input type="checkbox" name="permissions" value="status"> <span>사용</span></label>
|
||
|
|
<label class="permission-chip"><input type="checkbox" name="permissions" value="password"> <span>사용</span></label>
|
||
|
|
<label class="permission-chip"><input type="checkbox" name="permissions" value="operate"> <span>사용</span></label>
|
||
|
|
</div>
|
||
|
|
<div class="panel-actions">
|
||
|
|
<button type="submit" class="btn primary" data-group-submit>확인</button>
|
||
|
|
<button type="button" class="btn secondary" data-modal-close>취소</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<script src="/static/js/app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
{{end}}
|