The sharing function is almost done

2025-08-28 07:51:13 +00:00 · 2024-08-06 10:17:14 -04:00
parent 4484668750
commit 958bc864c9
9 changed files with 245 additions and 28 deletions
--- a/src/static/app/package-lock.json
+++ b/src/static/app/package-lock.json
@@ -8,6 +8,7 @@
      "name": "app",
      "version": "0.0.0",
      "dependencies": {
+        "@vuepic/vue-datepicker": "^9.0.1",
        "@vueuse/core": "^10.9.0",
        "@vueuse/shared": "^10.9.0",
        "animate.css": "^4.1.1",
@@ -721,6 +722,20 @@
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.29.tgz",
      "integrity": "sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA=="
    },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-9.0.1.tgz",
+      "integrity": "sha512-5sSdwib5cY8cE4Y7SCh+Zemfp+U/m6BDcgaPwd5Vmdv5LAASyV0wugn9sTb6NWX0sIQEdrGDl/RmD9EjcIke3A==",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
    "node_modules/@vueuse/core": {
      "version": "10.9.0",
      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
@@ -937,6 +952,15 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
    "node_modules/dayjs": {
      "version": "1.11.12",
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.12.tgz",
--- a/src/static/app/package.json
+++ b/src/static/app/package.json
@@ -9,6 +9,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@vuepic/vue-datepicker": "^9.0.1",
    "@vueuse/core": "^10.9.0",
    "@vueuse/shared": "^10.9.0",
    "animate.css": "^4.1.1",
--- a/src/static/app/src/components/configurationComponents/peer.vue
+++ b/src/static/app/src/components/configurationComponents/peer.vue
@@ -86,6 +86,7 @@ export default {
 							@setting="this.$emit('setting')"
 							@jobs="this.$emit('jobs')"
 							@refresh="this.$emit('refresh')"
+							@share="this.$emit('share')"
 							:Peer="Peer"
 							v-if="this.subMenuOpened"
 							ref="target"
--- a/src/static/app/src/components/configurationComponents/peerList.vue
+++ b/src/static/app/src/components/configurationComponents/peerList.vue
@@ -40,6 +40,7 @@ import PeerJobs from "@/components/configurationComponents/peerJobs.vue";
 import PeerJobsAllModal from "@/components/configurationComponents/peerJobsAllModal.vue";
 import PeerJobsLogsModal from "@/components/configurationComponents/peerJobsLogsModal.vue";
 import {ref} from "vue";
+import PeerShareLinkModal from "@/components/configurationComponents/peerShareLinkModal.vue";

 Chart.register(
 	ArcElement,
@@ -70,6 +71,7 @@ Chart.register(
 export default {
 	name: "peerList",
 	components: {
+		PeerShareLinkModal,
 		PeerJobsLogsModal,
 		PeerJobsAllModal, PeerJobs, PeerCreate, PeerQRCode, PeerSettings, PeerSearch, Peer, Line, Bar},
 	setup(){
@@ -131,6 +133,10 @@ export default {
 			},
 			peerScheduleJobsLogs: {
 				modalOpen: false
+			},
+			peerShare:{
+				modalOpen: false,
+				selectedPeer: undefined
 			}
 		}
 	},
@@ -141,26 +147,21 @@ export default {
 		'$route': {
 			immediate: true,
 			handler(){
-				console.log(this.dashboardConfigurationStore.Peers.RefreshInterval)
 				clearInterval(this.dashboardConfigurationStore.Peers.RefreshInterval);
-				console.log(this.dashboardConfigurationStore.Peers.RefreshInterval)
-				
 				this.loading = true;
 				let id = this.$route.params.id;
 				this.configurationInfo = [];
 				this.configurationPeers = [];
 				if (id){
 					this.getPeers(id)
-					console.log("Changed..")
 					this.setPeerInterval();
 				}
 			}
 		},
 		'dashboardConfigurationStore.Configuration.Server.dashboard_refresh_interval'(){
-			console.log("Changed?")
 			clearInterval(this.dashboardConfigurationStore.Peers.RefreshInterval);
 			this.setPeerInterval();
-		},
+		}
 	},
 	beforeRouteLeave(){
 		clearInterval(this.dashboardConfigurationStore.Peers.RefreshInterval);
@@ -248,7 +249,6 @@ export default {
 			this.dashboardConfigurationStore.Peers.RefreshInterval = setInterval(() => {
 				this.getPeers()
 			}, parseInt(this.dashboardConfigurationStore.Configuration.Server.dashboard_refresh_interval))
-			console.log(this.dashboardConfigurationStore.Peers.RefreshInterval)
 		},
 	},
 	computed: {
@@ -548,7 +548,7 @@ export default {
 				     :key="peer.id"
 				     v-for="peer in this.searchPeers">
 					<Peer :Peer="peer"
-					      
+					      @share="this.peerShare.selectedPeer = peer.id; this.peerShare.modalOpen = true;"
 					      @refresh="this.getPeers()"
 					      @jobs="peerScheduleJobs.modalOpen = true; peerScheduleJobs.selectedPeer = this.configurationPeers.find(x => x.id === peer.id)"
 					      @setting="peerSetting.modalOpen = true; peerSetting.selectedPeer = this.configurationPeers.find(x => x.id === peer.id)"
@@ -595,6 +595,12 @@ export default {
 			>
 			</PeerJobsLogsModal>
 		</Transition>
+		<Transition name="zoom">
+			<PeerShareLinkModal 
+				v-if="this.peerShare.modalOpen"
+				@close="this.peerShare.modalOpen = false; this.peerShare.selectedPeer = undefined;"
+				:peer="this.configurationPeers.find(x => x.id === this.peerShare.selectedPeer)"></PeerShareLinkModal>
+		</Transition>
 	</div>
 </template>

--- a/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
+++ b/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
@@ -123,7 +123,7 @@ export default {
 					</a>
 				</li>
 				<li>
-					<a class="dropdown-item d-flex" role="button">
+					<a class="dropdown-item d-flex" role="button" @click="this.$emit('share')">
 						<i class="me-auto bi bi-share"></i> Share
 					</a>
 				</li>
--- a/src/static/app/src/components/configurationComponents/peerShareLinkModal.vue
+++ b/src/static/app/src/components/configurationComponents/peerShareLinkModal.vue
@@ -0,0 +1,124 @@
+<script>
+import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+import {fetchPost} from "@/utilities/fetch.js";
+import dayjs from "dayjs";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import VueDatePicker from '@vuepic/vue-datepicker';
+
+
+export default {
+	name: "peerShareLinkModal",
+	props: {
+		peer: Object
+	},
+	components: {
+		VueDatePicker
+	},
+	data(){
+		return {
+			dataCopy: undefined,
+			loading: false
+		}
+	},
+	setup(){
+		const store = DashboardConfigurationStore();
+		return {store}
+	},
+	mounted() {
+		this.dataCopy = JSON.parse(JSON.stringify(this.peer.ShareLink)).at(0);
+	},
+	methods: {
+		startSharing(){
+			this.loading = true;
+			fetchPost("/api/sharePeer/create", {
+				Configuration: this.peer.configuration.Name,
+				Peer: this.peer.id,
+				ExpireDate: dayjs().add(30, 'd').format("YYYY-MM-DD hh:mm:ss")
+			}, (res) => {
+				if (res.status){
+					this.peer.ShareLink = res.data;
+					this.dataCopy = res.data;
+					this.store.newMessage("Server", "Share link created successfully", "success")
+				}else{
+					this.store.newMessage("Server", 
+						"Share link failed to create. Reason: " + res.message, "danger")
+
+				}
+				this.loading = false;
+			})
+		},
+		updateLinkExpireDate(){
+			fetchPost("/api/sharePeer/update", this.dataCopy, (res) => {
+				console.log(res)
+			})
+		}
+	},
+	computed: {
+		getUrl(){
+			return window.location.origin 
+				+ window.location.pathname 
+				+ this.$router.resolve(
+					{path: "/share", query: {"ShareID": this.dataCopy.ShareID}}).href;
+		}
+	},
+	watch: {
+		'dataCopy.ExpireDate'(){
+			this.updateLinkExpireDate()
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll">
+		<div class="container d-flex h-100 w-100">
+			<div class="m-auto modal-dialog-centered dashboardModal" style="width: 500px">
+				<div class="card rounded-3 shadow flex-grow-1">
+					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4">
+						<h4 class="mb-0">Share Peer</h4>
+						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
+					</div>
+					<div class="card-body px-4 pb-4" v-if="this.peer.ShareLink">
+						<div v-if="!this.dataCopy">
+							<h6 class="mb-3 text-muted">
+								Currently the peer is not sharing
+							</h6>
+							<button 
+								@click="this.startSharing()"
+								:disabled="this.loading"
+								class="w-100 btn bg-success-subtle text-success-emphasis border-1 border-success-subtle rounded-3 shadow-sm">
+								<span :class="{'animate__animated animate__flash animate__infinite animate__slower': this.loading}">
+									<i class="bi bi-send-fill me-2" ></i>
+								</span>
+								{{this.loading ? "Sharing...":"Start Sharing"}}
+							</button>
+						</div>
+						<div v-else>
+							<div class="d-flex gap-2 mb-4">
+								<i class="bi bi-link-45deg"></i>
+								<a :href="this.getUrl" 
+								   class="text-decoration-none" target="_blank">
+									{{ getUrl }}
+								</a>
+							</div>
+							<div class="d-flex flex-column gap-2">
+								<small>
+									<i class="bi bi-calendar me-2"></i>
+									Expire Date
+								</small>
+								<VueDatePicker v-model="this.dataCopy.ExpireDate" time-picker-inline
+								               format="yyyy-MM-dd HH:mm:ss"
+								               :dark="this.store.Configuration.Server.dashboard_theme === 'dark'"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/static/app/src/main.js
+++ b/src/static/app/src/main.js
@@ -3,6 +3,7 @@ import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap/dist/js/bootstrap.js'
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import 'animate.css/animate.compat.css'
+import '@vuepic/vue-datepicker/dist/main.css'

 import {createApp, markRaw} from 'vue'
 import { createPinia } from 'pinia'
--- a/src/static/css/dashboard.css
+++ b/src/static/css/dashboard.css
@@ -1,3 +1,8 @@
+*,
+.dp__input{
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+}
+
 ::-webkit-scrollbar {
    display: none;
 }