Added peer's endpoint IP back

src/dashboard.py

@@ -1192,6 +1192,7 @@ class DashboardConfig:
         keys = sqlSelect("SELECT * FROM DashboardAPIKeys WHERE ExpiredAt IS NULL OR ExpiredAt > datetime('now', 'localtime') ORDER BY CreatedAt DESC").fetchall()
         fKeys = []
         for k in keys:
+            
             fKeys.append(DashboardAPIKey(*k))
         return fKeys
     

src/static/app/src/components/configurationComponents/peer.vue

@@ -65,19 +65,24 @@ export default {
 			<h6>
 				{{Peer.name ? Peer.name : 'Untitled Peer'}}
 			</h6>
-			<div class="mb-2">
+			<div class="mb-1">
 				<small class="text-muted">
-					<LocaleText t="Public Key"></LocaleText>
+					Public Key
+				</small>
+				<small class="d-block">
+					<samp>{{Peer.id}}</samp>
 				</small>
-				<p class="mb-0"><samp>{{Peer.id}}</samp></p>
 			</div>
-			<div class="d-flex align-items-end">
 			<div>
 				<small class="text-muted">
 					<LocaleText t="Allowed IPs"></LocaleText>
 				</small>
-					<p class="mb-0"><samp>{{Peer.allowed_ip}}</samp></p>
+				<small class="d-block">
+					<samp>{{Peer.allowed_ip}}</samp>
+				</small>
 			</div>
+			<div class="d-flex align-items-end">
+				
 				<div class="ms-auto px-2 rounded-3 subMenuBtn"
 				     :class="{active: this.subMenuOpened}"
 				>

src/static/app/src/components/configurationComponents/peerSearch.vue

@@ -117,6 +117,11 @@ export default {
 				<i class="bi bi-filter-circle me-2"></i>
 				<LocaleText t="Display"></LocaleText>
 			</button>
+			<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
+			        @click="this.$emit('editConfiguration')"
+			        type="button" aria-expanded="false">
+				<i class="bi bi-gear-fill"></i>
+			</button>
 			<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
 			        @click="this.showMoreSettings = true"
 			        type="button" aria-expanded="false">
@@ -174,21 +179,11 @@ export default {
 					<div class="container-md d-flex h-100 w-100">
 						<div class="m-auto modal-dialog-centered dashboardModal">
 							<div class="card rounded-3 shadow w-100">
-								<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
+								<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0">
-									<h4 class="mb-0 fw-normal">
-										<LocaleText t="Configuration Settings"></LocaleText>
-									</h4>
 									<button type="button" class="btn-close ms-auto" @click="this.showMoreSettings = false"></button>
 								</div>
-								<div class="card-body px-4 pb-4 d-flex gap-3 flex-column">
+								<div class="card-body px-4 pb-4 d-flex gap-3 flex-column pt-0">
 									<div>
-										<div class="list-group">
-											<a class="list-group-item list-group-item-action d-flex" role="button"
-											   @click="this.$emit('editConfiguration')">
-												<LocaleText t="Configuration Settings"></LocaleText>
-											</a>
-										</div>
-										<hr>
 										<p class="text-muted fw-bold mb-2"><small>
 											<LocaleText t="Peer Jobs"></LocaleText>
 										</small></p>

src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue

@@ -86,7 +86,20 @@ export default {
 
 <template>
 	<ul class="dropdown-menu mt-2 shadow-lg d-block rounded-3" style="max-width: 200px">
+		
 		<template v-if="!this.Peer.restricted">
+	
+			<template v-if="this.Peer.status === 'running'">
+				<li style="font-size: 0.8rem; padding-left: var(--bs-dropdown-item-padding-x); padding-right: var(--bs-dropdown-item-padding-x);">
+				<span class="text-body d-flex">
+						<i class="bi bi-box-arrow-in-right"></i>
+						<span class="ms-auto">
+							{{this.Peer.endpoint}}
+						</span>
+				</span>
+				</li>
+				<li><hr class="dropdown-divider"></li>
+			</template>
 			<template v-if="!this.Peer.private_key">
 				<li>
 					<small class="w-100 dropdown-item text-muted"

src/static/app/src/main.js

@@ -14,7 +14,12 @@ import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.
 import {fetchGet} from "@/utilities/fetch.js";
 
 let Locale;
-await fetch("/api/locale").then(res => res.json()).then(res => Locale = res.data)
+await fetch("/api/locale")
+	.then(res => res.json())
+	.then(res => Locale = res.data)
+	.catch(() => {
+		Locale = null
+	})
 
 
 const app = createApp(App)

src/static/css/dashboard.css

@@ -1266,3 +1266,16 @@ pre.index-alert {
         width: 100%;
     }
 }
+
+@media screen and (max-width: 576px) {
+    .dashboardModal{
+        width: 100% !important;
+    }
+    .dashboardModal > .card{
+        margin: 0.5rem !important;
+    }
+}
+
+samp{
+    word-wrap: anywhere;
+}