Added peer selections for client

src/dashboard.py

@@ -1260,7 +1260,6 @@ def API_Clients_AssignedClients():
 @app.get(f'{APP_PREFIX}/api/clients/allConfigurationsPeers')
 def API_Clients_AllConfigurationsPeers():
     c = {}
-    
     for (key, val) in WireguardConfigurations.items():
         c[key] = list(map(lambda x : {
             "id": x.id,
@@ -1270,7 +1269,18 @@ def API_Clients_AllConfigurationsPeers():
     return ResponseObject(
         data=c
     )
+
+@app.get(f'{APP_PREFIX}/api/clients/assignedPeers')
+def API_Clients_AssignedPeers():
+    data = request.args
+    clientId = data.get("ClientID")
+    if not clientId:
+        return ResponseObject(False, "Please provide ClientID")
     
+    d = DashboardClients.GetClientAssignedPeers(clientId)
+    if d is None:
+        return ResponseObject(False, "Client does not exist")
+    return ResponseObject(data=d)
 
 
 '''

src/modules/DashboardClients.py

@@ -329,6 +329,12 @@ class DashboardClients:
             if client is not None:
                 a.Client = self.GetClient(a.ClientID)
         return c
+    
+    def GetClientAssignedPeers(self, ClientID):
+        client = self.GetClient(ClientID)
+        if client is not None:
+            return self.DashboardClientsPeerAssignment.GetAssignedPeers(ClientID)
+        return None
 
     def AssignClient(self, ConfigurationName, PeerID, ClientID) -> tuple[bool, dict[str, str]] | tuple[bool, None]:
         return self.DashboardClientsPeerAssignment.AssignClient(ClientID, ConfigurationName, PeerID) 

src/static/app/package.json

@@ -11,32 +11,32 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vue/language-server": "^2.1.10",
-    "@vuepic/vue-datepicker": "^9.0.1",
-    "@vueuse/core": "^10.9.0",
-    "@vueuse/shared": "^10.9.0",
+    "@vue/language-server": "^3.0.3",
+    "@vuepic/vue-datepicker": "^11.0.2",
+    "@vueuse/core": "^13.5.0",
+    "@vueuse/shared": "^13.5.0",
     "animate.css": "^4.1.1",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.3",
-    "cidr-tools": "^7.0.4",
+    "cidr-tools": "^11.0.3",
     "dayjs": "^1.11.12",
-    "electron-builder": "^24.13.3",
+    "electron-builder": "^26.0.12",
     "fuse.js": "^7.0.0",
     "i": "^0.3.7",
     "is-cidr": "^5.0.3",
     "npm": "^10.5.0",
     "ol": "^10.2.1",
-    "pinia": "^2.1.7",
+    "pinia": "^3.0.3",
     "qrcode": "^1.5.3",
     "qrcodejs": "^1.0.0",
     "simple-code-editor": "^2.0.9",
-    "uuid": "^9.0.1",
-    "vue": "^3.4.29",
+    "uuid": "^11.1.0",
+    "vue": "^3.5.17",
     "vue-chartjs": "^5.3.0",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.0",
-    "vite": "^5.0.10"
+    "@vitejs/plugin-vue": "^6.0.0",
+    "vite": "^7.0.5"
   }
 }

src/static/app/src/components/clientComponents/clientAssignedPeers.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import {onMounted, watch, watchEffect} from "vue";
+import { fetchGet } from "@/utilities/fetch.js"
+import {DashboardClientAssignmentStore} from "@/stores/DashboardClientAssignmentStore.js";
+
+const props = defineProps(['client'])
+watchEffect(async () => {
+	const clientId = props.client.ClientID;
+	await fetchGet('/api/clients/assignedPeers', {
+		ClientID: clientId
+	}, (res) => {
+		console.log(res)
+	})
+})
+
+const assignmentStore = DashboardClientAssignmentStore()
+
+</script>
+
+<template>
+<div class="border w-100 d-flex " style="height: 400px">
+	<div style="flex: 1 0 0; overflow: scroll">
+		<div class="card rounded-0 border-0" v-for="(peers, configuration) in assignmentStore.allConfigurationsPeers">
+			<div class="card-header sticky-top z-5 bg-body-secondary border-0 rounded-0 shadow border-bottom btn-brand text-white">
+				<samp>{{ configuration }}</samp>
+			</div>
+			<div class="card-body p-0">
+				<div class="list-group list-group-flush" >
+					<button
+						class="list-group-item d-flex flex-column border-bottom list-group-item-action"
+						v-for="peer in peers" >
+						<small class="text-body">
+							{{ peer.id }}
+						</small>
+						<small class="text-muted">
+							{{ client.name ? client.name : 'Untitled Peer'}}
+						</small>
+					</button>
+				</div>
+
+			</div>
+		</div>
+	</div>
+	<div class="px-3 border-start border-end d-flex flex-column justify-content-center gap-3">
+		<button class="btn">
+			<i class="bi bi-chevron-left"></i>
+		</button>
+		<button class="btn">
+			<i class="bi bi-chevron-right"></i>
+		</button>
+	</div>
+	<div style="flex: 1 0 0">
+		hi
+	</div>
+</div>
+</template>
+
+<style scoped>
+div .list-group-item:last-child{
+	border-bottom: none !important;
+}
+</style>

src/static/app/src/components/clientComponents/clientViewer.vue

@@ -1,18 +1,18 @@
-<script setup lang="ts">
+<script setup lang="ts" async>
 import {useRoute} from "vue-router";
+import { fetchGet } from "@/utilities/fetch.js"
+
 
 import {DashboardClientAssignmentStore} from "@/stores/DashboardClientAssignmentStore.js";
 import {computed} from "vue";
 import LocaleText from "@/components/text/localeText.vue";
+import ClientAssignedPeers from "@/components/clientComponents/clientAssignedPeers.vue";
 const assignmentStore = DashboardClientAssignmentStore()
 const route = useRoute()
 
 const client = computed(() => {
 	return assignmentStore.getClientById(route.params.id)
 })
-
-
-
 </script>
 
 <template>
@@ -34,9 +34,10 @@ const client = computed(() => {
 			</div>
 		</div>
 		<div class="px-4">
-			<h5>
-				<LocaleText t="Assigned Peers"></LocaleText>
+			<h5 class="mb-3">
+				<LocaleText t="Assign Peers"></LocaleText>
 			</h5>
+			<ClientAssignedPeers :client="client"></ClientAssignedPeers>
 		</div>
 	</div>
 	<div v-else class="d-flex w-100 h-100 text-muted">

src/static/app/src/stores/DashboardClientAssignmentStore.js

@@ -1,9 +1,10 @@
 import {defineStore} from "pinia";
-import {computed, ref} from "vue";
+import {ref} from "vue";
 import {fetchGet, fetchPost} from "@/utilities/fetch.js";
 
 export const DashboardClientAssignmentStore = 
 	defineStore('DashboardClientAssignmentStore', () => {
+		const allConfigurationsPeers = ref({})
 		const assignments = ref([])
 		const clients = ref({})
 		const clientsRaw = ref([])
@@ -63,6 +64,12 @@ export const DashboardClientAssignmentStore =
 				unassigning.value = false;
 			})
 		}
+
+		const getAllConfigurationsPeers = async () => {
+			await fetchGet("/api/clients/allConfigurationsPeers", {}, (res) => {
+				allConfigurationsPeers.value = res.data
+			})
+		}
 		
 		return {
 			assignments, 
@@ -75,6 +82,8 @@ export const DashboardClientAssignmentStore =
 			getClientById,
 			unassigning,
 			assigning,
-			clientsRaw
+			clientsRaw,
+			allConfigurationsPeers,
+			getAllConfigurationsPeers
 		}
 })

src/static/app/src/views/clients.vue

@@ -5,9 +5,10 @@ import {ref} from "vue";
 const assignmentStore = DashboardClientAssignmentStore()
 import {GetLocale} from "@/utilities/locale.js";
 import ClientGroup from "@/components/clientComponents/clientGroup.vue";
-import * as sea from "node:sea";
+import { fetchGet } from "@/utilities/fetch.js"
 
 await assignmentStore.getClients();
+assignmentStore.getAllConfigurationsPeers();
 
 const searchString = ref("")
 </script>

src/static/app/src/views/newConfiguration.vue

@@ -1,5 +1,5 @@
 <script>
-import {parse} from "cidr-tools";
+import {parseCidr} from "cidr-tools";
 import '@/utilities/wireguard.js'
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
 import {fetchGet, fetchPost} from "@/utilities/fetch.js";
@@ -142,7 +142,7 @@ export default {
 				if (newVal.trim().split("/").filter(x => x.length > 0).length !== 2){
 					throw Error()
 				}
-				let p = parse(newVal);
+				let p = parseCidr(newVal);
 				let i = p.end - p.start;
 				this.numberOfAvailableIPs = i.toLocaleString();
 				ele.classList.add("is-valid")