Skip to content

Commit

Permalink
add node drop down menu to other pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@liamcottle
liamcottle committed Nov 17, 2024
1 parent 6346a61 commit d481872
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 115 deletions.
109 changes: 109 additions & 0 deletions src/components/nodes/NodeDropDownMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<template>
<DropDownMenu>
<template v-slot:button>
<IconButton v-if="node" class="mx-2 bg-transparent text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
</svg>
</IconButton>
</template>
<template v-slot:items>

<!-- node details -->
<div class="p-2 border-b">
<div class="text-sm text-gray-500 font-semibold">{{ getNodeLongName(node.num) }}</div>
<div class="text-sm text-gray-500">{{ getNodeHexId(node.num) }}</div>
</div>

<!-- node info button -->
<RouterLink :to="{ name: 'node', params: { nodeId: node.num }}">
<DropDownMenuItem>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
</svg>
<span>Node Info</span>
</DropDownMenuItem>
</RouterLink>

<!-- direct message button -->
<RouterLink :to="{ name: 'node.messages', params: { nodeId: node.num }}">
<DropDownMenuItem>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path fill-rule="evenodd" d="M4.804 21.644A6.707 6.707 0 0 0 6 21.75a6.721 6.721 0 0 0 3.583-1.029c.774.182 1.584.279 2.417.279 5.322 0 9.75-3.97 9.75-9 0-5.03-4.428-9-9.75-9s-9.75 3.97-9.75 9c0 2.409 1.025 4.587 2.674 6.192.232.226.277.428.254.543a3.73 3.73 0 0 1-.814 1.686.75.75 0 0 0 .44 1.223ZM8.25 10.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25ZM10.875 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z" clip-rule="evenodd" />
</svg>
<span>Direct Message</span>
</DropDownMenuItem>
</RouterLink>

<!-- exchange node info button -->
<DropDownMenuItem @click="onRequestNodeInfo(node)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path fill-rule="evenodd" d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z" clip-rule="evenodd" />
</svg>
<span>Request Node Info</span>
</DropDownMenuItem>

<!-- forget node button -->
<DropDownMenuItem @click="onDeleteNode(node)" class="border-t">
<svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
</svg>
<span class="text-red-500">Forget Node</span>
</DropDownMenuItem>

</template>
</DropDownMenu>
</template>

<script>
import NodeUtils from "../../js/NodeUtils.js";
import IconButton from "../IconButton.vue";
import DropDownMenu from "../DropDownMenu.vue";
import DropDownMenuItem from "../DropDownMenuItem.vue";
import NodeAPI from "../../js/NodeAPI.js";
export default {
name: 'NodeDropDownMenu',
components: {
DropDownMenuItem,
DropDownMenu,
IconButton,
},
props: {
node: Object,
},
emits: [
"node-deleted",
],
methods: {
getNodeHexId: (nodeId) => NodeUtils.getNodeHexId(nodeId),
getNodeShortName: (nodeId) => NodeUtils.getNodeShortName(nodeId),
getNodeLongName: (nodeId) => NodeUtils.getNodeLongName(nodeId),
getNodeColour: (nodeId) => NodeUtils.getNodeColour(nodeId),
getNodeTextColour: (nodeId) => NodeUtils.getNodeTextColour(nodeId),
onRequestNodeInfo(node) {
// request node info
NodeAPI.requestNodeInfo(node.num);
// show alert
alert("A request has been sent to the node to send its info back to us.");
},
onDeleteNode(node) {
// confirm user wants to remove this node
if(!confirm("Are you sure you want to forget this node?")){
return;
}
// remove node
NodeAPI.removeNodeByNum(node.num);
// emit event
this.$emit("node-deleted", node);
},
},
}
</script>
87 changes: 7 additions & 80 deletions src/components/nodes/NodesList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,61 +40,8 @@
</div>
</div>

<!-- drop down menu -->
<DropDownMenu>
<template v-slot:button>
<IconButton v-if="node" class="mx-2 bg-transparent text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
</svg>
</IconButton>
</template>
<template v-slot:items>

<!-- node details -->
<div class="p-2 border-b">
<div class="text-sm text-gray-500 font-semibold">{{ getNodeLongName(node.num) }}</div>
<div class="text-sm text-gray-500">{{ getNodeHexId(node.num) }}</div>
</div>

<!-- node info button -->
<RouterLink :to="{ name: 'node', params: { nodeId: node.num }}">
<DropDownMenuItem>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
</svg>
<span>Node Info</span>
</DropDownMenuItem>
</RouterLink>

<!-- direct message button -->
<RouterLink :to="{ name: 'node.messages', params: { nodeId: node.num }}">
<DropDownMenuItem>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path fill-rule="evenodd" d="M4.804 21.644A6.707 6.707 0 0 0 6 21.75a6.721 6.721 0 0 0 3.583-1.029c.774.182 1.584.279 2.417.279 5.322 0 9.75-3.97 9.75-9 0-5.03-4.428-9-9.75-9s-9.75 3.97-9.75 9c0 2.409 1.025 4.587 2.674 6.192.232.226.277.428.254.543a3.73 3.73 0 0 1-.814 1.686.75.75 0 0 0 .44 1.223ZM8.25 10.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25ZM10.875 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z" clip-rule="evenodd" />
</svg>
<span>Direct Message</span>
</DropDownMenuItem>
</RouterLink>

<!-- exchange node info button -->
<DropDownMenuItem @click="onRequestNodeInfo(node)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path fill-rule="evenodd" d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z" clip-rule="evenodd" />
</svg>
<span>Request Node Info</span>
</DropDownMenuItem>

<!-- forget node button -->
<DropDownMenuItem @click="onDeleteNode(node)" class="border-t">
<svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
</svg>
<span class="text-red-500">Forget Node</span>
</DropDownMenuItem>

</template>
</DropDownMenu>
<!-- node dropdown menu -->
<NodeDropDownMenu :node="node"/>

</div>
</div>
Expand All @@ -107,14 +54,14 @@ import NodeUtils from "../../js/NodeUtils.js";
import moment from "moment";
import NodeIcon from "./NodeIcon.vue";
import GlobalState from "../../js/GlobalState.js";
import IconButton from "../IconButton.vue";
import DropDownMenu from "../DropDownMenu.vue";
import NodeAPI from "../../js/NodeAPI.js";
import DropDownMenuItem from "../DropDownMenuItem.vue";
import NodeDropDownMenu from "./NodeDropDownMenu.vue";
export default {
name: 'NodesList',
components: {DropDownMenuItem, DropDownMenu, IconButton, NodeIcon},
components: {
NodeDropDownMenu,
NodeIcon,
},
emits: [
"node-click",
],
Expand All @@ -139,26 +86,6 @@ export default {
formatUnixSecondsAgo(unixSeconds) {
return moment.unix(unixSeconds).fromNow();
},
onRequestNodeInfo(node) {
// request node info
NodeAPI.requestNodeInfo(node.num);
// show alert
alert("A request has been sent to the node to send its info back to us.");
},
async onDeleteNode(node) {
// confirm user wants to remove this node
if(!confirm("Are you sure you want to forget this node?")){
return;
}
// remove node
await NodeAPI.removeNodeByNum(node.num);
},
},
computed: {
GlobalState() {
Expand Down
18 changes: 8 additions & 10 deletions src/components/pages/NodeMessagesPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,7 @@
<NodeIcon v-if="node" :node="node" class="mr-3"/>
</template>
<template v-slot:trailing>
<IconButton v-if="node" @click="onNodeInfoClick(node)" class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
</IconButton>
<NodeDropDownMenu v-if="node" :node="node" @node-deleted="onNodeDeleted"/>
</template>
</AppBar>

Expand All @@ -31,10 +27,12 @@ import NodeIcon from "../nodes/NodeIcon.vue";
import Page from "./Page.vue";
import IconButton from "../IconButton.vue";
import NodeUtils from "../../js/NodeUtils.js";
import NodeDropDownMenu from "../nodes/NodeDropDownMenu.vue";
export default {
name: 'NodeMessagesPage',
components: {
NodeDropDownMenu,
IconButton,
Page,
NodeIcon,
Expand All @@ -57,13 +55,13 @@ export default {
},
methods: {
getNodeLongName: (nodeId) => NodeUtils.getNodeLongName(nodeId),
onNodeInfoClick(node) {
onNodeDeleted() {
// go back to main page
this.$router.push({
name: "node",
params: {
nodeId: node.num,
},
name: "main",
});
},
},
computed: {
Expand Down
29 changes: 4 additions & 25 deletions src/components/pages/NodePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,7 @@
<NodeIcon v-if="node" :node="node" class="mr-3"/>
</template>
<template v-slot:trailing>
<IconButton v-if="node" @click="onRequestNodeInfo(node)" class="mr-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
</svg>
</IconButton>
<IconButton v-if="node" @click="onDeleteNode(node)" class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</IconButton>
<NodeDropDownMenu v-if="node" :node="node" @node-deleted="onNodeDeleted"/>
</template>
</AppBar>

Expand Down Expand Up @@ -99,14 +90,13 @@ import AppBar from "../AppBar.vue";
import NodeIcon from "../nodes/NodeIcon.vue";
import Page from "./Page.vue";
import NodeUtils from "../../js/NodeUtils.js";
import IconButton from "../IconButton.vue";
import NodeAPI from "../../js/NodeAPI.js";
import moment from "moment";
import NodeDropDownMenu from "../nodes/NodeDropDownMenu.vue";
export default {
name: 'NodePage',
components: {
IconButton,
NodeDropDownMenu,
Page,
NodeIcon,
AppBar,
Expand All @@ -131,24 +121,13 @@ export default {
getRoleName: (roleId) => NodeUtils.getRoleName(roleId),
getHardwareName: (roleId) => NodeUtils.getHardwareName(roleId),
latLongIntegerToLatLong: (latLongInteger) => NodeUtils.latLongIntegerToLatLong(latLongInteger),
async onDeleteNode(node) {
// confirm user wants to remove this node
if(!confirm("Are you sure you want to forget this node?")){
return;
}
onNodeDeleted() {
// go back to main page
this.$router.push({
name: "main",
});
// remove node
await NodeAPI.removeNodeByNum(node.num);
},
onRequestNodeInfo(node) {
NodeAPI.requestNodeInfo(node.num);
},
},
computed: {
Expand Down

0 comments on commit d481872

Please sign in to comment.