Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-10-03 07:46:18 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

For now..

Browse Source
This commit is contained in:
Donald Zou
2025-08-17 23:47:21 +08:00
parent 86bb847374
commit ba85879151
8 changed files with 278 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/static/app/package-lock.json generated
View File

@@ -17,6 +17,7 @@
"bootstrap": "^5.3.2",
"bootstrap-icons": "^1.11.3",
"cidr-tools": "^11.0.3",
"css-color-converter": "^2.0.0",
"dayjs": "^1.11.12",
"electron-builder": "^26.0.12",
"fuse.js": "^7.0.0",
@@ -2950,6 +2951,28 @@
"node": ">= 8"
}
},
"node_modules/css-color-converter": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/css-color-converter/-/css-color-converter-2.0.0.tgz",
"integrity": "sha512-oLIG2soZz3wcC3aAl/7Us5RS8Hvvc6I8G8LniF/qfMmrm7fIKQ8RIDDRZeKyGL2SrWfNqYspuLShbnjBMVWm8g==",
"license": "MIT",
"dependencies": {
"color-convert": "^0.5.2",
"color-name": "^1.1.4",
"css-unit-converter": "^1.1.2"
}
},
"node_modules/css-color-converter/node_modules/color-convert": {
"version": "0.5.3",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-0.5.3.tgz",
"integrity": "sha512-RwBeO/B/vZR3dfKL1ye/vx8MHZ40ugzpyfeVG5GsiuGnrlMWe2o8wxBbLCpw9CsxV+wHuzYlCiWnybrIA0ling=="
},
"node_modules/css-unit-converter": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
"license": "MIT"
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",

1
src/static/app/package.json
View File

@@ -21,6 +21,7 @@
"bootstrap": "^5.3.2",
"bootstrap-icons": "^1.11.3",
"cidr-tools": "^11.0.3",
"css-color-converter": "^2.0.0",
"dayjs": "^1.11.12",
"electron-builder": "^26.0.12",
"fuse.js": "^7.0.0",

10
src/static/app/src/components/configurationComponents/peer.vue
View File

@@ -6,11 +6,14 @@ import PeerSettingsDropdown from "@/components/configurationComponents/peerSetti
import LocaleText from "@/components/text/localeText.vue";
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
import {GetLocale} from "@/utilities/locale.js";
import PeerTagBadge from "@/components/configurationComponents/peerTagBadge.vue";
export default {
name: "peer",
methods: {GetLocale},
components: {LocaleText, PeerSettingsDropdown},
components: {
PeerTagBadge, LocaleText, PeerSettingsDropdown
},
props: {
Peer: Object
},
@@ -100,7 +103,10 @@ export default {
<samp>{{Peer.allowed_ip}}</samp>
</small>
</div>
<div class="d-flex align-items-end ms-auto">
<div class="d-flex align-items-center gap-1"
:class="{'ms-auto': dashboardStore.Configuration.Server.dashboard_peer_list_display === 'list'}"
>
<PeerTagBadge BackgroundColor="#ff3838" GroupName="IDK" Icon="bi-pencil"></PeerTagBadge>
<div class="ms-auto px-2 rounded-3 subMenuBtn"
:class="{active: this.subMenuOpened}"
>

11
src/static/app/src/components/configurationComponents/peerSearch.vue
View File

@@ -4,11 +4,12 @@ import {fetchGet, fetchPost} from "@/utilities/fetch.js";
import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
import LocaleText from "@/components/text/localeText.vue";
import {GetLocale} from "@/utilities/locale.js";
import PeerTag from "@/components/configurationComponents/peerTag.vue";
export default {
name: "peerSearch",
components: {LocaleText},
components: {PeerTag, LocaleText},
setup(){
const store = DashboardConfigurationStore();
const wireguardConfigurationStore = WireguardConfigurationsStore()
@@ -156,6 +157,14 @@ export default {
</li>
</ul>
</div>
<div class="position-relative">
<button
class="btn btn-sm w-100 text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle position-relative">
<i class="bi me-2 bi-hash"></i>
<LocaleText t="Tags"></LocaleText>
</button>
<PeerTag :configuration="configuration"></PeerTag>
</div>
<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle ms-lg-auto"
@click="this.$emit('search')">

156
src/static/app/src/components/configurationComponents/peerTag.vue Normal file
View File

@@ -0,0 +1,156 @@
<script setup lang="ts">
import {reactive, ref} from "vue";
import LocaleText from "@/components/text/localeText.vue";
const predefinedColors = {
"blue-100": "#cfe2ff",
"blue-200": "#9ec5fe",
"blue-300": "#6ea8fe",
"blue-400": "#3d8bfd",
"blue-500": "#0d6efd",
"blue-600": "#0a58ca",
"blue-700": "#084298",
"blue-800": "#052c65",
"blue-900": "#031633",
"indigo-100": "#e0cffc",
"indigo-200": "#c29ffa",
"indigo-300": "#a370f7",
"indigo-400": "#8540f5",
"indigo-500": "#6610f2",
"indigo-600": "#520dc2",
"indigo-700": "#3d0a91",
"indigo-800": "#290661",
"indigo-900": "#140330",
"purple-100": "#e2d9f3",
"purple-200": "#c5b3e6",
"purple-300": "#a98eda",
"purple-400": "#8c68cd",
"purple-500": "#6f42c1",
"purple-600": "#59359a",
"purple-700": "#432874",
"purple-800": "#2c1a4d",
"purple-900": "#160d27",
"pink-100": "#f7d6e6",
"pink-200": "#efadce",
"pink-300": "#e685b5",
"pink-400": "#de5c9d",
"pink-500": "#d63384",
"pink-600": "#ab296a",
"pink-700": "#801f4f",
"pink-800": "#561435",
"pink-900": "#2b0a1a",
"red-100": "#f8d7da",
"red-200": "#f1aeb5",
"red-300": "#ea868f",
"red-400": "#e35d6a",
"red-500": "#dc3545",
"red-600": "#b02a37",
"red-700": "#842029",
"red-800": "#58151c",
"red-900": "#2c0b0e",
"orange-100": "#ffe5d0",
"orange-200": "#fecba1",
"orange-300": "#feb272",
"orange-400": "#fd9843",
"orange-500": "#fd7e14",
"orange-600": "#ca6510",
"orange-700": "#984c0c",
"orange-800": "#653208",
"orange-900": "#331904",
"yellow-100": "#fff3cd",
"yellow-200": "#ffe69c",
"yellow-300": "#ffda6a",
"yellow-400": "#ffcd39",
"yellow-500": "#ffc107",
"yellow-600": "#cc9a06",
"yellow-700": "#997404",
"yellow-800": "#664d03",
"yellow-900": "#332701",
"green-100": "#d1e7dd",
"green-200": "#a3cfbb",
"green-300": "#75b798",
"green-400": "#479f76",
"green-500": "#198754",
"green-600": "#146c43",
"green-700": "#0f5132",
"green-800": "#0a3622",
"green-900": "#051b11",
"teal-100": "#d2f4ea",
"teal-200": "#a6e9d5",
"teal-300": "#79dfc1",
"teal-400": "#4dd4ac",
"teal-500": "#20c997",
"teal-600": "#1aa179",
"teal-700": "#13795b",
"teal-800": "#0d503c",
"teal-900": "#06281e",
"cyan-100": "#cff4fc",
"cyan-200": "#9eeaf9",
"cyan-300": "#6edff6",
"cyan-400": "#3dd5f3",
"cyan-500": "#0dcaf0",
"cyan-600": "#0aa2c0",
"cyan-700": "#087990",
"cyan-800": "#055160",
"cyan-900": "#032830",
"gray-100": "#f8f9fa",
"gray-200": "#e9ecef",
"gray-300": "#dee2e6",
"gray-400": "#ced4da",
"gray-500": "#adb5bd",
"gray-600": "#6c757d",
"gray-700": "#495057",
"gray-800": "#343a40",
"gray-900": "#212529",
"white": "#fff",
"black": "#000",
}
const props = defineProps(['configuration'])
const groups = reactive({...props.configuration.Info.PeerGroups})
import { v4 } from "uuid"
import PeerTagSetting from "@/components/configurationComponents/peerTagComponents/peerTagSetting.vue";
const addGroup = () => {
groups[v4().toString()] = {
GroupName: "",
Description: "",
BackgroundColor: randomColor(),
Icon: "",
Peers: []
}
}
const randomColor = () => {
const keys = Object.keys(predefinedColors);
const n = Math.floor(Math.random() * keys.length) + 1
return predefinedColors[keys[n]]
}
</script>
<template>
<div class="card shadow" id="peerTag">
<div class="card-body" >
<small v-if="Object.keys(groups).length === 0">
<LocaleText t="No tag"></LocaleText>
</small>
<div class="d-flex flex-column gap-2" v-else>
<PeerTagSetting v-for="group in groups" :group="group">
</PeerTagSetting>
</div>
</div>
<div class="card-footer btn" @click="addGroup()">
<small><i class="bi bi-plus-lg me-2"></i><LocaleText t="Tag"></LocaleText></small>
</div>
</div>
</template>
<style scoped>
#peerTag{
width: 300px;
position: absolute;
right: 0;
z-index: 9999;
margin-top: 2px;
}
</style>

30
src/static/app/src/components/configurationComponents/peerTagBadge.vue Normal file
View File

@@ -0,0 +1,30 @@
<script setup lang="ts">
import { fromString } from 'css-color-converter';
import {computed} from "vue";
const props = defineProps(["BackgroundColor", "GroupName", "Icon"])
const color = computed(() => {
if (props.BackgroundColor){
const cssColor = fromString(props.BackgroundColor)
if (cssColor) {
const rgb = cssColor.toRgbaArray()
return +((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 255000).toFixed(2)
}
}
return 0
})
</script>
<template>
<span
class="badge rounded-3 shadow"
:style="{'background-color': BackgroundColor, 'color': color > 0.69 ? '#000':'#fff' }"
>
<i class="bi me-1" :class="Icon" v-if="Icon"></i>#{{ GroupName }}
</span>
</template>
<style scoped>
</style>

49
src/static/app/src/components/configurationComponents/peerTagComponents/peerTagSetting.vue Normal file
View File

@@ -0,0 +1,49 @@
<script setup lang="ts">
import {computed} from "vue";
import { fromString } from 'css-color-converter';
const props = defineProps(['group'])
const color = computed(() => {
if (props.group.BackgroundColor){
const cssColor = fromString(props.group.BackgroundColor)
if (cssColor) {
const rgb = cssColor.toRgbaArray()
return +((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 255000).toFixed(2) > 0.69 ? "#000":"#fff"
}
}
return "#ffffff"
})
console.log(color)
</script>
<template>
<div :style="{'background-color': group.BackgroundColor }"
class="badge rounded-3 d-flex align-items-center overflow-scroll">
<div
aria-label="Pick icon button"
style="height: 30px;"
class="d-flex align-items-center border rounded-2 p-2 btn btn-sm">
<i class="bi bi-pencil-fill" :style="{color: color}"></i>
</div>
<div contenteditable="true" class="flex-grow-1 text-start d-flex align-items-center rounded-2"
:style="{color: color}"
style="height: 30px">
Tag Name
</div>
<div style="height: 30px;"
aria-label="Pick color button"
class="d-flex align-items-center border-0 rounded-2 p-2 btn btn-sm">
<i class="bi bi-palette-fill" :style="{color: color}"></i>
</div>
<div style="height: 30px;"
aria-label="Pick color button"
class="d-flex align-items-center border-0 rounded-2 p-2 btn btn-sm">
<i class="bi bi-trash-fill" :style="{color: color}"></i>
</div>
</div>
</template>
<style scoped>
</style>