3522 lines
181 KiB
HTML
3522 lines
181 KiB
HTML
|
|
<!doctype html>
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
|
<meta name="description" content="OpenWrt LuCI Security & Management Suite">
|
|
|
|
|
|
<meta name="author" content="CyberMind.fr">
|
|
|
|
|
|
<link rel="canonical" href="https://gkerma.github.io/secubox-openwrt/module-implementation-guide/">
|
|
|
|
|
|
<link rel="prev" href="../code-templates/">
|
|
|
|
|
|
<link rel="next" href="../claude/">
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="icon" href="../assets/images/favicon.png">
|
|
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.1">
|
|
|
|
|
|
|
|
<title>Module Implementation - SecuBox Documentation</title>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../assets/stylesheets/main.484c7ddc.min.css">
|
|
|
|
|
|
<link rel="stylesheet" href="../assets/stylesheets/palette.ab4e12ef.min.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,700,700i%7CJetBrains+Mono:400,400i,700,700i&display=fallback">
|
|
<style>:root{--md-text-font:"Inter";--md-code-font:"JetBrains Mono"}</style>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../stylesheets/extra.css">
|
|
|
|
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="purple">
|
|
|
|
|
|
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
|
|
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
|
|
<label class="md-overlay" for="__drawer"></label>
|
|
<div data-md-component="skip">
|
|
|
|
|
|
<a href="#secubox-module-implementation-guide" class="md-skip">
|
|
Skip to content
|
|
</a>
|
|
|
|
</div>
|
|
<div data-md-component="announce">
|
|
|
|
</div>
|
|
|
|
<div data-md-color-scheme="default" data-md-component="outdated" hidden>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
|
|
<nav class="md-header__inner md-grid" aria-label="Header">
|
|
<a href=".." title="SecuBox Documentation" class="md-header__button md-logo" aria-label="SecuBox Documentation" data-md-component="logo">
|
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
|
|
|
|
</a>
|
|
<label class="md-header__button md-icon" for="__drawer">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
|
|
</label>
|
|
<div class="md-header__title" data-md-component="header-title">
|
|
<div class="md-header__ellipsis">
|
|
<div class="md-header__topic">
|
|
<span class="md-ellipsis">
|
|
SecuBox Documentation
|
|
</span>
|
|
</div>
|
|
<div class="md-header__topic" data-md-component="header-topic">
|
|
<span class="md-ellipsis">
|
|
|
|
Module Implementation
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<form class="md-header__option" data-md-component="palette">
|
|
|
|
|
|
|
|
|
|
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="purple" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
|
|
|
|
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
|
|
</label>
|
|
|
|
|
|
|
|
|
|
|
|
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="purple" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
|
|
|
|
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
|
|
</label>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-header__button md-icon" for="__search">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
|
|
</label>
|
|
<div class="md-search" data-md-component="search" role="dialog">
|
|
<label class="md-search__overlay" for="__search"></label>
|
|
<div class="md-search__inner" role="search">
|
|
<form class="md-search__form" name="search">
|
|
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
|
|
<label class="md-search__icon md-icon" for="__search">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
|
|
</label>
|
|
<nav class="md-search__options" aria-label="Search">
|
|
|
|
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
|
|
</button>
|
|
</nav>
|
|
|
|
<div class="md-search__suggest" data-md-component="search-suggest"></div>
|
|
|
|
</form>
|
|
<div class="md-search__output">
|
|
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
|
|
<div class="md-search-result" data-md-component="search-result">
|
|
<div class="md-search-result__meta">
|
|
Initializing search
|
|
</div>
|
|
<ol class="md-search-result__list" role="presentation"></ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="md-header__source">
|
|
<a href="https://github.com/gkerma/secubox-openwrt" title="Go to repository" class="md-source" data-md-component="source">
|
|
<div class="md-source__icon md-icon">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
|
|
</div>
|
|
<div class="md-source__repository">
|
|
gkerma/secubox-openwrt
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
|
|
<div class="md-grid">
|
|
<ul class="md-tabs__list">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-tabs__item">
|
|
<a href=".." class="md-tabs__link">
|
|
|
|
|
|
|
|
|
|
|
|
Home
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-tabs__item">
|
|
<a href="../quick-start/" class="md-tabs__link">
|
|
|
|
|
|
|
|
Getting Started
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-tabs__item md-tabs__item--active">
|
|
<a href="../development-guidelines/" class="md-tabs__link">
|
|
|
|
|
|
|
|
Development
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-tabs__item">
|
|
<a href="../claude/" class="md-tabs__link">
|
|
|
|
|
|
|
|
Reference
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-tabs__item">
|
|
<a href="../module-status/" class="md-tabs__link">
|
|
|
|
|
|
|
|
Modules
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-tabs__item">
|
|
<a href="../todo-analyse/" class="md-tabs__link">
|
|
|
|
|
|
|
|
Tools & Roadmap
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-tabs__item">
|
|
<a href="../archive/" class="md-tabs__link">
|
|
|
|
|
|
|
|
Archive
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
</header>
|
|
|
|
<div class="md-container" data-md-component="container">
|
|
|
|
|
|
|
|
|
|
<main class="md-main" data-md-component="main">
|
|
<div class="md-main__inner md-grid">
|
|
|
|
|
|
|
|
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
|
|
<div class="md-sidebar__scrollwrap">
|
|
<div class="md-sidebar__inner">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
|
|
<label class="md-nav__title" for="__drawer">
|
|
<a href=".." title="SecuBox Documentation" class="md-nav__button md-logo" aria-label="SecuBox Documentation" data-md-component="logo">
|
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
|
|
|
|
</a>
|
|
SecuBox Documentation
|
|
</label>
|
|
|
|
<div class="md-nav__source">
|
|
<a href="https://github.com/gkerma/secubox-openwrt" title="Go to repository" class="md-source" data-md-component="source">
|
|
<div class="md-source__icon md-icon">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
|
|
</div>
|
|
<div class="md-source__repository">
|
|
gkerma/secubox-openwrt
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href=".." class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Home
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Getting Started
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_2">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
|
|
|
|
Getting Started
|
|
|
|
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../quick-start/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Quick Start
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../documentation-index/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Documentation Index
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../repository-guidelines/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Repository Guidelines
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Development
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
|
|
<label class="md-nav__title" for="__nav_3">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
|
|
|
|
Development
|
|
|
|
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../development-guidelines/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Development Guidelines
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../code-templates/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Code Templates
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active">
|
|
|
|
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link md-nav__link--active" for="__toc">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Module Implementation
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<a href="./" class="md-nav__link md-nav__link--active">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Module Implementation
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__title" for="__toc">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Table of contents
|
|
</label>
|
|
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#see-also" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
See Also
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#quick-navigation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Quick Navigation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#document-overview" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Document Overview
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Document Overview">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#whats-included" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
What's Included
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#implementation-workflow" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Implementation Workflow
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Implementation Workflow">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-1-choose-your-approach" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Step 1: Choose Your Approach
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-by-step-regenerate-a-module-with-claudeai" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Step-by-Step: Regenerate a Module with Claude.ai
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Step-by-Step: Regenerate a Module with Claude.ai">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#example-regenerating-system-hub-module" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Example: Regenerating System Hub Module
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Example: Regenerating System Hub Module">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#1-gather-context" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
1. Gather Context
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#2-prepare-the-prompt" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
2. Prepare the Prompt
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#3-generate-code" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
3. Generate Code
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#4-review-generated-code" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
4. Review Generated Code
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#5-integrate-into-codebase" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
5. Integrate into Codebase
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#6-validate-implementation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
6. Validate Implementation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#7-build-locally" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
7. Build Locally
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#8-deploy-to-test-router" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
8. Deploy to Test Router
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#9-test-in-browser" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
9. Test in Browser
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#10-iterate-and-refine" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
10. Iterate and Refine
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#common-implementation-patterns" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Common Implementation Patterns
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Common Implementation Patterns">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#pattern-1-multi-tab-dashboard" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Pattern 1: Multi-Tab Dashboard
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#pattern-2-filter-tabs-with-data-filtering" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Pattern 2: Filter Tabs with Data Filtering
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#pattern-3-real-time-log-viewer" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Pattern 3: Real-Time Log Viewer
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#pattern-4-action-buttons-with-confirmation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Pattern 4: Action Buttons with Confirmation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#pattern-5-form-with-validation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Pattern 5: Form with Validation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#module-specific-notes" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Module-Specific Notes
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Module-Specific Notes">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#system-hub-luci-app-system-hub" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
System Hub (luci-app-system-hub)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#wireguard-dashboard-luci-app-wireguard-dashboard" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
WireGuard Dashboard (luci-app-wireguard-dashboard)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#crowdsec-dashboard-luci-app-crowdsec-dashboard" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
CrowdSec Dashboard (luci-app-crowdsec-dashboard)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#netdata-dashboard-luci-app-netdata-dashboard" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Netdata Dashboard (luci-app-netdata-dashboard)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#network-modes-luci-app-network-modes" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Network Modes (luci-app-network-modes)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Network Modes (luci-app-network-modes)">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#available-modes-v036" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Available Modes (v0.3.6)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#troubleshooting-guide" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Troubleshooting Guide
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Troubleshooting Guide">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#issue-object-not-found-error" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Issue: "Object not found" Error
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#issue-view-not-loading-404" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Issue: View Not Loading (404)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#issue-css-not-applied" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Issue: CSS Not Applied
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#issue-data-not-updating" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Issue: Data Not Updating
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#best-practices" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Best Practices
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Best Practices">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#1-code-organization" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
1. Code Organization
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#2-error-handling" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
2. Error Handling
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#3-performance" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
3. Performance
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#4-user-experience" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
4. User Experience
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#deployment-checklist" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Deployment Checklist
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#additional-resources" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Additional Resources
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Additional Resources">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#documentation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Documentation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#live-demo" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Live Demo
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#internal-documentation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Internal Documentation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#tools" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Tools
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#getting-help" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Getting Help
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_4" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Reference
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_4">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
|
|
|
|
Reference
|
|
|
|
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../claude/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
RPCD & Architecture
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../validation-guide/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Validation Guide
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../permissions-guide/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Permissions Guide
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../luci-development-reference/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
LuCI Development
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../codex/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Codex Manual
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Modules
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_5">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
|
|
|
|
Modules
|
|
|
|
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../module-status/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Module Status
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../feature-regeneration-prompts/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Feature Prompts
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_6" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Tools & Roadmap
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_6">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
|
|
|
|
Tools & Roadmap
|
|
|
|
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../todo-analyse/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
TODO Roadmap
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_7" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Archive
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_7">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
|
|
|
|
Archive
|
|
|
|
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../archive/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Archive Index
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../archive/build-issues/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Build Issues
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../archive/completion-report/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Completion Report
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../archive/module-enable-disable-design/" class="md-nav__link">
|
|
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
|
|
|
|
Module Enable/Disable
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
|
|
<div class="md-sidebar__scrollwrap">
|
|
<div class="md-sidebar__inner">
|
|
|
|
|
|
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__title" for="__toc">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Table of contents
|
|
</label>
|
|
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#see-also" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
See Also
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#quick-navigation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Quick Navigation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#document-overview" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Document Overview
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Document Overview">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#whats-included" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
What's Included
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#implementation-workflow" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Implementation Workflow
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Implementation Workflow">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-1-choose-your-approach" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Step 1: Choose Your Approach
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-by-step-regenerate-a-module-with-claudeai" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Step-by-Step: Regenerate a Module with Claude.ai
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Step-by-Step: Regenerate a Module with Claude.ai">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#example-regenerating-system-hub-module" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Example: Regenerating System Hub Module
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Example: Regenerating System Hub Module">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#1-gather-context" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
1. Gather Context
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#2-prepare-the-prompt" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
2. Prepare the Prompt
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#3-generate-code" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
3. Generate Code
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#4-review-generated-code" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
4. Review Generated Code
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#5-integrate-into-codebase" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
5. Integrate into Codebase
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#6-validate-implementation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
6. Validate Implementation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#7-build-locally" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
7. Build Locally
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#8-deploy-to-test-router" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
8. Deploy to Test Router
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#9-test-in-browser" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
9. Test in Browser
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#10-iterate-and-refine" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
10. Iterate and Refine
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#common-implementation-patterns" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Common Implementation Patterns
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Common Implementation Patterns">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#pattern-1-multi-tab-dashboard" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Pattern 1: Multi-Tab Dashboard
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#pattern-2-filter-tabs-with-data-filtering" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Pattern 2: Filter Tabs with Data Filtering
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#pattern-3-real-time-log-viewer" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Pattern 3: Real-Time Log Viewer
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#pattern-4-action-buttons-with-confirmation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Pattern 4: Action Buttons with Confirmation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#pattern-5-form-with-validation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Pattern 5: Form with Validation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#module-specific-notes" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Module-Specific Notes
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Module-Specific Notes">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#system-hub-luci-app-system-hub" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
System Hub (luci-app-system-hub)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#wireguard-dashboard-luci-app-wireguard-dashboard" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
WireGuard Dashboard (luci-app-wireguard-dashboard)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#crowdsec-dashboard-luci-app-crowdsec-dashboard" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
CrowdSec Dashboard (luci-app-crowdsec-dashboard)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#netdata-dashboard-luci-app-netdata-dashboard" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Netdata Dashboard (luci-app-netdata-dashboard)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#network-modes-luci-app-network-modes" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Network Modes (luci-app-network-modes)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Network Modes (luci-app-network-modes)">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#available-modes-v036" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Available Modes (v0.3.6)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#troubleshooting-guide" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Troubleshooting Guide
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Troubleshooting Guide">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#issue-object-not-found-error" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Issue: "Object not found" Error
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#issue-view-not-loading-404" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Issue: View Not Loading (404)
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#issue-css-not-applied" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Issue: CSS Not Applied
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#issue-data-not-updating" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Issue: Data Not Updating
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#best-practices" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Best Practices
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Best Practices">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#1-code-organization" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
1. Code Organization
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#2-error-handling" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
2. Error Handling
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#3-performance" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
3. Performance
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#4-user-experience" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
4. User Experience
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#deployment-checklist" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Deployment Checklist
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#additional-resources" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Additional Resources
|
|
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Additional Resources">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#documentation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Documentation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#live-demo" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Live Demo
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#internal-documentation" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Internal Documentation
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#tools" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Tools
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#getting-help" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
|
|
Getting Help
|
|
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="md-content" data-md-component="content">
|
|
|
|
<article class="md-content__inner md-typeset">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h1 id="secubox-module-implementation-guide">SecuBox Module Implementation Guide<a class="headerlink" href="#secubox-module-implementation-guide" title="Permanent link">¶</a></h1>
|
|
<p><strong>Version:</strong> 1.0.0<br />
|
|
<strong>Last Updated:</strong> 2025-12-28<br />
|
|
<strong>Status:</strong> Active<br />
|
|
<strong>Purpose:</strong> Complete guide for regenerating SecuBox modules matching the live demo</p>
|
|
<hr />
|
|
<h2 id="see-also">See Also<a class="headerlink" href="#see-also" title="Permanent link">¶</a></h2>
|
|
<ul>
|
|
<li><strong>Automation Briefing:</strong> <a href="../codex/">CODEX.md</a></li>
|
|
<li><strong>Module Prompts:</strong> <a href="../feature-regeneration-prompts/">FEATURE-REGENERATION-PROMPTS.md</a></li>
|
|
<li><strong>Code Templates:</strong> <a href="../code-templates/">CODE-TEMPLATES.md</a></li>
|
|
<li><strong>Quick Commands:</strong> <a href="../quick-start/">QUICK-START.md</a></li>
|
|
</ul>
|
|
<hr />
|
|
<h2 id="quick-navigation">Quick Navigation<a class="headerlink" href="#quick-navigation" title="Permanent link">¶</a></h2>
|
|
<p>📋 <strong><a href="../feature-regeneration-prompts/">FEATURE-REGENERATION-PROMPTS.md</a></strong> - Complete feature specifications for all 15 modules
|
|
💻 <strong><a href="../code-templates/">CODE-TEMPLATES.md</a></strong> - Ready-to-use code templates and implementation examples
|
|
🏗️ <strong><a href="../development-guidelines/">DEVELOPMENT-GUIDELINES.md</a></strong> - Complete development guidelines and design system
|
|
⚡ <strong><a href="../quick-start/">QUICK-START.md</a></strong> - Quick reference for common tasks
|
|
🔧 <strong><a href="../claude/">CLAUDE.md</a></strong> - Build system and architecture reference</p>
|
|
<hr />
|
|
<h2 id="document-overview">Document Overview<a class="headerlink" href="#document-overview" title="Permanent link">¶</a></h2>
|
|
<p>This guide shows you how to use the comprehensive documentation to regenerate or create SecuBox modules that match the live demo at <strong>secubox.cybermood.eu</strong>.</p>
|
|
<h3 id="whats-included">What's Included<a class="headerlink" href="#whats-included" title="Permanent link">¶</a></h3>
|
|
<ol>
|
|
<li><strong>Feature Specifications</strong> - Detailed requirements for all 15 modules</li>
|
|
<li><strong>Code Templates</strong> - Working implementation examples</li>
|
|
<li><strong>Design System</strong> - CSS variables, typography, components</li>
|
|
<li><strong>Validation Tools</strong> - Automated testing and fixing</li>
|
|
<li><strong>Deployment Scripts</strong> - Local build and remote deployment</li>
|
|
</ol>
|
|
<hr />
|
|
<h2 id="implementation-workflow">Implementation Workflow<a class="headerlink" href="#implementation-workflow" title="Permanent link">¶</a></h2>
|
|
<h3 id="step-1-choose-your-approach">Step 1: Choose Your Approach<a class="headerlink" href="#step-1-choose-your-approach" title="Permanent link">¶</a></h3>
|
|
<p><strong>Option A: Use Claude.ai for Code Generation</strong>
|
|
1. Open <a href="https://claude.ai">claude.ai</a>
|
|
2. Copy the relevant module prompt from <a href="../feature-regeneration-prompts/">FEATURE-REGENERATION-PROMPTS.md</a>
|
|
3. Paste the prompt and request implementation
|
|
4. Claude will generate all required files based on the templates
|
|
5. Review and integrate the generated code</p>
|
|
<p><strong>Option B: Manual Implementation Using Templates</strong>
|
|
1. Copy templates from <a href="../code-templates/">CODE-TEMPLATES.md</a>
|
|
2. Replace placeholders with module-specific values
|
|
3. Implement module-specific logic
|
|
4. Validate and test</p>
|
|
<p><strong>Option C: Hybrid Approach (Recommended)</strong>
|
|
1. Use Claude.ai for initial code generation
|
|
2. Refine using templates and guidelines
|
|
3. Validate with automated tools
|
|
4. Deploy and test on target device</p>
|
|
<hr />
|
|
<h2 id="step-by-step-regenerate-a-module-with-claudeai">Step-by-Step: Regenerate a Module with Claude.ai<a class="headerlink" href="#step-by-step-regenerate-a-module-with-claudeai" title="Permanent link">¶</a></h2>
|
|
<h3 id="example-regenerating-system-hub-module">Example: Regenerating System Hub Module<a class="headerlink" href="#example-regenerating-system-hub-module" title="Permanent link">¶</a></h3>
|
|
<h4 id="1-gather-context">1. Gather Context<a class="headerlink" href="#1-gather-context" title="Permanent link">¶</a></h4>
|
|
<p>Before prompting Claude, gather these resources:</p>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="c1"># Read the module specification</span>
|
|
<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a>cat<span class="w"> </span>FEATURE-REGENERATION-PROMPTS.md<span class="w"> </span><span class="p">|</span><span class="w"> </span>grep<span class="w"> </span>-A<span class="w"> </span><span class="m">200</span><span class="w"> </span><span class="s2">"System Hub"</span>
|
|
<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a>
|
|
<a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="c1"># Review the design system</span>
|
|
<a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a>cat<span class="w"> </span>DEVELOPMENT-GUIDELINES.md<span class="w"> </span><span class="p">|</span><span class="w"> </span>grep<span class="w"> </span>-A<span class="w"> </span><span class="m">100</span><span class="w"> </span><span class="s2">"Design System"</span>
|
|
<a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a>
|
|
<a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a><span class="c1"># Check existing implementation (if available)</span>
|
|
<a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a>ls<span class="w"> </span>-la<span class="w"> </span>luci-app-system-hub/
|
|
</code></pre></div>
|
|
<h4 id="2-prepare-the-prompt">2. Prepare the Prompt<a class="headerlink" href="#2-prepare-the-prompt" title="Permanent link">¶</a></h4>
|
|
<p>Create a comprehensive prompt for Claude.ai:</p>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a>I need you to implement the System Hub module for OpenWrt LuCI framework.
|
|
<a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a>
|
|
<a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a>IMPORTANT CONSTRAINTS:
|
|
<a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a>- OpenWrt uses LuCI framework (not React/Vue)
|
|
<a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a>- JavaScript uses L.view.extend() pattern (not ES6 modules)
|
|
<a id="__codelineno-1-6" name="__codelineno-1-6" href="#__codelineno-1-6"></a>- Backend is RPCD (shell scripts) communicating via ubus
|
|
<a id="__codelineno-1-7" name="__codelineno-1-7" href="#__codelineno-1-7"></a>- CSS must use variables from system-hub/common.css
|
|
<a id="__codelineno-1-8" name="__codelineno-1-8" href="#__codelineno-1-8"></a>- All code must be production-ready and match live demo
|
|
<a id="__codelineno-1-9" name="__codelineno-1-9" href="#__codelineno-1-9"></a>- Follow the design system exactly
|
|
<a id="__codelineno-1-10" name="__codelineno-1-10" href="#__codelineno-1-10"></a>
|
|
<a id="__codelineno-1-11" name="__codelineno-1-11" href="#__codelineno-1-11"></a>TECHNICAL REQUIREMENTS:
|
|
<a id="__codelineno-1-12" name="__codelineno-1-12" href="#__codelineno-1-12"></a>- RPCD script MUST be named: luci.system-hub
|
|
<a id="__codelineno-1-13" name="__codelineno-1-13" href="#__codelineno-1-13"></a>- Menu paths MUST match view file locations
|
|
<a id="__codelineno-1-14" name="__codelineno-1-14" href="#__codelineno-1-14"></a>- Use CSS variables (--sh-*) for all colors
|
|
<a id="__codelineno-1-15" name="__codelineno-1-15" href="#__codelineno-1-15"></a>- Support dark mode with [data-theme="dark"]
|
|
<a id="__codelineno-1-16" name="__codelineno-1-16" href="#__codelineno-1-16"></a>- Implement proper error handling
|
|
<a id="__codelineno-1-17" name="__codelineno-1-17" href="#__codelineno-1-17"></a>- Add loading states for async operations
|
|
<a id="__codelineno-1-18" name="__codelineno-1-18" href="#__codelineno-1-18"></a>
|
|
<a id="__codelineno-1-19" name="__codelineno-1-19" href="#__codelineno-1-19"></a>REFERENCE DOCUMENTS:
|
|
<a id="__codelineno-1-20" name="__codelineno-1-20" href="#__codelineno-1-20"></a>1. Live Demo: https://secubox.cybermood.eu/system-hub
|
|
<a id="__codelineno-1-21" name="__codelineno-1-21" href="#__codelineno-1-21"></a>2. Feature Specification: [paste from FEATURE-REGENERATION-PROMPTS.md]
|
|
<a id="__codelineno-1-22" name="__codelineno-1-22" href="#__codelineno-1-22"></a>3. Code Templates: [paste relevant templates from CODE-TEMPLATES.md]
|
|
<a id="__codelineno-1-23" name="__codelineno-1-23" href="#__codelineno-1-23"></a>
|
|
<a id="__codelineno-1-24" name="__codelineno-1-24" href="#__codelineno-1-24"></a>Please provide:
|
|
<a id="__codelineno-1-25" name="__codelineno-1-25" href="#__codelineno-1-25"></a>1. Complete JavaScript view files (overview.js, services.js, etc.)
|
|
<a id="__codelineno-1-26" name="__codelineno-1-26" href="#__codelineno-1-26"></a>2. RPCD backend script (luci.system-hub)
|
|
<a id="__codelineno-1-27" name="__codelineno-1-27" href="#__codelineno-1-27"></a>3. API module (system-hub/api.js)
|
|
<a id="__codelineno-1-28" name="__codelineno-1-28" href="#__codelineno-1-28"></a>4. CSS styles (system-hub/dashboard.css)
|
|
<a id="__codelineno-1-29" name="__codelineno-1-29" href="#__codelineno-1-29"></a>5. Menu configuration JSON
|
|
<a id="__codelineno-1-30" name="__codelineno-1-30" href="#__codelineno-1-30"></a>6. ACL configuration JSON
|
|
<a id="__codelineno-1-31" name="__codelineno-1-31" href="#__codelineno-1-31"></a>
|
|
<a id="__codelineno-1-32" name="__codelineno-1-32" href="#__codelineno-1-32"></a>Make sure all code matches the live demo visual design and functionality.
|
|
</code></pre></div>
|
|
<h4 id="3-generate-code">3. Generate Code<a class="headerlink" href="#3-generate-code" title="Permanent link">¶</a></h4>
|
|
<p>Paste your prompt into Claude.ai and let it generate the implementation.</p>
|
|
<h4 id="4-review-generated-code">4. Review Generated Code<a class="headerlink" href="#4-review-generated-code" title="Permanent link">¶</a></h4>
|
|
<p>Check the generated code against these requirements:</p>
|
|
<p><strong>API Module Checklist:</strong>
|
|
- [ ] Uses <code>'use strict';</code>
|
|
- [ ] Requires <code>baseclass</code> and <code>rpc</code>
|
|
- [ ] All RPC methods use <code>rpc.declare()</code>
|
|
- [ ] Object names match RPCD script name (<code>luci.system-hub</code>)
|
|
- [ ] Helper functions included if needed
|
|
- [ ] Exports from <code>baseclass.extend()</code></p>
|
|
<p><strong>View Module Checklist:</strong>
|
|
- [ ] Extends <code>view.extend()</code>
|
|
- [ ] Implements <code>load()</code> method returning Promise
|
|
- [ ] Implements <code>render(data)</code> method
|
|
- [ ] Uses <code>E()</code> helper for DOM building
|
|
- [ ] Implements <code>poll.add()</code> for auto-refresh
|
|
- [ ] Proper error handling with try/catch
|
|
- [ ] Uses <code>ui.showModal()</code> for loading states
|
|
- [ ] Uses <code>ui.addNotification()</code> for user feedback</p>
|
|
<p><strong>RPCD Backend Checklist:</strong>
|
|
- [ ] Starts with <code>#!/bin/sh</code>
|
|
- [ ] Sources <code>/lib/functions.sh</code> and <code>/usr/share/libubox/jshn.sh</code>
|
|
- [ ] Implements <code>list</code> case with method declarations
|
|
- [ ] Implements <code>call</code> case with method routing
|
|
- [ ] All methods output valid JSON using <code>json_*</code> functions
|
|
- [ ] Proper parameter validation
|
|
- [ ] Error handling with appropriate messages</p>
|
|
<p><strong>Menu JSON Checklist:</strong>
|
|
- [ ] Paths follow <code>admin/secubox/<category>/<module></code>
|
|
- [ ] First entry uses <code>"type": "firstchild"</code>
|
|
- [ ] View entries use <code>"type": "view"</code> with correct <code>"path"</code>
|
|
- [ ] Paths match view file locations
|
|
- [ ] Proper <code>"order"</code> values for menu positioning
|
|
- [ ] Depends on correct ACL entry</p>
|
|
<p><strong>ACL JSON Checklist:</strong>
|
|
- [ ] Entry name matches package name
|
|
- [ ] All read methods listed under <code>"read"."ubus"</code>
|
|
- [ ] All write methods listed under <code>"write"."ubus"</code>
|
|
- [ ] ubus object names match RPCD script name
|
|
- [ ] UCI config access granted if needed</p>
|
|
<p><strong>CSS Checklist:</strong>
|
|
- [ ] Imports <code>system-hub/common.css</code>
|
|
- [ ] Uses CSS variables (<code>var(--sh-*)</code>)
|
|
- [ ] Supports dark mode with <code>[data-theme="dark"]</code>
|
|
- [ ] Responsive grid layouts
|
|
- [ ] Smooth transitions and animations
|
|
- [ ] JetBrains Mono for numeric values</p>
|
|
<h4 id="5-integrate-into-codebase">5. Integrate into Codebase<a class="headerlink" href="#5-integrate-into-codebase" title="Permanent link">¶</a></h4>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="c1"># Create module directory structure</span>
|
|
<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a>mkdir<span class="w"> </span>-p<span class="w"> </span>luci-app-system-hub/htdocs/luci-static/resources/system-hub
|
|
<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a>mkdir<span class="w"> </span>-p<span class="w"> </span>luci-app-system-hub/htdocs/luci-static/resources/view/system-hub
|
|
<a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a>mkdir<span class="w"> </span>-p<span class="w"> </span>luci-app-system-hub/root/usr/libexec/rpcd
|
|
<a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a>mkdir<span class="w"> </span>-p<span class="w"> </span>luci-app-system-hub/root/usr/share/luci/menu.d
|
|
<a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a>mkdir<span class="w"> </span>-p<span class="w"> </span>luci-app-system-hub/root/usr/share/rpcd/acl.d
|
|
<a id="__codelineno-2-7" name="__codelineno-2-7" href="#__codelineno-2-7"></a>
|
|
<a id="__codelineno-2-8" name="__codelineno-2-8" href="#__codelineno-2-8"></a><span class="c1"># Copy generated files to appropriate locations</span>
|
|
<a id="__codelineno-2-9" name="__codelineno-2-9" href="#__codelineno-2-9"></a><span class="c1"># (Copy from Claude's output to respective files)</span>
|
|
<a id="__codelineno-2-10" name="__codelineno-2-10" href="#__codelineno-2-10"></a>
|
|
<a id="__codelineno-2-11" name="__codelineno-2-11" href="#__codelineno-2-11"></a><span class="c1"># Set RPCD script as executable</span>
|
|
<a id="__codelineno-2-12" name="__codelineno-2-12" href="#__codelineno-2-12"></a>chmod<span class="w"> </span>+x<span class="w"> </span>luci-app-system-hub/root/usr/libexec/rpcd/luci.system-hub
|
|
</code></pre></div>
|
|
<h4 id="6-validate-implementation">6. Validate Implementation<a class="headerlink" href="#6-validate-implementation" title="Permanent link">¶</a></h4>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="c1"># Fix permissions first (CRITICAL)</span>
|
|
<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a>./secubox-tools/fix-permissions.sh<span class="w"> </span>--local
|
|
<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a>
|
|
<a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a><span class="c1"># Run comprehensive validation (7 checks)</span>
|
|
<a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a>./secubox-tools/validate-modules.sh
|
|
<a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a>
|
|
<a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a><span class="c1"># Expected output:</span>
|
|
<a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a><span class="c1"># ✅ All checks passed</span>
|
|
<a id="__codelineno-3-9" name="__codelineno-3-9" href="#__codelineno-3-9"></a><span class="c1"># OR</span>
|
|
<a id="__codelineno-3-10" name="__codelineno-3-10" href="#__codelineno-3-10"></a><span class="c1"># ❌ Errors found with specific fix instructions</span>
|
|
</code></pre></div>
|
|
<h4 id="7-build-locally">7. Build Locally<a class="headerlink" href="#7-build-locally" title="Permanent link">¶</a></h4>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="c1"># Build single module</span>
|
|
<a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a>./secubox-tools/local-build.sh<span class="w"> </span>build<span class="w"> </span>luci-app-system-hub
|
|
<a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a>
|
|
<a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a><span class="c1"># Or build all modules</span>
|
|
<a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a>./secubox-tools/local-build.sh<span class="w"> </span>build
|
|
<a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a>
|
|
<a id="__codelineno-4-7" name="__codelineno-4-7" href="#__codelineno-4-7"></a><span class="c1"># Or full validation + build</span>
|
|
<a id="__codelineno-4-8" name="__codelineno-4-8" href="#__codelineno-4-8"></a>./secubox-tools/local-build.sh<span class="w"> </span>full
|
|
</code></pre></div>
|
|
<h4 id="8-deploy-to-test-router">8. Deploy to Test Router<a class="headerlink" href="#8-deploy-to-test-router" title="Permanent link">¶</a></h4>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="c1"># Transfer package</span>
|
|
<a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a>scp<span class="w"> </span>build/x86-64/luci-app-system-hub*.ipk<span class="w"> </span>root@192.168.1.1:/tmp/
|
|
<a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a>
|
|
<a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a><span class="c1"># Install on router</span>
|
|
<a id="__codelineno-5-5" name="__codelineno-5-5" href="#__codelineno-5-5"></a>ssh<span class="w"> </span>root@192.168.1.1<span class="w"> </span><span class="s"><< 'EOF'</span>
|
|
<a id="__codelineno-5-6" name="__codelineno-5-6" href="#__codelineno-5-6"></a><span class="s">opkg install /tmp/luci-app-system-hub*.ipk</span>
|
|
<a id="__codelineno-5-7" name="__codelineno-5-7" href="#__codelineno-5-7"></a><span class="s">/etc/init.d/rpcd restart</span>
|
|
<a id="__codelineno-5-8" name="__codelineno-5-8" href="#__codelineno-5-8"></a><span class="s">/etc/init.d/uhttpd restart</span>
|
|
<a id="__codelineno-5-9" name="__codelineno-5-9" href="#__codelineno-5-9"></a><span class="s">EOF</span>
|
|
<a id="__codelineno-5-10" name="__codelineno-5-10" href="#__codelineno-5-10"></a>
|
|
<a id="__codelineno-5-11" name="__codelineno-5-11" href="#__codelineno-5-11"></a><span class="c1"># Fix permissions on deployed router (if needed)</span>
|
|
<a id="__codelineno-5-12" name="__codelineno-5-12" href="#__codelineno-5-12"></a>./secubox-tools/fix-permissions.sh<span class="w"> </span>--remote
|
|
</code></pre></div>
|
|
<h4 id="9-test-in-browser">9. Test in Browser<a class="headerlink" href="#9-test-in-browser" title="Permanent link">¶</a></h4>
|
|
<ol>
|
|
<li>Navigate to <code>http://192.168.1.1/cgi-bin/luci</code></li>
|
|
<li>Go to SecuBox → System → System Hub</li>
|
|
<li>Verify:</li>
|
|
<li>Page loads without errors</li>
|
|
<li>Data displays correctly</li>
|
|
<li>Actions work (buttons, forms)</li>
|
|
<li>Auto-refresh updates data</li>
|
|
<li>Styling matches demo</li>
|
|
<li>Dark mode works</li>
|
|
<li>Responsive design works on mobile</li>
|
|
</ol>
|
|
<h4 id="10-iterate-and-refine">10. Iterate and Refine<a class="headerlink" href="#10-iterate-and-refine" title="Permanent link">¶</a></h4>
|
|
<p>If issues found:
|
|
1. Check browser console for JavaScript errors
|
|
2. Check router logs: <code>ssh root@192.168.1.1 "logread | tail -50"</code>
|
|
3. Verify RPCD methods work: <code>ubus call luci.system-hub status</code>
|
|
4. Fix issues in local files
|
|
5. Rebuild and redeploy
|
|
6. Test again</p>
|
|
<hr />
|
|
<h2 id="common-implementation-patterns">Common Implementation Patterns<a class="headerlink" href="#common-implementation-patterns" title="Permanent link">¶</a></h2>
|
|
<h3 id="pattern-1-multi-tab-dashboard">Pattern 1: Multi-Tab Dashboard<a class="headerlink" href="#pattern-1-multi-tab-dashboard" title="Permanent link">¶</a></h3>
|
|
<p><strong>Example:</strong> System Hub with 9 tabs</p>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="c1">// In render()</span>
|
|
<a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a><span class="kd">var</span><span class="w"> </span><span class="nx">tabs</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-6-3" name="__codelineno-6-3" href="#__codelineno-6-3"></a><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s1">'overview'</span><span class="p">,</span><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s1">'Overview'</span><span class="p">,</span><span class="w"> </span><span class="nx">icon</span><span class="o">:</span><span class="w"> </span><span class="s1">'🏠'</span><span class="w"> </span><span class="p">},</span>
|
|
<a id="__codelineno-6-4" name="__codelineno-6-4" href="#__codelineno-6-4"></a><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s1">'services'</span><span class="p">,</span><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s1">'Services'</span><span class="p">,</span><span class="w"> </span><span class="nx">icon</span><span class="o">:</span><span class="w"> </span><span class="s1">'⚙️'</span><span class="w"> </span><span class="p">},</span>
|
|
<a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s1">'logs'</span><span class="p">,</span><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s1">'Logs'</span><span class="p">,</span><span class="w"> </span><span class="nx">icon</span><span class="o">:</span><span class="w"> </span><span class="s1">'📋'</span><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-6-6" name="__codelineno-6-6" href="#__codelineno-6-6"></a><span class="p">];</span>
|
|
<a id="__codelineno-6-7" name="__codelineno-6-7" href="#__codelineno-6-7"></a>
|
|
<a id="__codelineno-6-8" name="__codelineno-6-8" href="#__codelineno-6-8"></a><span class="kd">var</span><span class="w"> </span><span class="nx">activeTab</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'overview'</span><span class="p">;</span>
|
|
<a id="__codelineno-6-9" name="__codelineno-6-9" href="#__codelineno-6-9"></a>
|
|
<a id="__codelineno-6-10" name="__codelineno-6-10" href="#__codelineno-6-10"></a><span class="c1">// Render tab navigation</span>
|
|
<a id="__codelineno-6-11" name="__codelineno-6-11" href="#__codelineno-6-11"></a><span class="kd">var</span><span class="w"> </span><span class="nx">tabNav</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-nav-tabs'</span><span class="w"> </span><span class="p">},</span>
|
|
<a id="__codelineno-6-12" name="__codelineno-6-12" href="#__codelineno-6-12"></a><span class="w"> </span><span class="nx">tabs</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">tab</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-6-13" name="__codelineno-6-13" href="#__codelineno-6-13"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-6-14" name="__codelineno-6-14" href="#__codelineno-6-14"></a><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-nav-tab'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="p">(</span><span class="nx">activeTab</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">tab</span><span class="p">.</span><span class="nx">id</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">' active'</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">''</span><span class="p">),</span>
|
|
<a id="__codelineno-6-15" name="__codelineno-6-15" href="#__codelineno-6-15"></a><span class="w"> </span><span class="s1">'click'</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-6-16" name="__codelineno-6-16" href="#__codelineno-6-16"></a><span class="w"> </span><span class="c1">// Switch tab logic</span>
|
|
<a id="__codelineno-6-17" name="__codelineno-6-17" href="#__codelineno-6-17"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.sh-nav-tab'</span><span class="p">).</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">t</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-6-18" name="__codelineno-6-18" href="#__codelineno-6-18"></a><span class="w"> </span><span class="nx">t</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
|
<a id="__codelineno-6-19" name="__codelineno-6-19" href="#__codelineno-6-19"></a><span class="w"> </span><span class="p">});</span>
|
|
<a id="__codelineno-6-20" name="__codelineno-6-20" href="#__codelineno-6-20"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
|
<a id="__codelineno-6-21" name="__codelineno-6-21" href="#__codelineno-6-21"></a><span class="w"> </span><span class="c1">// Show/hide tab content</span>
|
|
<a id="__codelineno-6-22" name="__codelineno-6-22" href="#__codelineno-6-22"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-6-23" name="__codelineno-6-23" href="#__codelineno-6-23"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-6-24" name="__codelineno-6-24" href="#__codelineno-6-24"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'span'</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="nx">tab</span><span class="p">.</span><span class="nx">icon</span><span class="p">),</span>
|
|
<a id="__codelineno-6-25" name="__codelineno-6-25" href="#__codelineno-6-25"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'span'</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="nx">tab</span><span class="p">.</span><span class="nx">title</span><span class="p">)</span>
|
|
<a id="__codelineno-6-26" name="__codelineno-6-26" href="#__codelineno-6-26"></a><span class="w"> </span><span class="p">]);</span>
|
|
<a id="__codelineno-6-27" name="__codelineno-6-27" href="#__codelineno-6-27"></a><span class="w"> </span><span class="p">})</span>
|
|
<a id="__codelineno-6-28" name="__codelineno-6-28" href="#__codelineno-6-28"></a><span class="p">);</span>
|
|
<a id="__codelineno-6-29" name="__codelineno-6-29" href="#__codelineno-6-29"></a>
|
|
<a id="__codelineno-6-30" name="__codelineno-6-30" href="#__codelineno-6-30"></a><span class="c1">// Render tab content</span>
|
|
<a id="__codelineno-6-31" name="__codelineno-6-31" href="#__codelineno-6-31"></a><span class="kd">var</span><span class="w"> </span><span class="nx">tabContent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'tab-content'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-6-32" name="__codelineno-6-32" href="#__codelineno-6-32"></a><span class="w"> </span><span class="c1">// Overview tab</span>
|
|
<a id="__codelineno-6-33" name="__codelineno-6-33" href="#__codelineno-6-33"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'tab-pane'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="p">(</span><span class="nx">activeTab</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">'overview'</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">' active'</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">''</span><span class="p">),</span><span class="w"> </span><span class="s1">'data-tab'</span><span class="o">:</span><span class="w"> </span><span class="s1">'overview'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-6-34" name="__codelineno-6-34" href="#__codelineno-6-34"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">renderOverviewContent</span><span class="p">()</span>
|
|
<a id="__codelineno-6-35" name="__codelineno-6-35" href="#__codelineno-6-35"></a><span class="w"> </span><span class="p">]),</span>
|
|
<a id="__codelineno-6-36" name="__codelineno-6-36" href="#__codelineno-6-36"></a><span class="w"> </span><span class="c1">// Services tab</span>
|
|
<a id="__codelineno-6-37" name="__codelineno-6-37" href="#__codelineno-6-37"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'tab-pane'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="p">(</span><span class="nx">activeTab</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">'services'</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">' active'</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">''</span><span class="p">),</span><span class="w"> </span><span class="s1">'data-tab'</span><span class="o">:</span><span class="w"> </span><span class="s1">'services'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-6-38" name="__codelineno-6-38" href="#__codelineno-6-38"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">renderServicesContent</span><span class="p">()</span>
|
|
<a id="__codelineno-6-39" name="__codelineno-6-39" href="#__codelineno-6-39"></a><span class="w"> </span><span class="p">])</span>
|
|
<a id="__codelineno-6-40" name="__codelineno-6-40" href="#__codelineno-6-40"></a><span class="p">]);</span>
|
|
</code></pre></div>
|
|
<h3 id="pattern-2-filter-tabs-with-data-filtering">Pattern 2: Filter Tabs with Data Filtering<a class="headerlink" href="#pattern-2-filter-tabs-with-data-filtering" title="Permanent link">¶</a></h3>
|
|
<p><strong>Example:</strong> SecuBox module grid with category filtering</p>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="c1">// Filter tabs</span>
|
|
<a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a><span class="kd">var</span><span class="w"> </span><span class="nx">filterTabs</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-filter-tabs'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-7-3" name="__codelineno-7-3" href="#__codelineno-7-3"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-7-4" name="__codelineno-7-4" href="#__codelineno-7-4"></a><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-filter-tab active'</span><span class="p">,</span>
|
|
<a id="__codelineno-7-5" name="__codelineno-7-5" href="#__codelineno-7-5"></a><span class="w"> </span><span class="s1">'data-filter'</span><span class="o">:</span><span class="w"> </span><span class="s1">'all'</span><span class="p">,</span>
|
|
<a id="__codelineno-7-6" name="__codelineno-7-6" href="#__codelineno-7-6"></a><span class="w"> </span><span class="s1">'click'</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-7-7" name="__codelineno-7-7" href="#__codelineno-7-7"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.sh-filter-tab'</span><span class="p">).</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">t</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-7-8" name="__codelineno-7-8" href="#__codelineno-7-8"></a><span class="w"> </span><span class="nx">t</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
|
<a id="__codelineno-7-9" name="__codelineno-7-9" href="#__codelineno-7-9"></a><span class="w"> </span><span class="p">});</span>
|
|
<a id="__codelineno-7-10" name="__codelineno-7-10" href="#__codelineno-7-10"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
|
<a id="__codelineno-7-11" name="__codelineno-7-11" href="#__codelineno-7-11"></a><span class="w"> </span><span class="nx">self</span><span class="p">.</span><span class="nx">filterModules</span><span class="p">(</span><span class="s1">'all'</span><span class="p">);</span>
|
|
<a id="__codelineno-7-12" name="__codelineno-7-12" href="#__codelineno-7-12"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-7-13" name="__codelineno-7-13" href="#__codelineno-7-13"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-7-14" name="__codelineno-7-14" href="#__codelineno-7-14"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'span'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-tab-icon'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">'📦'</span><span class="p">),</span>
|
|
<a id="__codelineno-7-15" name="__codelineno-7-15" href="#__codelineno-7-15"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'span'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-tab-label'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">'All'</span><span class="p">)</span>
|
|
<a id="__codelineno-7-16" name="__codelineno-7-16" href="#__codelineno-7-16"></a><span class="w"> </span><span class="p">]),</span>
|
|
<a id="__codelineno-7-17" name="__codelineno-7-17" href="#__codelineno-7-17"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-7-18" name="__codelineno-7-18" href="#__codelineno-7-18"></a><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-filter-tab'</span><span class="p">,</span>
|
|
<a id="__codelineno-7-19" name="__codelineno-7-19" href="#__codelineno-7-19"></a><span class="w"> </span><span class="s1">'data-filter'</span><span class="o">:</span><span class="w"> </span><span class="s1">'security'</span><span class="p">,</span>
|
|
<a id="__codelineno-7-20" name="__codelineno-7-20" href="#__codelineno-7-20"></a><span class="w"> </span><span class="s1">'click'</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-7-21" name="__codelineno-7-21" href="#__codelineno-7-21"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.sh-filter-tab'</span><span class="p">).</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">t</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-7-22" name="__codelineno-7-22" href="#__codelineno-7-22"></a><span class="w"> </span><span class="nx">t</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
|
<a id="__codelineno-7-23" name="__codelineno-7-23" href="#__codelineno-7-23"></a><span class="w"> </span><span class="p">});</span>
|
|
<a id="__codelineno-7-24" name="__codelineno-7-24" href="#__codelineno-7-24"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
|
<a id="__codelineno-7-25" name="__codelineno-7-25" href="#__codelineno-7-25"></a><span class="w"> </span><span class="nx">self</span><span class="p">.</span><span class="nx">filterModules</span><span class="p">(</span><span class="s1">'security'</span><span class="p">);</span>
|
|
<a id="__codelineno-7-26" name="__codelineno-7-26" href="#__codelineno-7-26"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-7-27" name="__codelineno-7-27" href="#__codelineno-7-27"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-7-28" name="__codelineno-7-28" href="#__codelineno-7-28"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'span'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-tab-icon'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">'🛡️'</span><span class="p">),</span>
|
|
<a id="__codelineno-7-29" name="__codelineno-7-29" href="#__codelineno-7-29"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'span'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-tab-label'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">'Security'</span><span class="p">)</span>
|
|
<a id="__codelineno-7-30" name="__codelineno-7-30" href="#__codelineno-7-30"></a><span class="w"> </span><span class="p">])</span>
|
|
<a id="__codelineno-7-31" name="__codelineno-7-31" href="#__codelineno-7-31"></a><span class="p">]);</span>
|
|
<a id="__codelineno-7-32" name="__codelineno-7-32" href="#__codelineno-7-32"></a>
|
|
<a id="__codelineno-7-33" name="__codelineno-7-33" href="#__codelineno-7-33"></a><span class="c1">// Filter function</span>
|
|
<a id="__codelineno-7-34" name="__codelineno-7-34" href="#__codelineno-7-34"></a><span class="nx">filterModules</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">category</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-7-35" name="__codelineno-7-35" href="#__codelineno-7-35"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">modules</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.module-card'</span><span class="p">);</span>
|
|
<a id="__codelineno-7-36" name="__codelineno-7-36" href="#__codelineno-7-36"></a><span class="w"> </span><span class="nx">modules</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">module</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-7-37" name="__codelineno-7-37" href="#__codelineno-7-37"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">category</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">'all'</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">module</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">category</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">category</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-7-38" name="__codelineno-7-38" href="#__codelineno-7-38"></a><span class="w"> </span><span class="nx">module</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'block'</span><span class="p">;</span>
|
|
<a id="__codelineno-7-39" name="__codelineno-7-39" href="#__codelineno-7-39"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-7-40" name="__codelineno-7-40" href="#__codelineno-7-40"></a><span class="w"> </span><span class="nx">module</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'none'</span><span class="p">;</span>
|
|
<a id="__codelineno-7-41" name="__codelineno-7-41" href="#__codelineno-7-41"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-7-42" name="__codelineno-7-42" href="#__codelineno-7-42"></a><span class="w"> </span><span class="p">});</span>
|
|
<a id="__codelineno-7-43" name="__codelineno-7-43" href="#__codelineno-7-43"></a><span class="p">}</span>
|
|
</code></pre></div>
|
|
<h3 id="pattern-3-real-time-log-viewer">Pattern 3: Real-Time Log Viewer<a class="headerlink" href="#pattern-3-real-time-log-viewer" title="Permanent link">¶</a></h3>
|
|
<p><strong>Example:</strong> System Hub logs tab</p>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a><span class="c1">// Logs view with auto-scroll and auto-refresh</span>
|
|
<a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a><span class="nx">renderLogsTab</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-8-3" name="__codelineno-8-3" href="#__codelineno-8-3"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">self</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">;</span>
|
|
<a id="__codelineno-8-4" name="__codelineno-8-4" href="#__codelineno-8-4"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">autoScroll</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
|
|
<a id="__codelineno-8-5" name="__codelineno-8-5" href="#__codelineno-8-5"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">autoRefresh</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
|
|
<a id="__codelineno-8-6" name="__codelineno-8-6" href="#__codelineno-8-6"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">refreshInterval</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">5</span><span class="p">;</span><span class="w"> </span><span class="c1">// seconds</span>
|
|
<a id="__codelineno-8-7" name="__codelineno-8-7" href="#__codelineno-8-7"></a>
|
|
<a id="__codelineno-8-8" name="__codelineno-8-8" href="#__codelineno-8-8"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">logsContainer</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'logs-container'</span><span class="w"> </span><span class="p">});</span>
|
|
<a id="__codelineno-8-9" name="__codelineno-8-9" href="#__codelineno-8-9"></a>
|
|
<a id="__codelineno-8-10" name="__codelineno-8-10" href="#__codelineno-8-10"></a><span class="w"> </span><span class="c1">// Load logs</span>
|
|
<a id="__codelineno-8-11" name="__codelineno-8-11" href="#__codelineno-8-11"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">loadLogs</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-8-12" name="__codelineno-8-12" href="#__codelineno-8-12"></a><span class="w"> </span><span class="nx">API</span><span class="p">.</span><span class="nx">getLogs</span><span class="p">(</span><span class="mf">100</span><span class="p">,</span><span class="w"> </span><span class="s1">''</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-8-13" name="__codelineno-8-13" href="#__codelineno-8-13"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">logs</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">result</span><span class="p">.</span><span class="nx">logs</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="p">[];</span>
|
|
<a id="__codelineno-8-14" name="__codelineno-8-14" href="#__codelineno-8-14"></a>
|
|
<a id="__codelineno-8-15" name="__codelineno-8-15" href="#__codelineno-8-15"></a><span class="w"> </span><span class="nx">dom</span><span class="p">.</span><span class="nx">content</span><span class="p">(</span><span class="nx">logsContainer</span><span class="p">,</span>
|
|
<a id="__codelineno-8-16" name="__codelineno-8-16" href="#__codelineno-8-16"></a><span class="w"> </span><span class="nx">logs</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">log</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-8-17" name="__codelineno-8-17" href="#__codelineno-8-17"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'log-line'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="nx">log</span><span class="p">);</span>
|
|
<a id="__codelineno-8-18" name="__codelineno-8-18" href="#__codelineno-8-18"></a><span class="w"> </span><span class="p">})</span>
|
|
<a id="__codelineno-8-19" name="__codelineno-8-19" href="#__codelineno-8-19"></a><span class="w"> </span><span class="p">);</span>
|
|
<a id="__codelineno-8-20" name="__codelineno-8-20" href="#__codelineno-8-20"></a>
|
|
<a id="__codelineno-8-21" name="__codelineno-8-21" href="#__codelineno-8-21"></a><span class="w"> </span><span class="c1">// Auto-scroll to bottom</span>
|
|
<a id="__codelineno-8-22" name="__codelineno-8-22" href="#__codelineno-8-22"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">autoScroll</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-8-23" name="__codelineno-8-23" href="#__codelineno-8-23"></a><span class="w"> </span><span class="nx">logsContainer</span><span class="p">.</span><span class="nx">scrollTop</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">logsContainer</span><span class="p">.</span><span class="nx">scrollHeight</span><span class="p">;</span>
|
|
<a id="__codelineno-8-24" name="__codelineno-8-24" href="#__codelineno-8-24"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-8-25" name="__codelineno-8-25" href="#__codelineno-8-25"></a><span class="w"> </span><span class="p">});</span>
|
|
<a id="__codelineno-8-26" name="__codelineno-8-26" href="#__codelineno-8-26"></a><span class="w"> </span><span class="p">};</span>
|
|
<a id="__codelineno-8-27" name="__codelineno-8-27" href="#__codelineno-8-27"></a>
|
|
<a id="__codelineno-8-28" name="__codelineno-8-28" href="#__codelineno-8-28"></a><span class="w"> </span><span class="c1">// Initial load</span>
|
|
<a id="__codelineno-8-29" name="__codelineno-8-29" href="#__codelineno-8-29"></a><span class="w"> </span><span class="nx">loadLogs</span><span class="p">();</span>
|
|
<a id="__codelineno-8-30" name="__codelineno-8-30" href="#__codelineno-8-30"></a>
|
|
<a id="__codelineno-8-31" name="__codelineno-8-31" href="#__codelineno-8-31"></a><span class="w"> </span><span class="c1">// Auto-refresh</span>
|
|
<a id="__codelineno-8-32" name="__codelineno-8-32" href="#__codelineno-8-32"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">autoRefresh</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-8-33" name="__codelineno-8-33" href="#__codelineno-8-33"></a><span class="w"> </span><span class="nx">setInterval</span><span class="p">(</span><span class="nx">loadLogs</span><span class="p">,</span><span class="w"> </span><span class="nx">refreshInterval</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">1000</span><span class="p">);</span>
|
|
<a id="__codelineno-8-34" name="__codelineno-8-34" href="#__codelineno-8-34"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-8-35" name="__codelineno-8-35" href="#__codelineno-8-35"></a>
|
|
<a id="__codelineno-8-36" name="__codelineno-8-36" href="#__codelineno-8-36"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-8-37" name="__codelineno-8-37" href="#__codelineno-8-37"></a><span class="w"> </span><span class="c1">// Controls</span>
|
|
<a id="__codelineno-8-38" name="__codelineno-8-38" href="#__codelineno-8-38"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'logs-controls'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-8-39" name="__codelineno-8-39" href="#__codelineno-8-39"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'label'</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-8-40" name="__codelineno-8-40" href="#__codelineno-8-40"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'input'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-8-41" name="__codelineno-8-41" href="#__codelineno-8-41"></a><span class="w"> </span><span class="s1">'type'</span><span class="o">:</span><span class="w"> </span><span class="s1">'checkbox'</span><span class="p">,</span>
|
|
<a id="__codelineno-8-42" name="__codelineno-8-42" href="#__codelineno-8-42"></a><span class="w"> </span><span class="s1">'checked'</span><span class="o">:</span><span class="w"> </span><span class="nx">autoScroll</span><span class="p">,</span>
|
|
<a id="__codelineno-8-43" name="__codelineno-8-43" href="#__codelineno-8-43"></a><span class="w"> </span><span class="s1">'change'</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">autoScroll</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">checked</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-8-44" name="__codelineno-8-44" href="#__codelineno-8-44"></a><span class="w"> </span><span class="p">}),</span>
|
|
<a id="__codelineno-8-45" name="__codelineno-8-45" href="#__codelineno-8-45"></a><span class="w"> </span><span class="s1">' Auto-scroll'</span>
|
|
<a id="__codelineno-8-46" name="__codelineno-8-46" href="#__codelineno-8-46"></a><span class="w"> </span><span class="p">]),</span>
|
|
<a id="__codelineno-8-47" name="__codelineno-8-47" href="#__codelineno-8-47"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'label'</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-8-48" name="__codelineno-8-48" href="#__codelineno-8-48"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'input'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-8-49" name="__codelineno-8-49" href="#__codelineno-8-49"></a><span class="w"> </span><span class="s1">'type'</span><span class="o">:</span><span class="w"> </span><span class="s1">'checkbox'</span><span class="p">,</span>
|
|
<a id="__codelineno-8-50" name="__codelineno-8-50" href="#__codelineno-8-50"></a><span class="w"> </span><span class="s1">'checked'</span><span class="o">:</span><span class="w"> </span><span class="nx">autoRefresh</span><span class="p">,</span>
|
|
<a id="__codelineno-8-51" name="__codelineno-8-51" href="#__codelineno-8-51"></a><span class="w"> </span><span class="s1">'change'</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">autoRefresh</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">checked</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-8-52" name="__codelineno-8-52" href="#__codelineno-8-52"></a><span class="w"> </span><span class="p">}),</span>
|
|
<a id="__codelineno-8-53" name="__codelineno-8-53" href="#__codelineno-8-53"></a><span class="w"> </span><span class="s1">' Auto-refresh'</span>
|
|
<a id="__codelineno-8-54" name="__codelineno-8-54" href="#__codelineno-8-54"></a><span class="w"> </span><span class="p">]),</span>
|
|
<a id="__codelineno-8-55" name="__codelineno-8-55" href="#__codelineno-8-55"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'button'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-8-56" name="__codelineno-8-56" href="#__codelineno-8-56"></a><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-btn sh-btn-primary'</span><span class="p">,</span>
|
|
<a id="__codelineno-8-57" name="__codelineno-8-57" href="#__codelineno-8-57"></a><span class="w"> </span><span class="s1">'click'</span><span class="o">:</span><span class="w"> </span><span class="nx">loadLogs</span>
|
|
<a id="__codelineno-8-58" name="__codelineno-8-58" href="#__codelineno-8-58"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">'🔄 Refresh Now'</span><span class="p">)</span>
|
|
<a id="__codelineno-8-59" name="__codelineno-8-59" href="#__codelineno-8-59"></a><span class="w"> </span><span class="p">]),</span>
|
|
<a id="__codelineno-8-60" name="__codelineno-8-60" href="#__codelineno-8-60"></a><span class="w"> </span><span class="c1">// Logs display</span>
|
|
<a id="__codelineno-8-61" name="__codelineno-8-61" href="#__codelineno-8-61"></a><span class="w"> </span><span class="nx">logsContainer</span>
|
|
<a id="__codelineno-8-62" name="__codelineno-8-62" href="#__codelineno-8-62"></a><span class="w"> </span><span class="p">]);</span>
|
|
<a id="__codelineno-8-63" name="__codelineno-8-63" href="#__codelineno-8-63"></a><span class="p">}</span>
|
|
</code></pre></div>
|
|
<h3 id="pattern-4-action-buttons-with-confirmation">Pattern 4: Action Buttons with Confirmation<a class="headerlink" href="#pattern-4-action-buttons-with-confirmation" title="Permanent link">¶</a></h3>
|
|
<p><strong>Example:</strong> Service management buttons</p>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a><span class="c1">// Render action button with confirmation</span>
|
|
<a id="__codelineno-9-2" name="__codelineno-9-2" href="#__codelineno-9-2"></a><span class="nx">renderActionButton</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">service</span><span class="p">,</span><span class="w"> </span><span class="nx">action</span><span class="p">,</span><span class="w"> </span><span class="nx">label</span><span class="p">,</span><span class="w"> </span><span class="nx">btnClass</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-3" name="__codelineno-9-3" href="#__codelineno-9-3"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">self</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">;</span>
|
|
<a id="__codelineno-9-4" name="__codelineno-9-4" href="#__codelineno-9-4"></a>
|
|
<a id="__codelineno-9-5" name="__codelineno-9-5" href="#__codelineno-9-5"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'button'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-6" name="__codelineno-9-6" href="#__codelineno-9-6"></a><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-btn '</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">btnClass</span><span class="p">,</span>
|
|
<a id="__codelineno-9-7" name="__codelineno-9-7" href="#__codelineno-9-7"></a><span class="w"> </span><span class="s1">'click'</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-8" name="__codelineno-9-8" href="#__codelineno-9-8"></a><span class="w"> </span><span class="c1">// Show confirmation modal</span>
|
|
<a id="__codelineno-9-9" name="__codelineno-9-9" href="#__codelineno-9-9"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">showModal</span><span class="p">(</span><span class="nx">_</span><span class="p">(</span><span class="s1">'Confirm Action'</span><span class="p">),</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-9-10" name="__codelineno-9-10" href="#__codelineno-9-10"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Are you sure you want to %s service %s?'</span><span class="p">).</span><span class="nx">format</span><span class="p">(</span><span class="nx">action</span><span class="p">,</span><span class="w"> </span><span class="nx">service</span><span class="p">)),</span>
|
|
<a id="__codelineno-9-11" name="__codelineno-9-11" href="#__codelineno-9-11"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'right'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-9-12" name="__codelineno-9-12" href="#__codelineno-9-12"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'button'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-13" name="__codelineno-9-13" href="#__codelineno-9-13"></a><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-btn sh-btn-secondary'</span><span class="p">,</span>
|
|
<a id="__codelineno-9-14" name="__codelineno-9-14" href="#__codelineno-9-14"></a><span class="w"> </span><span class="s1">'click'</span><span class="o">:</span><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">hideModal</span>
|
|
<a id="__codelineno-9-15" name="__codelineno-9-15" href="#__codelineno-9-15"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Cancel'</span><span class="p">)),</span>
|
|
<a id="__codelineno-9-16" name="__codelineno-9-16" href="#__codelineno-9-16"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'button'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-17" name="__codelineno-9-17" href="#__codelineno-9-17"></a><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-btn sh-btn-primary'</span><span class="p">,</span>
|
|
<a id="__codelineno-9-18" name="__codelineno-9-18" href="#__codelineno-9-18"></a><span class="w"> </span><span class="s1">'click'</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-19" name="__codelineno-9-19" href="#__codelineno-9-19"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">hideModal</span><span class="p">();</span>
|
|
<a id="__codelineno-9-20" name="__codelineno-9-20" href="#__codelineno-9-20"></a><span class="w"> </span><span class="nx">self</span><span class="p">.</span><span class="nx">performServiceAction</span><span class="p">(</span><span class="nx">service</span><span class="p">,</span><span class="w"> </span><span class="nx">action</span><span class="p">);</span>
|
|
<a id="__codelineno-9-21" name="__codelineno-9-21" href="#__codelineno-9-21"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-9-22" name="__codelineno-9-22" href="#__codelineno-9-22"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Confirm'</span><span class="p">))</span>
|
|
<a id="__codelineno-9-23" name="__codelineno-9-23" href="#__codelineno-9-23"></a><span class="w"> </span><span class="p">])</span>
|
|
<a id="__codelineno-9-24" name="__codelineno-9-24" href="#__codelineno-9-24"></a><span class="w"> </span><span class="p">]);</span>
|
|
<a id="__codelineno-9-25" name="__codelineno-9-25" href="#__codelineno-9-25"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-9-26" name="__codelineno-9-26" href="#__codelineno-9-26"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="nx">label</span><span class="p">);</span>
|
|
<a id="__codelineno-9-27" name="__codelineno-9-27" href="#__codelineno-9-27"></a><span class="p">},</span>
|
|
<a id="__codelineno-9-28" name="__codelineno-9-28" href="#__codelineno-9-28"></a>
|
|
<a id="__codelineno-9-29" name="__codelineno-9-29" href="#__codelineno-9-29"></a><span class="c1">// Perform service action</span>
|
|
<a id="__codelineno-9-30" name="__codelineno-9-30" href="#__codelineno-9-30"></a><span class="nx">performServiceAction</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">service</span><span class="p">,</span><span class="w"> </span><span class="nx">action</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-31" name="__codelineno-9-31" href="#__codelineno-9-31"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">self</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">;</span>
|
|
<a id="__codelineno-9-32" name="__codelineno-9-32" href="#__codelineno-9-32"></a>
|
|
<a id="__codelineno-9-33" name="__codelineno-9-33" href="#__codelineno-9-33"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">showModal</span><span class="p">(</span><span class="nx">_</span><span class="p">(</span><span class="s1">'Performing Action'</span><span class="p">),</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-9-34" name="__codelineno-9-34" href="#__codelineno-9-34"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'em'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'spinning'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Please wait...'</span><span class="p">)))</span>
|
|
<a id="__codelineno-9-35" name="__codelineno-9-35" href="#__codelineno-9-35"></a><span class="w"> </span><span class="p">]);</span>
|
|
<a id="__codelineno-9-36" name="__codelineno-9-36" href="#__codelineno-9-36"></a>
|
|
<a id="__codelineno-9-37" name="__codelineno-9-37" href="#__codelineno-9-37"></a><span class="w"> </span><span class="nx">API</span><span class="p">.</span><span class="nx">serviceAction</span><span class="p">(</span><span class="nx">service</span><span class="p">,</span><span class="w"> </span><span class="nx">action</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-38" name="__codelineno-9-38" href="#__codelineno-9-38"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">hideModal</span><span class="p">();</span>
|
|
<a id="__codelineno-9-39" name="__codelineno-9-39" href="#__codelineno-9-39"></a>
|
|
<a id="__codelineno-9-40" name="__codelineno-9-40" href="#__codelineno-9-40"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">success</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-41" name="__codelineno-9-41" href="#__codelineno-9-41"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">addNotification</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Action completed successfully'</span><span class="p">)),</span><span class="w"> </span><span class="s1">'success'</span><span class="p">);</span>
|
|
<a id="__codelineno-9-42" name="__codelineno-9-42" href="#__codelineno-9-42"></a><span class="w"> </span><span class="nx">self</span><span class="p">.</span><span class="nx">handleRefresh</span><span class="p">();</span>
|
|
<a id="__codelineno-9-43" name="__codelineno-9-43" href="#__codelineno-9-43"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-44" name="__codelineno-9-44" href="#__codelineno-9-44"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">addNotification</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Action failed: %s'</span><span class="p">).</span><span class="nx">format</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">message</span><span class="p">)),</span><span class="w"> </span><span class="s1">'error'</span><span class="p">);</span>
|
|
<a id="__codelineno-9-45" name="__codelineno-9-45" href="#__codelineno-9-45"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-9-46" name="__codelineno-9-46" href="#__codelineno-9-46"></a><span class="w"> </span><span class="p">}).</span><span class="k">catch</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-9-47" name="__codelineno-9-47" href="#__codelineno-9-47"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">hideModal</span><span class="p">();</span>
|
|
<a id="__codelineno-9-48" name="__codelineno-9-48" href="#__codelineno-9-48"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">addNotification</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Error: %s'</span><span class="p">).</span><span class="nx">format</span><span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">)),</span><span class="w"> </span><span class="s1">'error'</span><span class="p">);</span>
|
|
<a id="__codelineno-9-49" name="__codelineno-9-49" href="#__codelineno-9-49"></a><span class="w"> </span><span class="p">});</span>
|
|
<a id="__codelineno-9-50" name="__codelineno-9-50" href="#__codelineno-9-50"></a><span class="p">}</span>
|
|
</code></pre></div>
|
|
<h3 id="pattern-5-form-with-validation">Pattern 5: Form with Validation<a class="headerlink" href="#pattern-5-form-with-validation" title="Permanent link">¶</a></h3>
|
|
<p><strong>Example:</strong> Settings page</p>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a><span class="nx">renderSettingsForm</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-2" name="__codelineno-10-2" href="#__codelineno-10-2"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">self</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">;</span>
|
|
<a id="__codelineno-10-3" name="__codelineno-10-3" href="#__codelineno-10-3"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">settings</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">settingsData</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="p">{};</span>
|
|
<a id="__codelineno-10-4" name="__codelineno-10-4" href="#__codelineno-10-4"></a>
|
|
<a id="__codelineno-10-5" name="__codelineno-10-5" href="#__codelineno-10-5"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'form'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'settings-form'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-10-6" name="__codelineno-10-6" href="#__codelineno-10-6"></a><span class="w"> </span><span class="c1">// Text input</span>
|
|
<a id="__codelineno-10-7" name="__codelineno-10-7" href="#__codelineno-10-7"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'form-group'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-10-8" name="__codelineno-10-8" href="#__codelineno-10-8"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'label'</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="s1">'Hostname'</span><span class="p">),</span>
|
|
<a id="__codelineno-10-9" name="__codelineno-10-9" href="#__codelineno-10-9"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'input'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-10" name="__codelineno-10-10" href="#__codelineno-10-10"></a><span class="w"> </span><span class="s1">'type'</span><span class="o">:</span><span class="w"> </span><span class="s1">'text'</span><span class="p">,</span>
|
|
<a id="__codelineno-10-11" name="__codelineno-10-11" href="#__codelineno-10-11"></a><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'form-control'</span><span class="p">,</span>
|
|
<a id="__codelineno-10-12" name="__codelineno-10-12" href="#__codelineno-10-12"></a><span class="w"> </span><span class="s1">'value'</span><span class="o">:</span><span class="w"> </span><span class="nx">settings</span><span class="p">.</span><span class="nx">hostname</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s1">''</span><span class="p">,</span>
|
|
<a id="__codelineno-10-13" name="__codelineno-10-13" href="#__codelineno-10-13"></a><span class="w"> </span><span class="s1">'id'</span><span class="o">:</span><span class="w"> </span><span class="s1">'input-hostname'</span>
|
|
<a id="__codelineno-10-14" name="__codelineno-10-14" href="#__codelineno-10-14"></a><span class="w"> </span><span class="p">})</span>
|
|
<a id="__codelineno-10-15" name="__codelineno-10-15" href="#__codelineno-10-15"></a><span class="w"> </span><span class="p">]),</span>
|
|
<a id="__codelineno-10-16" name="__codelineno-10-16" href="#__codelineno-10-16"></a>
|
|
<a id="__codelineno-10-17" name="__codelineno-10-17" href="#__codelineno-10-17"></a><span class="w"> </span><span class="c1">// Number input with validation</span>
|
|
<a id="__codelineno-10-18" name="__codelineno-10-18" href="#__codelineno-10-18"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'form-group'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-10-19" name="__codelineno-10-19" href="#__codelineno-10-19"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'label'</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="s1">'Refresh Interval (seconds)'</span><span class="p">),</span>
|
|
<a id="__codelineno-10-20" name="__codelineno-10-20" href="#__codelineno-10-20"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'input'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-21" name="__codelineno-10-21" href="#__codelineno-10-21"></a><span class="w"> </span><span class="s1">'type'</span><span class="o">:</span><span class="w"> </span><span class="s1">'number'</span><span class="p">,</span>
|
|
<a id="__codelineno-10-22" name="__codelineno-10-22" href="#__codelineno-10-22"></a><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'form-control'</span><span class="p">,</span>
|
|
<a id="__codelineno-10-23" name="__codelineno-10-23" href="#__codelineno-10-23"></a><span class="w"> </span><span class="s1">'value'</span><span class="o">:</span><span class="w"> </span><span class="nx">settings</span><span class="p">.</span><span class="nx">refresh_interval</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="mf">30</span><span class="p">,</span>
|
|
<a id="__codelineno-10-24" name="__codelineno-10-24" href="#__codelineno-10-24"></a><span class="w"> </span><span class="s1">'min'</span><span class="o">:</span><span class="w"> </span><span class="mf">10</span><span class="p">,</span>
|
|
<a id="__codelineno-10-25" name="__codelineno-10-25" href="#__codelineno-10-25"></a><span class="w"> </span><span class="s1">'max'</span><span class="o">:</span><span class="w"> </span><span class="mf">300</span><span class="p">,</span>
|
|
<a id="__codelineno-10-26" name="__codelineno-10-26" href="#__codelineno-10-26"></a><span class="w"> </span><span class="s1">'id'</span><span class="o">:</span><span class="w"> </span><span class="s1">'input-refresh'</span>
|
|
<a id="__codelineno-10-27" name="__codelineno-10-27" href="#__codelineno-10-27"></a><span class="w"> </span><span class="p">})</span>
|
|
<a id="__codelineno-10-28" name="__codelineno-10-28" href="#__codelineno-10-28"></a><span class="w"> </span><span class="p">]),</span>
|
|
<a id="__codelineno-10-29" name="__codelineno-10-29" href="#__codelineno-10-29"></a>
|
|
<a id="__codelineno-10-30" name="__codelineno-10-30" href="#__codelineno-10-30"></a><span class="w"> </span><span class="c1">// Checkbox</span>
|
|
<a id="__codelineno-10-31" name="__codelineno-10-31" href="#__codelineno-10-31"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'form-group'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-10-32" name="__codelineno-10-32" href="#__codelineno-10-32"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'label'</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-10-33" name="__codelineno-10-33" href="#__codelineno-10-33"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'input'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-34" name="__codelineno-10-34" href="#__codelineno-10-34"></a><span class="w"> </span><span class="s1">'type'</span><span class="o">:</span><span class="w"> </span><span class="s1">'checkbox'</span><span class="p">,</span>
|
|
<a id="__codelineno-10-35" name="__codelineno-10-35" href="#__codelineno-10-35"></a><span class="w"> </span><span class="s1">'checked'</span><span class="o">:</span><span class="w"> </span><span class="nx">settings</span><span class="p">.</span><span class="nx">auto_refresh</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span>
|
|
<a id="__codelineno-10-36" name="__codelineno-10-36" href="#__codelineno-10-36"></a><span class="w"> </span><span class="s1">'id'</span><span class="o">:</span><span class="w"> </span><span class="s1">'input-auto-refresh'</span>
|
|
<a id="__codelineno-10-37" name="__codelineno-10-37" href="#__codelineno-10-37"></a><span class="w"> </span><span class="p">}),</span>
|
|
<a id="__codelineno-10-38" name="__codelineno-10-38" href="#__codelineno-10-38"></a><span class="w"> </span><span class="s1">' Enable auto-refresh'</span>
|
|
<a id="__codelineno-10-39" name="__codelineno-10-39" href="#__codelineno-10-39"></a><span class="w"> </span><span class="p">])</span>
|
|
<a id="__codelineno-10-40" name="__codelineno-10-40" href="#__codelineno-10-40"></a><span class="w"> </span><span class="p">]),</span>
|
|
<a id="__codelineno-10-41" name="__codelineno-10-41" href="#__codelineno-10-41"></a>
|
|
<a id="__codelineno-10-42" name="__codelineno-10-42" href="#__codelineno-10-42"></a><span class="w"> </span><span class="c1">// Submit button</span>
|
|
<a id="__codelineno-10-43" name="__codelineno-10-43" href="#__codelineno-10-43"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'form-actions'</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
|
|
<a id="__codelineno-10-44" name="__codelineno-10-44" href="#__codelineno-10-44"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'button'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-45" name="__codelineno-10-45" href="#__codelineno-10-45"></a><span class="w"> </span><span class="s1">'class'</span><span class="o">:</span><span class="w"> </span><span class="s1">'sh-btn sh-btn-primary'</span><span class="p">,</span>
|
|
<a id="__codelineno-10-46" name="__codelineno-10-46" href="#__codelineno-10-46"></a><span class="w"> </span><span class="s1">'type'</span><span class="o">:</span><span class="w"> </span><span class="s1">'submit'</span><span class="p">,</span>
|
|
<a id="__codelineno-10-47" name="__codelineno-10-47" href="#__codelineno-10-47"></a><span class="w"> </span><span class="s1">'click'</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-48" name="__codelineno-10-48" href="#__codelineno-10-48"></a><span class="w"> </span><span class="nx">ev</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
<a id="__codelineno-10-49" name="__codelineno-10-49" href="#__codelineno-10-49"></a><span class="w"> </span><span class="nx">self</span><span class="p">.</span><span class="nx">handleSaveSettings</span><span class="p">();</span>
|
|
<a id="__codelineno-10-50" name="__codelineno-10-50" href="#__codelineno-10-50"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-10-51" name="__codelineno-10-51" href="#__codelineno-10-51"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">'Save Settings'</span><span class="p">)</span>
|
|
<a id="__codelineno-10-52" name="__codelineno-10-52" href="#__codelineno-10-52"></a><span class="w"> </span><span class="p">])</span>
|
|
<a id="__codelineno-10-53" name="__codelineno-10-53" href="#__codelineno-10-53"></a><span class="w"> </span><span class="p">]);</span>
|
|
<a id="__codelineno-10-54" name="__codelineno-10-54" href="#__codelineno-10-54"></a><span class="p">},</span>
|
|
<a id="__codelineno-10-55" name="__codelineno-10-55" href="#__codelineno-10-55"></a>
|
|
<a id="__codelineno-10-56" name="__codelineno-10-56" href="#__codelineno-10-56"></a><span class="nx">handleSaveSettings</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-57" name="__codelineno-10-57" href="#__codelineno-10-57"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">hostname</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'input-hostname'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
|
|
<a id="__codelineno-10-58" name="__codelineno-10-58" href="#__codelineno-10-58"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">refreshInterval</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">parseInt</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'input-refresh'</span><span class="p">).</span><span class="nx">value</span><span class="p">);</span>
|
|
<a id="__codelineno-10-59" name="__codelineno-10-59" href="#__codelineno-10-59"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">autoRefresh</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'input-auto-refresh'</span><span class="p">).</span><span class="nx">checked</span><span class="p">;</span>
|
|
<a id="__codelineno-10-60" name="__codelineno-10-60" href="#__codelineno-10-60"></a>
|
|
<a id="__codelineno-10-61" name="__codelineno-10-61" href="#__codelineno-10-61"></a><span class="w"> </span><span class="c1">// Validate</span>
|
|
<a id="__codelineno-10-62" name="__codelineno-10-62" href="#__codelineno-10-62"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">hostname</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-63" name="__codelineno-10-63" href="#__codelineno-10-63"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">addNotification</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Hostname is required'</span><span class="p">)),</span><span class="w"> </span><span class="s1">'error'</span><span class="p">);</span>
|
|
<a id="__codelineno-10-64" name="__codelineno-10-64" href="#__codelineno-10-64"></a><span class="w"> </span><span class="k">return</span><span class="p">;</span>
|
|
<a id="__codelineno-10-65" name="__codelineno-10-65" href="#__codelineno-10-65"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-10-66" name="__codelineno-10-66" href="#__codelineno-10-66"></a>
|
|
<a id="__codelineno-10-67" name="__codelineno-10-67" href="#__codelineno-10-67"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">refreshInterval</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="mf">10</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">refreshInterval</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="mf">300</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-68" name="__codelineno-10-68" href="#__codelineno-10-68"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">addNotification</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Refresh interval must be between 10 and 300 seconds'</span><span class="p">)),</span><span class="w"> </span><span class="s1">'error'</span><span class="p">);</span>
|
|
<a id="__codelineno-10-69" name="__codelineno-10-69" href="#__codelineno-10-69"></a><span class="w"> </span><span class="k">return</span><span class="p">;</span>
|
|
<a id="__codelineno-10-70" name="__codelineno-10-70" href="#__codelineno-10-70"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-10-71" name="__codelineno-10-71" href="#__codelineno-10-71"></a>
|
|
<a id="__codelineno-10-72" name="__codelineno-10-72" href="#__codelineno-10-72"></a><span class="w"> </span><span class="c1">// Save via API</span>
|
|
<a id="__codelineno-10-73" name="__codelineno-10-73" href="#__codelineno-10-73"></a><span class="w"> </span><span class="nx">API</span><span class="p">.</span><span class="nx">saveSettings</span><span class="p">(</span><span class="nx">hostname</span><span class="p">,</span><span class="w"> </span><span class="nx">refreshInterval</span><span class="p">,</span><span class="w"> </span><span class="nx">autoRefresh</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-74" name="__codelineno-10-74" href="#__codelineno-10-74"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">success</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-75" name="__codelineno-10-75" href="#__codelineno-10-75"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">addNotification</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Settings saved successfully'</span><span class="p">)),</span><span class="w"> </span><span class="s1">'success'</span><span class="p">);</span>
|
|
<a id="__codelineno-10-76" name="__codelineno-10-76" href="#__codelineno-10-76"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-10-77" name="__codelineno-10-77" href="#__codelineno-10-77"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">addNotification</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="p">(</span><span class="s1">'Failed to save settings: %s'</span><span class="p">).</span><span class="nx">format</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">message</span><span class="p">)),</span><span class="w"> </span><span class="s1">'error'</span><span class="p">);</span>
|
|
<a id="__codelineno-10-78" name="__codelineno-10-78" href="#__codelineno-10-78"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-10-79" name="__codelineno-10-79" href="#__codelineno-10-79"></a><span class="w"> </span><span class="p">});</span>
|
|
<a id="__codelineno-10-80" name="__codelineno-10-80" href="#__codelineno-10-80"></a><span class="p">}</span>
|
|
</code></pre></div>
|
|
<hr />
|
|
<h2 id="module-specific-notes">Module-Specific Notes<a class="headerlink" href="#module-specific-notes" title="Permanent link">¶</a></h2>
|
|
<h3 id="system-hub-luci-app-system-hub">System Hub (luci-app-system-hub)<a class="headerlink" href="#system-hub-luci-app-system-hub" title="Permanent link">¶</a></h3>
|
|
<ul>
|
|
<li><strong>Complexity:</strong> High - 9 tabs, many features</li>
|
|
<li><strong>Key Features:</strong> Health monitoring, service management, system logs, backup/restore</li>
|
|
<li><strong>Special Requirements:</strong> Integration with SecuBox for components list</li>
|
|
<li><strong>Dependencies:</strong> Calls <code>luci.secubox</code> for module enumeration</li>
|
|
</ul>
|
|
<h3 id="wireguard-dashboard-luci-app-wireguard-dashboard">WireGuard Dashboard (luci-app-wireguard-dashboard)<a class="headerlink" href="#wireguard-dashboard-luci-app-wireguard-dashboard" title="Permanent link">¶</a></h3>
|
|
<ul>
|
|
<li><strong>Complexity:</strong> Medium</li>
|
|
<li><strong>Key Features:</strong> Peer management, QR code generation, traffic stats</li>
|
|
<li><strong>Special Requirements:</strong> QR code generation (use qrencode or JavaScript library)</li>
|
|
<li><strong>Dependencies:</strong> WireGuard tools (<code>wg</code> command)</li>
|
|
</ul>
|
|
<h3 id="crowdsec-dashboard-luci-app-crowdsec-dashboard">CrowdSec Dashboard (luci-app-crowdsec-dashboard)<a class="headerlink" href="#crowdsec-dashboard-luci-app-crowdsec-dashboard" title="Permanent link">¶</a></h3>
|
|
<ul>
|
|
<li><strong>Complexity:</strong> Medium</li>
|
|
<li><strong>Key Features:</strong> Threat intelligence, decisions management, bouncers</li>
|
|
<li><strong>Special Requirements:</strong> Parse CrowdSec CLI output</li>
|
|
<li><strong>Dependencies:</strong> CrowdSec (<code>cscli</code> command)</li>
|
|
</ul>
|
|
<h3 id="netdata-dashboard-luci-app-netdata-dashboard">Netdata Dashboard (luci-app-netdata-dashboard)<a class="headerlink" href="#netdata-dashboard-luci-app-netdata-dashboard" title="Permanent link">¶</a></h3>
|
|
<ul>
|
|
<li><strong>Complexity:</strong> Low - mostly embedding iframe</li>
|
|
<li><strong>Key Features:</strong> Embedded Netdata UI, quick metrics overview</li>
|
|
<li><strong>Special Requirements:</strong> Netdata API integration</li>
|
|
<li><strong>Dependencies:</strong> Netdata service</li>
|
|
</ul>
|
|
<h3 id="network-modes-luci-app-network-modes">Network Modes (luci-app-network-modes)<a class="headerlink" href="#network-modes-luci-app-network-modes" title="Permanent link">¶</a></h3>
|
|
<ul>
|
|
<li><strong>Complexity:</strong> High - UCI manipulation</li>
|
|
<li><strong>Key Features:</strong> Network topology wizard, configuration preview</li>
|
|
<li><strong>Special Requirements:</strong> UCI config validation, rollback mechanism</li>
|
|
<li><strong>Dependencies:</strong> Network, firewall, DHCP configs</li>
|
|
</ul>
|
|
<h4 id="available-modes-v036">Available Modes (v0.3.6)<a class="headerlink" href="#available-modes-v036" title="Permanent link">¶</a></h4>
|
|
<p>The production build now includes nine fully supported profiles. Each profile exposes its own RPC (<code>*_config</code>), view, and default values under <code>network-modes.<mode></code>:</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Mode ID</th>
|
|
<th>Description</th>
|
|
<th>Notable Features</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>router</code></td>
|
|
<td>Standard router</td>
|
|
<td>NAT + firewall, DHCP, proxy/HTTPS front-end helpers</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>doublenat</code></td>
|
|
<td>Behind ISP CPE</td>
|
|
<td>WAN DHCP client, isolated LAN/guest bridge, UPnP/DMZ controls</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>multiwan</code></td>
|
|
<td>Dual uplink</td>
|
|
<td>Health checks, failover hold timers, load-balance/mwan3</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>vpnrelay</code></td>
|
|
<td>VPN gateway</td>
|
|
<td>WireGuard/OpenVPN, kill switch, DNS override, split tunnel</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>bridge</code></td>
|
|
<td>Layer-2 pass-through</td>
|
|
<td>No NAT, all ports bridged, DHCP client</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>accesspoint</code></td>
|
|
<td>WiFi AP</td>
|
|
<td>Bridge upstream, disable routing/DHCP, 802.11r/k/v toggles</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>relay</code></td>
|
|
<td>WiFi repeater</td>
|
|
<td>STA+AP, relayd/WDS, WireGuard assist, MTU/MSS tuning</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>travel</code></td>
|
|
<td>Portable router</td>
|
|
<td>Client WiFi scan, MAC clone, WPA3 hotspot, sandbox LAN</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>sniffer</code></td>
|
|
<td>TAP/sniffer</td>
|
|
<td>Promiscuous bridge, Netifyd integration, pcap support</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>When adding another mode, update: UCI defaults (<code>root/etc/config/network-modes</code>), the RPC script (<code>get_<mode>_config</code>, <code>update_settings</code>, <code>generate_config</code>, <code>set_mode</code> allow-list), the JS API/view/menu, and the docs.</p>
|
|
<hr />
|
|
<h2 id="troubleshooting-guide">Troubleshooting Guide<a class="headerlink" href="#troubleshooting-guide" title="Permanent link">¶</a></h2>
|
|
<h3 id="issue-object-not-found-error">Issue: "Object not found" Error<a class="headerlink" href="#issue-object-not-found-error" title="Permanent link">¶</a></h3>
|
|
<p><strong>Symptoms:</strong>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a>RPC call to luci.module-name/method failed with error -32000: Object not found
|
|
</code></pre></div></p>
|
|
<p><strong>Diagnosis:</strong>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a><span class="c1"># 1. Check RPCD script exists and is executable</span>
|
|
<a id="__codelineno-12-2" name="__codelineno-12-2" href="#__codelineno-12-2"></a>ls<span class="w"> </span>-la<span class="w"> </span>luci-app-module-name/root/usr/libexec/rpcd/
|
|
<a id="__codelineno-12-3" name="__codelineno-12-3" href="#__codelineno-12-3"></a>
|
|
<a id="__codelineno-12-4" name="__codelineno-12-4" href="#__codelineno-12-4"></a><span class="c1"># 2. Check RPCD script name matches ubus object</span>
|
|
<a id="__codelineno-12-5" name="__codelineno-12-5" href="#__codelineno-12-5"></a>grep<span class="w"> </span><span class="s2">"object:"</span><span class="w"> </span>luci-app-module-name/htdocs/luci-static/resources/module-name/api.js
|
|
<a id="__codelineno-12-6" name="__codelineno-12-6" href="#__codelineno-12-6"></a>
|
|
<a id="__codelineno-12-7" name="__codelineno-12-7" href="#__codelineno-12-7"></a><span class="c1"># 3. Test RPCD script manually</span>
|
|
<a id="__codelineno-12-8" name="__codelineno-12-8" href="#__codelineno-12-8"></a>ssh<span class="w"> </span>root@router<span class="w"> </span><span class="s2">"/usr/libexec/rpcd/luci.module-name list"</span>
|
|
<a id="__codelineno-12-9" name="__codelineno-12-9" href="#__codelineno-12-9"></a>
|
|
<a id="__codelineno-12-10" name="__codelineno-12-10" href="#__codelineno-12-10"></a><span class="c1"># 4. Check RPCD logs</span>
|
|
<a id="__codelineno-12-11" name="__codelineno-12-11" href="#__codelineno-12-11"></a>ssh<span class="w"> </span>root@router<span class="w"> </span><span class="s2">"logread | grep rpcd | tail -20"</span>
|
|
</code></pre></div></p>
|
|
<p><strong>Solutions:</strong>
|
|
1. Rename RPCD script to match ubus object name (must include <code>luci.</code> prefix)
|
|
2. Make script executable: <code>chmod +x luci.module-name</code>
|
|
3. Restart RPCD: <code>/etc/init.d/rpcd restart</code>
|
|
4. Reinstall package if deployed</p>
|
|
<h3 id="issue-view-not-loading-404">Issue: View Not Loading (404)<a class="headerlink" href="#issue-view-not-loading-404" title="Permanent link">¶</a></h3>
|
|
<p><strong>Symptoms:</strong>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a>HTTP error 404 while loading class file '/luci-static/resources/view/module-name/overview.js'
|
|
</code></pre></div></p>
|
|
<p><strong>Diagnosis:</strong>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a><span class="c1"># 1. Check menu path</span>
|
|
<a id="__codelineno-14-2" name="__codelineno-14-2" href="#__codelineno-14-2"></a>cat<span class="w"> </span>luci-app-module-name/root/usr/share/luci/menu.d/*.json<span class="w"> </span><span class="p">|</span><span class="w"> </span>grep<span class="w"> </span><span class="s2">"path"</span>
|
|
<a id="__codelineno-14-3" name="__codelineno-14-3" href="#__codelineno-14-3"></a>
|
|
<a id="__codelineno-14-4" name="__codelineno-14-4" href="#__codelineno-14-4"></a><span class="c1"># 2. Check view file exists</span>
|
|
<a id="__codelineno-14-5" name="__codelineno-14-5" href="#__codelineno-14-5"></a>ls<span class="w"> </span>-la<span class="w"> </span>luci-app-module-name/htdocs/luci-static/resources/view/
|
|
<a id="__codelineno-14-6" name="__codelineno-14-6" href="#__codelineno-14-6"></a>
|
|
<a id="__codelineno-14-7" name="__codelineno-14-7" href="#__codelineno-14-7"></a><span class="c1"># 3. Verify paths match</span>
|
|
<a id="__codelineno-14-8" name="__codelineno-14-8" href="#__codelineno-14-8"></a><span class="c1"># Menu: "path": "module-name/overview"</span>
|
|
<a id="__codelineno-14-9" name="__codelineno-14-9" href="#__codelineno-14-9"></a><span class="c1"># File: view/module-name/overview.js</span>
|
|
</code></pre></div></p>
|
|
<p><strong>Solutions:</strong>
|
|
1. Update menu path to match view file location
|
|
2. OR move view files to match menu path
|
|
3. Rebuild and redeploy package</p>
|
|
<h3 id="issue-css-not-applied">Issue: CSS Not Applied<a class="headerlink" href="#issue-css-not-applied" title="Permanent link">¶</a></h3>
|
|
<p><strong>Symptoms:</strong>
|
|
- Unstyled page
|
|
- Missing colors, fonts, or layout</p>
|
|
<p><strong>Diagnosis:</strong>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1" href="#__codelineno-15-1"></a><span class="c1"># 1. Check browser console for CSS 404 errors</span>
|
|
<a id="__codelineno-15-2" name="__codelineno-15-2" href="#__codelineno-15-2"></a><span class="c1"># (Open browser developer tools)</span>
|
|
<a id="__codelineno-15-3" name="__codelineno-15-3" href="#__codelineno-15-3"></a>
|
|
<a id="__codelineno-15-4" name="__codelineno-15-4" href="#__codelineno-15-4"></a><span class="c1"># 2. Verify CSS import in view file</span>
|
|
<a id="__codelineno-15-5" name="__codelineno-15-5" href="#__codelineno-15-5"></a>grep<span class="w"> </span><span class="s2">"stylesheet"</span><span class="w"> </span>luci-app-module-name/htdocs/luci-static/resources/view/*/overview.js
|
|
<a id="__codelineno-15-6" name="__codelineno-15-6" href="#__codelineno-15-6"></a>
|
|
<a id="__codelineno-15-7" name="__codelineno-15-7" href="#__codelineno-15-7"></a><span class="c1"># 3. Check CSS file exists</span>
|
|
<a id="__codelineno-15-8" name="__codelineno-15-8" href="#__codelineno-15-8"></a>ls<span class="w"> </span>-la<span class="w"> </span>luci-app-module-name/htdocs/luci-static/resources/module-name/dashboard.css
|
|
</code></pre></div></p>
|
|
<p><strong>Solutions:</strong>
|
|
1. Verify CSS import path: <code>L.resource('module-name/dashboard.css')</code>
|
|
2. Import common.css: <code>@import url('../system-hub/common.css');</code>
|
|
3. Check file permissions: <code>644</code> for CSS files
|
|
4. Clear browser cache (Ctrl+Shift+R)</p>
|
|
<h3 id="issue-data-not-updating">Issue: Data Not Updating<a class="headerlink" href="#issue-data-not-updating" title="Permanent link">¶</a></h3>
|
|
<p><strong>Symptoms:</strong>
|
|
- Dashboard shows stale data
|
|
- Auto-refresh not working</p>
|
|
<p><strong>Diagnosis:</strong>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-16-1" name="__codelineno-16-1" href="#__codelineno-16-1"></a><span class="c1"># 1. Check poll is registered</span>
|
|
<a id="__codelineno-16-2" name="__codelineno-16-2" href="#__codelineno-16-2"></a><span class="c1"># (Look for poll.add() in render() method)</span>
|
|
<a id="__codelineno-16-3" name="__codelineno-16-3" href="#__codelineno-16-3"></a>
|
|
<a id="__codelineno-16-4" name="__codelineno-16-4" href="#__codelineno-16-4"></a><span class="c1"># 2. Check API calls return Promises</span>
|
|
<a id="__codelineno-16-5" name="__codelineno-16-5" href="#__codelineno-16-5"></a><span class="c1"># (Verify methods return results from rpc.declare())</span>
|
|
<a id="__codelineno-16-6" name="__codelineno-16-6" href="#__codelineno-16-6"></a>
|
|
<a id="__codelineno-16-7" name="__codelineno-16-7" href="#__codelineno-16-7"></a><span class="c1"># 3. Test API methods directly</span>
|
|
<a id="__codelineno-16-8" name="__codelineno-16-8" href="#__codelineno-16-8"></a>ssh<span class="w"> </span>root@router<span class="w"> </span><span class="s2">"ubus call luci.module-name status"</span>
|
|
</code></pre></div></p>
|
|
<p><strong>Solutions:</strong>
|
|
1. Add poll.add() to render() method
|
|
2. Verify API calls in poll callback return Promises
|
|
3. Ensure updateDashboard() updates correct DOM elements
|
|
4. Check browser console for JavaScript errors</p>
|
|
<hr />
|
|
<h2 id="best-practices">Best Practices<a class="headerlink" href="#best-practices" title="Permanent link">¶</a></h2>
|
|
<h3 id="1-code-organization">1. Code Organization<a class="headerlink" href="#1-code-organization" title="Permanent link">¶</a></h3>
|
|
<p><strong>DO:</strong>
|
|
- Keep related code together (API methods, helpers)
|
|
- Use descriptive variable and function names
|
|
- Add comments for complex logic
|
|
- Break large functions into smaller helpers</p>
|
|
<p><strong>DON'T:</strong>
|
|
- Put all code in one massive function
|
|
- Use single-letter variable names (except in loops)
|
|
- Duplicate code - create helper functions instead
|
|
- Leave commented-out code in production</p>
|
|
<h3 id="2-error-handling">2. Error Handling<a class="headerlink" href="#2-error-handling" title="Permanent link">¶</a></h3>
|
|
<p><strong>DO:</strong>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-17-1" name="__codelineno-17-1" href="#__codelineno-17-1"></a><span class="nx">API</span><span class="p">.</span><span class="nx">getData</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-17-2" name="__codelineno-17-2" href="#__codelineno-17-2"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">result</span><span class="w"> </span><span class="o">&&</span><span class="w"> </span><span class="nx">result</span><span class="p">.</span><span class="nx">data</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-17-3" name="__codelineno-17-3" href="#__codelineno-17-3"></a><span class="w"> </span><span class="c1">// Process data</span>
|
|
<a id="__codelineno-17-4" name="__codelineno-17-4" href="#__codelineno-17-4"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-17-5" name="__codelineno-17-5" href="#__codelineno-17-5"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="s1">'No data returned'</span><span class="p">);</span>
|
|
<a id="__codelineno-17-6" name="__codelineno-17-6" href="#__codelineno-17-6"></a><span class="w"> </span><span class="c1">// Show empty state</span>
|
|
<a id="__codelineno-17-7" name="__codelineno-17-7" href="#__codelineno-17-7"></a><span class="w"> </span><span class="p">}</span>
|
|
<a id="__codelineno-17-8" name="__codelineno-17-8" href="#__codelineno-17-8"></a><span class="p">}).</span><span class="k">catch</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-17-9" name="__codelineno-17-9" href="#__codelineno-17-9"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'API error:'</span><span class="p">,</span><span class="w"> </span><span class="nx">error</span><span class="p">);</span>
|
|
<a id="__codelineno-17-10" name="__codelineno-17-10" href="#__codelineno-17-10"></a><span class="w"> </span><span class="nx">ui</span><span class="p">.</span><span class="nx">addNotification</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Failed to load data'</span><span class="p">),</span><span class="w"> </span><span class="s1">'error'</span><span class="p">);</span>
|
|
<a id="__codelineno-17-11" name="__codelineno-17-11" href="#__codelineno-17-11"></a><span class="p">});</span>
|
|
</code></pre></div></p>
|
|
<p><strong>DON'T:</strong>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-18-1" name="__codelineno-18-1" href="#__codelineno-18-1"></a><span class="nx">API</span><span class="p">.</span><span class="nx">getData</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
|
<a id="__codelineno-18-2" name="__codelineno-18-2" href="#__codelineno-18-2"></a><span class="w"> </span><span class="c1">// Process data without checking</span>
|
|
<a id="__codelineno-18-3" name="__codelineno-18-3" href="#__codelineno-18-3"></a><span class="w"> </span><span class="nx">result</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">});</span><span class="w"> </span><span class="c1">// Will crash if data is null</span>
|
|
<a id="__codelineno-18-4" name="__codelineno-18-4" href="#__codelineno-18-4"></a><span class="p">});</span>
|
|
</code></pre></div></p>
|
|
<h3 id="3-performance">3. Performance<a class="headerlink" href="#3-performance" title="Permanent link">¶</a></h3>
|
|
<p><strong>DO:</strong>
|
|
- Use poll.add() instead of setInterval for auto-refresh
|
|
- Update specific DOM elements instead of full re-render
|
|
- Debounce search inputs
|
|
- Lazy load data only when needed</p>
|
|
<p><strong>DON'T:</strong>
|
|
- Re-render entire view on every update
|
|
- Poll too frequently (<10 seconds)
|
|
- Load all data upfront
|
|
- Perform expensive operations in render()</p>
|
|
<h3 id="4-user-experience">4. User Experience<a class="headerlink" href="#4-user-experience" title="Permanent link">¶</a></h3>
|
|
<p><strong>DO:</strong>
|
|
- Show loading states (spinners, skeleton screens)
|
|
- Provide feedback for actions (success/error notifications)
|
|
- Confirm destructive actions (delete, restart)
|
|
- Use descriptive error messages</p>
|
|
<p><strong>DON'T:</strong>
|
|
- Leave users waiting without feedback
|
|
- Silent failures
|
|
- Generic error messages ("Error occurred")
|
|
- Allow destructive actions without confirmation</p>
|
|
<hr />
|
|
<h2 id="deployment-checklist">Deployment Checklist<a class="headerlink" href="#deployment-checklist" title="Permanent link">¶</a></h2>
|
|
<p>Before deploying to production:</p>
|
|
<ul class="task-list">
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> <strong>Code Quality</strong></li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> All validation checks pass</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> No JavaScript errors in console</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> No shell script errors (shellcheck)</li>
|
|
<li class="task-list-item">
|
|
<p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> All JSON files valid (jsonlint)</p>
|
|
</li>
|
|
<li class="task-list-item">
|
|
<p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> <strong>Functionality</strong></p>
|
|
</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> All tabs/pages load correctly</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> All actions work as expected</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Data displays correctly</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Auto-refresh updates data</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Forms validate input</li>
|
|
<li class="task-list-item">
|
|
<p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Error handling works</p>
|
|
</li>
|
|
<li class="task-list-item">
|
|
<p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> <strong>Design</strong></p>
|
|
</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Matches live demo visually</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Dark mode works</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Responsive on mobile</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Consistent with other modules</li>
|
|
<li class="task-list-item">
|
|
<p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> No layout issues</p>
|
|
</li>
|
|
<li class="task-list-item">
|
|
<p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> <strong>Performance</strong></p>
|
|
</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Page loads quickly (<2s)</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Auto-refresh doesn't freeze UI</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> No memory leaks</li>
|
|
<li class="task-list-item">
|
|
<p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Efficient data fetching</p>
|
|
</li>
|
|
<li class="task-list-item">
|
|
<p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> <strong>Security</strong></p>
|
|
</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> ACL permissions correct</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Input validation on frontend and backend</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> No hardcoded credentials</li>
|
|
<li class="task-list-item">
|
|
<p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Safe command execution (no injection)</p>
|
|
</li>
|
|
<li class="task-list-item">
|
|
<p><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> <strong>Documentation</strong></p>
|
|
</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> README.md updated</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Comments in complex code</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Menu entries have descriptions</li>
|
|
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> ACL entries have descriptions</li>
|
|
</ul>
|
|
<hr />
|
|
<h2 id="additional-resources">Additional Resources<a class="headerlink" href="#additional-resources" title="Permanent link">¶</a></h2>
|
|
<h3 id="documentation">Documentation<a class="headerlink" href="#documentation" title="Permanent link">¶</a></h3>
|
|
<ul>
|
|
<li><a href="https://openwrt.github.io/luci/api/">LuCI API Reference</a></li>
|
|
<li><a href="https://openwrt.org/docs/guide-developer/start">OpenWrt Developer Guide</a></li>
|
|
<li><a href="https://openwrt.org/docs/guide-user/base-system/uci">UCI Configuration</a></li>
|
|
<li><a href="https://openwrt.org/docs/techref/ubus">ubus Documentation</a></li>
|
|
</ul>
|
|
<h3 id="live-demo">Live Demo<a class="headerlink" href="#live-demo" title="Permanent link">¶</a></h3>
|
|
<ul>
|
|
<li><strong>Main Demo:</strong> https://secubox.cybermood.eu</li>
|
|
<li><strong>System Hub:</strong> https://secubox.cybermood.eu/system-hub</li>
|
|
<li><strong>CrowdSec:</strong> https://secubox.cybermood.eu/crowdsec</li>
|
|
<li><strong>WireGuard:</strong> https://secubox.cybermood.eu/wireguard</li>
|
|
</ul>
|
|
<h3 id="internal-documentation">Internal Documentation<a class="headerlink" href="#internal-documentation" title="Permanent link">¶</a></h3>
|
|
<ul>
|
|
<li><a href="../feature-regeneration-prompts/">FEATURE-REGENERATION-PROMPTS.md</a> - All module specifications</li>
|
|
<li><a href="../code-templates/">CODE-TEMPLATES.md</a> - Implementation templates</li>
|
|
<li><a href="../development-guidelines/">DEVELOPMENT-GUIDELINES.md</a> - Complete dev guide</li>
|
|
<li><a href="../quick-start/">QUICK-START.md</a> - Quick reference</li>
|
|
<li><a href="../claude/">CLAUDE.md</a> - Build system reference</li>
|
|
</ul>
|
|
<h3 id="tools">Tools<a class="headerlink" href="#tools" title="Permanent link">¶</a></h3>
|
|
<ul>
|
|
<li><a href="https://github.com/gkerma/secubox-openwrt/tree/master/secubox-tools/">SecuBox Tools</a> - Validation, build, deployment scripts</li>
|
|
<li><a href="https://github.com/gkerma/secubox-openwrt/tree/master/.github/workflows/">GitHub Actions</a> - CI/CD workflows</li>
|
|
<li><a href="https://github.com/gkerma/secubox-openwrt/tree/master/templates/">Templates</a> - Module templates</li>
|
|
</ul>
|
|
<hr />
|
|
<h2 id="getting-help">Getting Help<a class="headerlink" href="#getting-help" title="Permanent link">¶</a></h2>
|
|
<p>If you encounter issues not covered in this guide:</p>
|
|
<ol>
|
|
<li><strong>Check Existing Modules:</strong> Look at working modules for reference implementations</li>
|
|
<li><strong>Run Validation:</strong> <code>./secubox-tools/validate-modules.sh</code> for automated checks</li>
|
|
<li><strong>Check Logs:</strong> <code>logread | grep -i error</code> on the router</li>
|
|
<li><strong>Review Documentation:</strong> Read DEVELOPMENT-GUIDELINES.md for detailed explanations</li>
|
|
<li><strong>Contact Support:</strong> support@cybermind.fr</li>
|
|
</ol>
|
|
<hr />
|
|
<p><strong>Document Version:</strong> 1.0.0
|
|
<strong>Last Updated:</strong> 2025-12-27
|
|
<strong>Maintainer:</strong> CyberMind.fr
|
|
<strong>Live Demo:</strong> https://secubox.cybermood.eu</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
</div>
|
|
|
|
|
|
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
|
|
</div>
|
|
|
|
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
|
|
Back to top
|
|
</button>
|
|
|
|
</main>
|
|
|
|
<footer class="md-footer">
|
|
|
|
<div class="md-footer-meta md-typeset">
|
|
<div class="md-footer-meta__inner md-grid">
|
|
<div class="md-copyright">
|
|
|
|
|
|
Made with
|
|
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
|
|
Material for MkDocs
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="md-social">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/gkerma/secubox-openwrt" target="_blank" rel="noopener" title="github.com" class="md-social__link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://secubox.cybermood.eu" target="_blank" rel="noopener" title="secubox.cybermood.eu" class="md-social__link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M351.9 280H161c2.9 64.5 17.2 123.9 37.5 167.4 11.4 24.5 23.7 41.8 35.1 52.4 11.2 10.5 18.9 12.2 22.9 12.2s11.7-1.7 22.9-12.2c11.4-10.6 23.7-28 35.1-52.4 20.3-43.5 34.6-102.9 37.5-167.4zm-191-48h190.9c-2.8-64.5-17.1-123.9-37.4-167.4-11.4-24.4-23.7-41.8-35.1-52.4C268.1 1.7 260.4 0 256.4 0s-11.7 1.7-22.9 12.2c-11.4 10.6-23.7 28-35.1 52.4-20.3 43.5-34.6 102.9-37.5 167.4m-48 0c3.5-85.6 25.6-165.1 57.9-217.3C78.7 47.3 10.9 131.2 1.5 232zM1.5 280c9.4 100.8 77.2 184.7 169.3 217.3-32.3-52.2-54.4-131.7-57.9-217.3zm398.4 0c-3.5 85.6-25.6 165.1-57.9 217.3 92.1-32.7 159.9-116.5 169.3-217.3zm111.4-48C501.9 131.2 434.1 47.3 342 14.7c32.3 52.2 54.4 131.7 57.9 217.3z"/></svg>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
<div class="md-dialog" data-md-component="dialog">
|
|
<div class="md-dialog__inner md-typeset"></div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script id="__config" type="application/json">{"annotate": null, "base": "..", "features": ["navigation.instant", "navigation.tracking", "navigation.tabs", "navigation.tabs.sticky", "navigation.sections", "navigation.expand", "navigation.top", "search.suggest", "search.highlight", "content.code.copy", "content.code.annotate"], "search": "../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script>
|
|
|
|
|
|
<script src="../assets/javascripts/bundle.79ae519e.min.js"></script>
|
|
|
|
|
|
</body>
|
|
</html> |