mirror of
https://github.com/speatzle/nfsense.git
synced 2025-05-07 17:18:21 +00:00
add initial test client
This commit is contained in:
parent
0a51ba0beb
commit
fbc899fbe0
28 changed files with 4829 additions and 0 deletions
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
}
|
||||
7
.vscode/settings.json
vendored
Normal file
7
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
}
|
||||
}
|
||||
26
client/.gitignore
vendored
Normal file
26
client/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
src/generated
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
!.vscode/settings.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
18
client/README.md
Normal file
18
client/README.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
||||
## Type Support For `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
||||
|
||||
1. Disable the built-in TypeScript Extension
|
||||
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
||||
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
||||
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
||||
15
client/index.html
Normal file
15
client/index.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="A web-based configuration tool for netfilter tables">
|
||||
<meta name="theme-color" content="#1A237E"/>
|
||||
<link rel="shortcut icon" href="favicon.svg" type="image/svg+xml">
|
||||
<title>nfSense</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
90
client/package.json
Normal file
90
client/package.json
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
{
|
||||
"name": "nfsm",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@intlify/unplugin-vue-i18n": "^0.8.2",
|
||||
"@open-rpc/client-js": "^1.8.1",
|
||||
"@vueuse/core": "^9.13.0",
|
||||
"@vueuse/head": "^1.1.15",
|
||||
"events": "^3.3.0",
|
||||
"focus-trap": "^7.3.1",
|
||||
"focus-trap-vue": "^4.0.2",
|
||||
"markdown-it-link-attributes": "^4.0.1",
|
||||
"markdown-it-shiki": "^0.8.0",
|
||||
"vue": "^3.2.45",
|
||||
"vue-i18n": "9",
|
||||
"vue-router": "4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/json": "^2.2.30",
|
||||
"@types/events": "^3.0.0",
|
||||
"@types/markdown-it-link-attributes": "^3.0.1",
|
||||
"@typescript-eslint/parser": "^5.54.1",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vue-macros/reactivity-transform": "^0.2.4",
|
||||
"@vue-macros/volar": "^0.8.4",
|
||||
"eslint": "^8.35.0",
|
||||
"eslint-plugin-vue": "^9.9.0",
|
||||
"typescript": "^4.9.3",
|
||||
"unplugin-auto-import": "^0.15.0",
|
||||
"unplugin-icons": "^0.15.3",
|
||||
"unplugin-vue-components": "^0.24.0",
|
||||
"unplugin-vue-macros": "^1.9.1",
|
||||
"vite": "^4.1.0",
|
||||
"vite-plugin-pages": "^0.28.0",
|
||||
"vite-plugin-vue-markdown": "^0.22.4",
|
||||
"vue-tsc": "^1.0.24"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"parser": "vue-eslint-parser",
|
||||
"parserOptions": {
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": "**/*.+(ts|vue)"
|
||||
}
|
||||
],
|
||||
"extends": [
|
||||
"plugin:vue/vue3-strongly-recommended"
|
||||
],
|
||||
"plugins": [
|
||||
"eslint-plugin-vue"
|
||||
],
|
||||
"rules": {
|
||||
"semi": [
|
||||
"error",
|
||||
"always"
|
||||
],
|
||||
"comma-dangle": [
|
||||
"error",
|
||||
"always-multiline"
|
||||
],
|
||||
"no-trailing-spaces": [
|
||||
"error"
|
||||
],
|
||||
"vue/multi-word-component-names": "off",
|
||||
"vue/html-closing-bracket-spacing": "off",
|
||||
"vue/html-self-closing": "off",
|
||||
"vue/first-attribute-linebreak": "off",
|
||||
"vue/max-attributes-per-line": "off",
|
||||
"vue/html-closing-bracket-newline": "off",
|
||||
"vue/singleline-html-element-content-newline": "off",
|
||||
"indent": [
|
||||
"error",
|
||||
2
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
3969
client/pnpm-lock.yaml
generated
Normal file
3969
client/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
1
client/public/favicon.svg
Normal file
1
client/public/favicon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
133
client/src/App.vue
Normal file
133
client/src/App.vue
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<script setup lang="ts">
|
||||
import IDashboard from '~icons/ri/dashboard-2-line';
|
||||
import IRule from '~icons/material-symbols/rule-folder-outline-sharp';
|
||||
import IAddress from '~icons/eos-icons/ip';
|
||||
|
||||
|
||||
|
||||
enum NavState { Open, Reduced, Collapsed };
|
||||
const NavStateCount = 3;
|
||||
let navState = $ref(NavState.Open);
|
||||
let loggedOut = $ref(false);
|
||||
|
||||
const navRoutes = {
|
||||
"/": { icon: IDashboard, caption: "Dashboard" },
|
||||
"/rules": { icon: IRule, caption: "Rules" },
|
||||
"/addresses": { icon: IAddress, caption: "Addresses" },
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!loggedOut" :class="{
|
||||
'layout': 1,
|
||||
'nav-state-open': navState === NavState.Open,
|
||||
'nav-state-collapsed': navState === NavState.Collapsed,
|
||||
'nav-state-reduced': navState === NavState.Reduced,
|
||||
}">
|
||||
<button class="nav-head" @click="() => navState = (navState + 1) % NavStateCount">
|
||||
nfSense
|
||||
</button>
|
||||
|
||||
<Portal from="page-header" class="page-header pad gap"/>
|
||||
|
||||
<div class="nav-body">
|
||||
<template v-for="(options, route) in navRoutes" :key="route">
|
||||
<router-link :to="route" class="button">
|
||||
<component :is="options.icon"/>
|
||||
{{ options.caption }}
|
||||
</router-link>
|
||||
</template>
|
||||
<div class="flex-grow"/>
|
||||
<div class="flex-row">
|
||||
<router-link class="button" to="/help"><i-material-symbols-help-outline/></router-link>
|
||||
<router-link class="button" to="/settings"><i-material-symbols-settings/></router-link>
|
||||
<button @click="() => loggedOut = true"><i-material-symbols-logout/></button>
|
||||
</div>
|
||||
</div>
|
||||
<router-view v-slot="{ Component, route }" v-if="!loggedOut">
|
||||
<Transition name="fade">
|
||||
<component :is="Component" :key="{route}" class="page-content pad gap"/>
|
||||
</Transition>
|
||||
</router-view>
|
||||
</div>
|
||||
|
||||
<Transition name="fade">
|
||||
<div class="login" v-if="loggedOut">
|
||||
<FocusTrap>
|
||||
<form @submit="$event => $event.preventDefault()">
|
||||
<h1>nfSense Login</h1>
|
||||
<label for="username" v-text="'Username'"/>
|
||||
<input name="username"/>
|
||||
<label for="password" v-text="'Password'" type="password"/>
|
||||
<input name="password"/>
|
||||
|
||||
<button @click="() => loggedOut = false">Login</button>
|
||||
</form>
|
||||
</FocusTrap>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Basic Layout */
|
||||
.layout, .login {
|
||||
position: absolute;
|
||||
left: 0px; right: 0px; top: 0px; bottom: 0px;
|
||||
|
||||
display: grid;
|
||||
background-color: var(--cl-bg);
|
||||
}
|
||||
.layout {
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
.login { place-items: center; }
|
||||
|
||||
/* Navigation */
|
||||
.nav-head, .nav-body { background: var(--cl-bg-low); }
|
||||
.nav-head {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nav-body .button { justify-content: left; }
|
||||
.nav-body .flex-row * { flex: 1; }
|
||||
|
||||
/* Page */
|
||||
.page-header {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
.page-header button svg {
|
||||
margin: -0.25rem;
|
||||
}
|
||||
.page-content {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: var(--cl-bg);
|
||||
}
|
||||
|
||||
/* Nav-Body-Collapsing */
|
||||
.nav-body, .page-content {
|
||||
position: relative;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
transition: left 0.2s ease-out, width 0.2s ease-out;
|
||||
--reduced-width: 2.5rem;
|
||||
}
|
||||
.nav-state-reduced .nav-body { width: calc(0% + var(--reduced-width)); }
|
||||
.nav-state-reduced .page-content {
|
||||
left: calc(calc(-100vw + 100%) + var(--reduced-width));
|
||||
width: calc(calc(0% + 100vw) - var(--reduced-width));
|
||||
}
|
||||
.nav-state-collapsed .nav-body { width: 0%; }
|
||||
.nav-state-collapsed .page-content {
|
||||
left: calc(-100vw + 100%);
|
||||
width: calc(0% + 100vw);
|
||||
}
|
||||
:not(.nav-state-open) > .nav-body > .flex-row {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
</style>
|
||||
14
client/src/api.ts
Normal file
14
client/src/api.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { RequestManager, HTTPTransport, WebSocketTransport, Client } from "@open-rpc/client-js";
|
||||
const httpTransport = new HTTPTransport("http://"+ window.location.host +"/api");
|
||||
const socktransport = new WebSocketTransport("ws://"+ window.location.host + "/ws/api");
|
||||
const manager = new RequestManager([socktransport, httpTransport], () => crypto.randomUUID());
|
||||
const client = new Client(manager);
|
||||
|
||||
export async function apiCall(method: string, params: Record<string, any>){
|
||||
try {
|
||||
const result = await client.request({method, params});
|
||||
console.debug("api call result", result);
|
||||
} catch (ex){
|
||||
console.debug("api call epic fail", ex);
|
||||
}
|
||||
}
|
||||
55
client/src/components/NiceTable.vue
Normal file
55
client/src/components/NiceTable.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineModel<{
|
||||
columns?: Record<string, string>,
|
||||
data?: Record<string, any>[],
|
||||
sortSelf?: boolean,
|
||||
sortBy?: string,
|
||||
sortDesc?: boolean,
|
||||
}>();
|
||||
let { columns, data, sortSelf, sortBy, sortDesc } = $(props);
|
||||
|
||||
const displayData = $computed(() => (sortSelf && sortBy !== '')
|
||||
? data?.sort((a, b) => {
|
||||
let result;
|
||||
if (a[sortBy ?? ''] > b[sortBy ?? '']) result = 1;
|
||||
else if (a[sortBy ?? ''] === b[sortBy ?? '']) result = 0;
|
||||
else result = -1;
|
||||
|
||||
if (sortDesc) return -result;
|
||||
return result;
|
||||
})
|
||||
: data);
|
||||
|
||||
function toggleSorting(columnName: string) {
|
||||
if (columnName === sortBy) sortDesc = !sortDesc;
|
||||
else {
|
||||
sortDesc = false;
|
||||
sortBy = columnName;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="[name, heading] in Object.entries(columns ?? {})" :key="name" @click="toggleSorting(name)">
|
||||
<div class="flex-row">
|
||||
{{ heading }}
|
||||
<i-mdi-arrow-down v-if="name === sortBy && sortDesc"/>
|
||||
<i-mdi-arrow-up v-else-if="name === sortBy"/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- eslint-disable-next-line vue/require-v-for-key -->
|
||||
<tr v-for="row of displayData">
|
||||
<td v-for="cell in row" :key="cell" v-text="cell"/>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
16
client/src/components/meta/PageHeader.vue
Normal file
16
client/src/components/meta/PageHeader.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
const { title, noSpacer } = $(withDefaults(defineProps<{
|
||||
title?: string,
|
||||
noSpacer?: boolean,
|
||||
}>(), {
|
||||
title: "",
|
||||
noSpacer: false,
|
||||
}));
|
||||
watchEffect(() => useTitle(`${title} - nfSense`));
|
||||
</script>
|
||||
<template>
|
||||
<Portal to="page-header">
|
||||
<h1 v-if="title !== ''" v-text="title" :class="{'flex-grow': !noSpacer}"/>
|
||||
<slot/>
|
||||
</Portal>
|
||||
</template>
|
||||
25
client/src/components/meta/Portal.vue
Normal file
25
client/src/components/meta/Portal.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script lang="ts">
|
||||
let activeTargets = $ref<string[]>([]);
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = $defineProps<{
|
||||
from?: string,
|
||||
to?: string,
|
||||
}>();
|
||||
const { from, to } = $(props);
|
||||
|
||||
if (from) {
|
||||
onMounted(() => activeTargets.push(from));
|
||||
onBeforeUnmount(() => activeTargets.splice(activeTargets.indexOf(from), 1));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="from" :id="'portal-' + from">
|
||||
<slot/>
|
||||
</div>
|
||||
<Teleport v-else-if="to && activeTargets.includes(to)" :to="'#portal-' + to">
|
||||
<slot/>
|
||||
</Teleport>
|
||||
</template>
|
||||
6
client/src/global-styles/atomic.css
Normal file
6
client/src/global-styles/atomic.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/* Atomic Styles */
|
||||
.text-select { user-select: text; }
|
||||
.pad { padding: 0.5rem; }
|
||||
.gap { gap: 0.5rem; }
|
||||
.flex-grow { flex-grow: 1; }
|
||||
.flex-row { flex-direction: row; }
|
||||
34
client/src/global-styles/colors.css
Normal file
34
client/src/global-styles/colors.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/* Coloring */
|
||||
:root {
|
||||
/* Color Definitions */
|
||||
--cl-md-50: #FAFAFA;
|
||||
--cl-md-100: #F5F5F5;
|
||||
--cl-md-200: #EEEEEE;
|
||||
--cl-md-300: #E0E0E0;
|
||||
--cl-md-400: #BDBDBD;
|
||||
--cl-md-500: #9E9E9E;
|
||||
--cl-md-600: #757575;
|
||||
--cl-md-700: #616161;
|
||||
--cl-md-800: #424242;
|
||||
--cl-md-900: #212121;
|
||||
|
||||
/* Color Uses */
|
||||
--cl-bg: var(--cl-md-900);
|
||||
--cl-bg-mid: var(--cl-md-800);
|
||||
--cl-bg-low: var(--cl-md-700);
|
||||
--cl-fg: var(--cl-md-100);
|
||||
|
||||
/* Apply as default */
|
||||
background-color: var(--cl-bg);
|
||||
color: var(--cl-fg);
|
||||
}
|
||||
|
||||
/* Changes for light mode */
|
||||
@media screen and (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--cl-bg: var(--cl-md-100);
|
||||
--cl-bg-mid: var(--cl-md-200);
|
||||
--cl-bg-low: var(--cl-md-300);
|
||||
--cl-fg: var(--cl-md-900);
|
||||
}
|
||||
}
|
||||
75
client/src/global-styles/components.css
Normal file
75
client/src/global-styles/components.css
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
/* CSS Components */
|
||||
button, .button {
|
||||
all: unset;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
overflow: hidden;
|
||||
vertical-align: center;
|
||||
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
|
||||
background-color: var(--cl-bg-low);
|
||||
}
|
||||
.button > svg, button > svg {
|
||||
min-width: 1.5rem;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
.button:hover, button:hover {
|
||||
background-color: var(--cl-bg-mid);
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
background-color: var(--cl-bg-low);
|
||||
}
|
||||
form > :is(button, .button, h1) {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
form button, form .button {
|
||||
background-color: var(--cl-bg);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
thead {
|
||||
background-color: var(--cl-bg-low);
|
||||
}
|
||||
th:hover {
|
||||
background-color: var(--cl-bg-mid);
|
||||
cursor: pointer;
|
||||
}
|
||||
th, td {
|
||||
padding: 0.5rem;
|
||||
border: 0.125rem solid var(--cl-bg-mid);
|
||||
}
|
||||
th > *{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
th svg {
|
||||
height: 1rem;
|
||||
}
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--cl-bg-mid)
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: block;
|
||||
padding: 0.4rem;
|
||||
background-color: var(--cl-bg-low);
|
||||
color: inherit;
|
||||
border: 1px solid var(--cl-fg);
|
||||
}
|
||||
33
client/src/global-styles/mlfe.css
Normal file
33
client/src/global-styles/mlfe.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/* MLFE: Marginless FlexEverything (A CSS Reset for creating Layouts) */
|
||||
:root {
|
||||
font-family: sans-serif;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
user-select: inherit;
|
||||
color: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div, ul, ol, nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
h1 { font-size: calc(1rem + calc(1rem / 1))}
|
||||
h2 { font-size: calc(1rem + calc(1rem / 2))}
|
||||
h3 { font-size: calc(1rem + calc(1rem / 3))}
|
||||
h4 { font-size: calc(1rem + calc(1rem / 4))}
|
||||
h5 { font-size: calc(1rem + calc(1rem / 5))}
|
||||
h6 { font-size: calc(1rem + calc(1rem / 6))}
|
||||
|
||||
ul, ol {
|
||||
gap: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
6
client/src/global-styles/transitions.css
Normal file
6
client/src/global-styles/transitions.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.2s ease-out !important;
|
||||
}
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
3
client/src/locales/en-US.json
Normal file
3
client/src/locales/en-US.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"test": "This is a test translation."
|
||||
}
|
||||
22
client/src/main.ts
Normal file
22
client/src/main.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import './global-styles/atomic.css';
|
||||
import './global-styles/components.css';
|
||||
import './global-styles/colors.css';
|
||||
import './global-styles/mlfe.css';
|
||||
import './global-styles/transitions.css';
|
||||
|
||||
import App from './App.vue';
|
||||
import { createHead } from '@vueuse/head';
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import routes from '~pages';
|
||||
|
||||
const app = createApp(App);
|
||||
const head = createHead();
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
app.use(router);
|
||||
app.use(head);
|
||||
|
||||
app.mount('#app');
|
||||
15
client/src/pages/[entity]/[id].vue
Normal file
15
client/src/pages/[entity]/[id].vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
const props = $defineProps<{entity: string, id: string}>();
|
||||
const { entity, id } = $(props);
|
||||
|
||||
const pageTypes: { [key: string]: any } = {
|
||||
"rules": { title: "Rules" },
|
||||
"addresses": { title: "Addresses"},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader :title="pageTypes[entity].title"/>
|
||||
{{ entity }} {{ id }}
|
||||
</div>
|
||||
</template>
|
||||
90
client/src/pages/[entity]/index.vue
Normal file
90
client/src/pages/[entity]/index.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<script setup lang="ts">
|
||||
const props = $defineProps<{entity: string}>();
|
||||
const { entity } = $(props);
|
||||
|
||||
const pageTypes: { [key: string]: any } = {
|
||||
"rules": { title: "Rules" },
|
||||
"addresses": { title: "Addresses"},
|
||||
};
|
||||
|
||||
let searchTerm = $ref("");
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader :title="pageTypes[entity].title">
|
||||
<input class="search-bar" placeholder="Search..." v-model="searchTerm"/>
|
||||
<button>
|
||||
<i-material-symbols-add/>
|
||||
</button>
|
||||
</PageHeader>
|
||||
<NiceTable :columns="{fname: 'First Name', lname: 'Last Name'}" :sort-self="true" :data="[
|
||||
{
|
||||
fname: 'Haynes',
|
||||
lname: 'Chavez'
|
||||
}, {
|
||||
fname: 'Brennan',
|
||||
lname: 'Bradley'
|
||||
}, {
|
||||
fname: 'Blanchard',
|
||||
lname: 'Thornton'
|
||||
}, {
|
||||
fname: 'Benjamin',
|
||||
lname: 'Nash'
|
||||
}, {
|
||||
fname: 'Jan',
|
||||
lname: 'Bradford'
|
||||
}, {
|
||||
fname: 'Zelma',
|
||||
lname: 'Spears'
|
||||
}, {
|
||||
fname: 'Freeman',
|
||||
lname: 'Page'
|
||||
}, {
|
||||
fname: 'Wilson',
|
||||
lname: 'Carlson'
|
||||
}, {
|
||||
fname: 'Lewis',
|
||||
lname: 'Fuentes'
|
||||
}, {
|
||||
fname: 'Vega',
|
||||
lname: 'Villarreal'
|
||||
}, {
|
||||
fname: 'Carolyn',
|
||||
lname: 'Cardenas'
|
||||
}, {
|
||||
fname: 'Angie',
|
||||
lname: 'Adams'
|
||||
}, {
|
||||
fname: 'Richards',
|
||||
lname: 'Leon'
|
||||
}, {
|
||||
fname: 'Velma',
|
||||
lname: 'Fields'
|
||||
}, {
|
||||
fname: 'Witt',
|
||||
lname: 'Lowe'
|
||||
}, {
|
||||
fname: 'Waters',
|
||||
lname: 'Leblanc'
|
||||
}, {
|
||||
fname: 'Henry',
|
||||
lname: 'Lloyd'
|
||||
}, {
|
||||
fname: 'Boone',
|
||||
lname: 'Greer'
|
||||
}, {
|
||||
fname: 'Willis',
|
||||
lname: 'Stark'
|
||||
}, {
|
||||
fname: 'Dickson',
|
||||
lname: 'Spencer'
|
||||
}
|
||||
].filter(x => (`${x.fname} ${x.lname}`).toLowerCase().includes(searchTerm.toLowerCase()))"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
4
client/src/pages/help/index.md
Normal file
4
client/src/pages/help/index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<PageHeader title="Help"/>
|
||||
|
||||
## About
|
||||
nfSense is a web-based configuration tool for nfTables. It works by storing its configuration in a .json file, and applies it by transforming it into a proper nfTables config.
|
||||
18
client/src/pages/index.vue
Normal file
18
client/src/pages/index.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import { apiCall } from "../api";
|
||||
|
||||
async function doShit(){
|
||||
apiCall("Firewall.GetForwardRules", {});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader title="Dashboard">
|
||||
<button @click="doShit">Example Buttons</button>
|
||||
</PageHeader>
|
||||
|
||||
This is the main page, currently written in markdown because that's *pog*.
|
||||
</div>
|
||||
</template>
|
||||
7
client/src/vite-env.d.ts
vendored
Normal file
7
client/src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/// <reference types="vite/client" />
|
||||
/// <reference types="unplugin-icons/types/vue" />
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue';
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
34
client/tsconfig.json
Normal file
34
client/tsconfig.json
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"module": "ESNext",
|
||||
"target": "ESNext",
|
||||
"lib": ["DOM", "ESNext"],
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "preserve",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"noUnusedLocals": true,
|
||||
"strictNullChecks": true,
|
||||
"allowJs": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"types": [
|
||||
"vite/client",
|
||||
"vue/ref-macros",
|
||||
"vite-plugin-pages/client",
|
||||
"unplugin-vue-macros/macros-global"
|
||||
],
|
||||
"paths": {
|
||||
"~/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"vueCompilerOptions": {
|
||||
"plugins": [
|
||||
"@vue-macros/volar/define-model",
|
||||
"@vue-macros/volar/define-slots"
|
||||
]
|
||||
},
|
||||
"exclude": ["dist", "node_modules", "cypress"]
|
||||
}
|
||||
9
client/tsconfig.node.json
Normal file
9
client/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
101
client/vite.config.ts
Normal file
101
client/vite.config.ts
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import Vue from '@vitejs/plugin-vue';
|
||||
import Pages from 'vite-plugin-pages';
|
||||
import Markdown from 'vite-plugin-vue-markdown';
|
||||
|
||||
import Components from 'unplugin-vue-components/vite';
|
||||
import Icons from 'unplugin-icons/vite';
|
||||
import IconsResolver from 'unplugin-icons/resolver';
|
||||
import I18N from '@intlify/unplugin-vue-i18n/vite';
|
||||
import Macros from 'unplugin-vue-macros/vite';
|
||||
import AutoImport from 'unplugin-auto-import/vite';
|
||||
|
||||
import Shiki from 'markdown-it-shiki';
|
||||
import LinkAttributes from 'markdown-it-link-attributes';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
server: {
|
||||
"proxy": {
|
||||
"/api": "http://localhost:8080",
|
||||
"/ws": {
|
||||
target: "ws://localhost:8080",
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
Macros({
|
||||
plugins: {
|
||||
vue: Vue({
|
||||
include: [/\.vue$/, /\.md$/],
|
||||
reactivityTransform: true,
|
||||
}),
|
||||
},
|
||||
}),
|
||||
Pages({
|
||||
extensions: ['vue', 'md'],
|
||||
}),
|
||||
Markdown({
|
||||
wrapperClasses: 'prose prose-sm m-auto text-left',
|
||||
headEnabled: true,
|
||||
markdownItSetup(md) {
|
||||
md.use(Shiki, {
|
||||
theme: {
|
||||
light: 'vitesse-light',
|
||||
dark: 'vitesse-dark',
|
||||
},
|
||||
});
|
||||
md.use(LinkAttributes, {
|
||||
matcher: (link: string) => /^https?:\/\//.test(link),
|
||||
attrs: {
|
||||
target: '_blank',
|
||||
rel: 'noopener',
|
||||
},
|
||||
});
|
||||
},
|
||||
}),
|
||||
Components({
|
||||
extensions: ['vue', 'md'],
|
||||
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
|
||||
dts: 'src/generated/components.d.ts',
|
||||
resolvers: [
|
||||
IconsResolver(),
|
||||
(componentName) => {
|
||||
if (componentName === 'FocusTrap')
|
||||
return { name: 'FocusTrap', from: 'focus-trap-vue' };
|
||||
},
|
||||
],
|
||||
types: [{
|
||||
from: 'focus-trap-vue',
|
||||
names: ['FocusTrap'],
|
||||
}],
|
||||
}),
|
||||
Icons({
|
||||
}),
|
||||
I18N({
|
||||
runtimeOnly: true,
|
||||
compositionOnly: true,
|
||||
fullInstall: true,
|
||||
include: ['src/locales'],
|
||||
}),
|
||||
AutoImport({
|
||||
include: [
|
||||
/\.[tj]sx?$/,
|
||||
/\.vue$/, /\.vue\?vue/,
|
||||
/\.md$/,
|
||||
],
|
||||
imports: [
|
||||
'vue',
|
||||
'vue-router',
|
||||
'vue-i18n',
|
||||
'vue/macros',
|
||||
'@vueuse/core',
|
||||
'@vueuse/head',
|
||||
],
|
||||
dts: 'src/generated/auto-imports.d.ts',
|
||||
dirs: ['src/composables'],
|
||||
vueTemplate: true,
|
||||
}),
|
||||
],
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue