mirror of
https://github.com/Macrame-App/Macrame
synced 2025-12-29 15:29:26 +00:00
WIP: Device components, services and stores updated.
This commit is contained in:
Jesse Malotaux
parent
2f96c787a2
commit
03181cf6a4
8 changed files with 137 additions and 62 deletions
7
fe/package-lock.json
generated
7
fe/package-lock.json
generated
|
|
@ -18,6 +18,7 @@
|
|||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
"axios": "^1.8.3",
|
||||
"crypto-js": "^4.2.0",
|
||||
"eslint": "^9.20.1",
|
||||
"eslint-plugin-vue": "^9.32.0",
|
||||
"pinia": "^3.0.1",
|
||||
|
|
@ -2170,6 +2171,12 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/crypto-js": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
|
||||
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
"axios": "^1.8.3",
|
||||
"crypto-js": "^4.2.0",
|
||||
"eslint": "^9.20.1",
|
||||
"eslint-plugin-vue": "^9.32.0",
|
||||
"pinia": "^3.0.1",
|
||||
|
|
|
|||
90
fe/src/components/devices/RemoteView.vue
Normal file
90
fe/src/components/devices/RemoteView.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div class="server-overview">
|
||||
<AlertComp type="info">
|
||||
<div class="grid">
|
||||
<strong>This is a remote device.</strong>
|
||||
<em>UUID: {{ device.uuid() }} </em>
|
||||
</div>
|
||||
</AlertComp>
|
||||
|
||||
<div class="mcrm-block block__light grid gap-4">
|
||||
<h4 class="text-lg flex gap-4 items-center"><IconServer />Server</h4>
|
||||
<p>
|
||||
Connected to: <strong>{{ server.host }}</strong>
|
||||
</p>
|
||||
<AlertComp v-if="server.status === 'unauthorized'" type="warning">Not authorized</AlertComp>
|
||||
<AlertComp v-if="server.status === 'authorized'" type="success">Authorized</AlertComp>
|
||||
<AlertComp v-if="server.status === 'requested'" type="info">
|
||||
<div class="grid gap-2">
|
||||
<strong>Access requested</strong>
|
||||
<p>
|
||||
Navigate to <em class="font-semibold">http://localhost:6970/devices</em> on your pc to
|
||||
authorize.
|
||||
</p>
|
||||
</div>
|
||||
</AlertComp>
|
||||
|
||||
<ButtonComp
|
||||
v-if="server.status === 'unauthorized'"
|
||||
variant="primary"
|
||||
@click="requestAccess()"
|
||||
>
|
||||
<IconKey />
|
||||
Request access
|
||||
</ButtonComp>
|
||||
<ButtonComp variant="danger" v-if="server.status === 'authorized'">
|
||||
<IconPlugConnectedX />
|
||||
Disconnect
|
||||
</ButtonComp>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { IconKey, IconPlugConnectedX, IconServer } from '@tabler/icons-vue'
|
||||
import AlertComp from '../base/AlertComp.vue'
|
||||
import ButtonComp from '../base/ButtonComp.vue'
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import { useDeviceStore } from '@/stores/device'
|
||||
|
||||
const device = useDeviceStore()
|
||||
|
||||
const server = reactive({
|
||||
host: '',
|
||||
status: false,
|
||||
access: false,
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
server.host = window.location.host
|
||||
|
||||
device.$subscribe((mutation, state) => {
|
||||
if (Object.keys(state.server).length) server.status = state.server.status
|
||||
})
|
||||
|
||||
const status = await device.checkServerAccess()
|
||||
server.status = status
|
||||
})
|
||||
|
||||
function requestAccess() {
|
||||
const request = device.requestServerAccess()
|
||||
|
||||
request
|
||||
.then((data) => {
|
||||
console.log('1', data)
|
||||
})
|
||||
.then((data) => {
|
||||
console.log('2', data)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
.server-overview {
|
||||
@apply grid
|
||||
gap-4
|
||||
content-start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<div class="server-overview">
|
||||
<AlertComp type="info"> This is a remote device. </AlertComp>
|
||||
|
||||
<div class="mcrm-block block__light grid gap-4">
|
||||
<h4 class="text-lg flex gap-4 items-center"><IconServer />Server</h4>
|
||||
<p>
|
||||
Connected to: <strong>{{ server.host }}</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { IconServer } from '@tabler/icons-vue'
|
||||
import AlertComp from '../base/AlertComp.vue'
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import { useDeviceStore } from '@/stores/device'
|
||||
|
||||
const device = useDeviceStore()
|
||||
|
||||
const server = reactive({
|
||||
host: '',
|
||||
access: false,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
server.host = window.location.host
|
||||
|
||||
device.checkServerAccess()
|
||||
})
|
||||
|
||||
// console.log(window.location.host)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
.server-overview {
|
||||
@apply grid
|
||||
gap-4
|
||||
content-start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div class="device-overview">
|
||||
<AlertComp type="info"> This is the server. </AlertComp>
|
||||
<AlertComp type="info">
|
||||
<div class="grid">
|
||||
<strong>This is a server.</strong>
|
||||
<em>UUID: {{ device.uuid() }} </em>
|
||||
</div>
|
||||
</AlertComp>
|
||||
|
||||
<div class="mcrm-block block__light flex flex-wrap items-start">
|
||||
<!-- {{ remote.devices }} -->
|
||||
|
|
@ -53,8 +58,8 @@ const remote = reactive({ devices: [] })
|
|||
onMounted(() => {
|
||||
device.getRemoteDevices()
|
||||
|
||||
device.$subscribe((mutation) => {
|
||||
if (mutation.events.key == 'remote') remote.devices = device.remote
|
||||
device.$subscribe((mutation, state) => {
|
||||
if (Object.keys(state.remote).length) remote.devices = device.remote
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import CryptoJS from 'crypto-js'
|
||||
|
||||
export const appUrl = () => {
|
||||
return window.location.port !== 6970 ? `http://${window.location.hostname}:6970` : ''
|
||||
}
|
||||
|
|
@ -5,3 +7,13 @@ export const appUrl = () => {
|
|||
export const isLocal = () => {
|
||||
return window.location.hostname === '127.0.0.1' || window.location.hostname === 'localhost'
|
||||
}
|
||||
|
||||
export const encrypt = (data, key = false) => {
|
||||
const pk = !key ? localStorage.getItem('Macrame__pk') : key
|
||||
|
||||
if (pk) {
|
||||
return CryptoJS.RSA.encrypt(JSON.stringify(data), pk).toString()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,15 +6,14 @@ import { v4 as uuidv4 } from 'uuid'
|
|||
|
||||
export const useDeviceStore = defineStore('device', () => {
|
||||
// Properties - State values
|
||||
const list = ref({
|
||||
remote: [],
|
||||
local: [],
|
||||
})
|
||||
const current = ref({
|
||||
uuid: false,
|
||||
})
|
||||
|
||||
const remote = ref([])
|
||||
const server = ref([])
|
||||
const server = ref({
|
||||
status: false,
|
||||
})
|
||||
|
||||
const uuid = () => {
|
||||
if (!current.value.uuid && localStorage.getItem('deviceId')) {
|
||||
|
|
@ -32,26 +31,31 @@ export const useDeviceStore = defineStore('device', () => {
|
|||
}
|
||||
|
||||
const getRemoteDevices = async () => {
|
||||
// remote.value = { penis: 'penis' }
|
||||
// return
|
||||
axios.post(appUrl() + '/device/list').then((data) => {
|
||||
if (data.data.devices) remote.value = data.data.devices
|
||||
})
|
||||
}
|
||||
|
||||
const checkServerAccess = () => {
|
||||
axios.post(appUrl() + '/device/access/check', { uuid: uuid() }).then((data) => {
|
||||
console.log(data)
|
||||
const checkServerAccess = async () => {
|
||||
const check = await axios.post(appUrl() + '/device/access/check', { uuid: uuid() })
|
||||
server.value.access = check.data
|
||||
return check.data
|
||||
}
|
||||
|
||||
// if (data.data.access) server.value = data.data
|
||||
})
|
||||
const requestServerAccess = async () => {
|
||||
const request = await axios.post(appUrl() + '/device/access/request', { uuid: uuid() })
|
||||
return request
|
||||
}
|
||||
|
||||
return {
|
||||
list,
|
||||
remote,
|
||||
server,
|
||||
uuid,
|
||||
setDeviceId,
|
||||
getRemoteDevices,
|
||||
checkServerAccess,
|
||||
requestServerAccess,
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@
|
|||
Devices <span class="text-sm">{{ isLocal() ? 'remote' : 'servers' }}</span>
|
||||
</h1>
|
||||
<div class="panel__content">
|
||||
<DeviceOverview v-if="!isLocal()" />
|
||||
<ServerOverview v-else />
|
||||
<ServerView v-if="!isLocal()" />
|
||||
<RemoteView v-else />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DeviceOverview from '@/components/devices/DeviceOverview.vue'
|
||||
import ServerOverview from '@/components/devices/ServerOverview.vue'
|
||||
import ServerView from '@/components/devices/ServerView.vue'
|
||||
import RemoteView from '@/components/devices/RemoteView.vue'
|
||||
import { isLocal } from '@/services/ApiService'
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue