feat: node-specific dashboard links (#36)

knightss27 · Dec 27, 2022 · 5a9f51f · 5a9f51f
1 parent 2f45eba
commit 5a9f51f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/src/components/MapNode.tsx b/src/components/MapNode.tsx
@@ -65,8 +65,13 @@ const MapNode: React.FC<NodeProps> = (props: NodeProps) => {
   return (
     <DraggableCore disabled={disabled} onDrag={onDrag} onStop={onStop}>
       <g
+        cursor={disabled ? (node.dashboardLink ? 'pointer' : '') : 'move'}
         display={node.label !== undefined ? 'inline' : 'none'}
-        cursor={'move'}
+        onClick={() => {
+          if (disabled && node.dashboardLink) {
+            window.open(node.dashboardLink, '_blank');
+          }
+        }}
         transform={`translate(${
           wm.settings.panel.grid.enabled && draggedNode && draggedNode.index === node.index
             ? nearestMultiple(node.x, wm.settings.panel.grid.size)

diff --git a/src/forms/NodeForm.tsx b/src/forms/NodeForm.tsx
@@ -47,6 +47,12 @@ export const NodeForm = ({ value, onChange, context }: Props) => {
     onChange(weathermap);
   };
 
+  const handleDashboardLinkChange = (e: React.FormEvent<HTMLInputElement>, i: number) => {
+    let weathermap: Weathermap = value;
+    weathermap.nodes[i].dashboardLink = e.currentTarget.value;
+    onChange(weathermap);
+  }
+
   const handleNodePaddingChange = (num: number, i: number, type: 'vertical' | 'horizontal') => {
     let weathermap: Weathermap = value;
     weathermap.nodes[i].padding[type] = num;
@@ -290,6 +296,16 @@ export const NodeForm = ({ value, onChange, context }: Props) => {
                     name={'label'}
                   />
                 </InlineField>
+                <InlineField grow label={'Dashboard Link'}>
+                  <Input
+                    value={node.dashboardLink}
+                    onChange={(e) => handleDashboardLinkChange(e, i)}
+                    placeholder={'Node Dashboard Link'}
+                    type={'text'}
+                    className={styles.nodeLabel}
+                    name={'Dashboard link'}
+                  />
+                </InlineField>
               </InlineFieldRow>
               <InlineFieldRow className={styles.inlineRow}>
                 <ControlledCollapse label="Icon">

diff --git a/src/types.ts b/src/types.ts
@@ -52,6 +52,7 @@ export interface Node {
   id: string;
   position: [number, number];
   label?: string;
+  dashboardLink?: string;
   anchors: {
     [Anchor.Center]: NodeAnchor;
     [Anchor.Top]: NodeAnchor;

diff --git a/src/utils.ts b/src/utils.ts
@@ -3,7 +3,7 @@ import merge from 'lodash.merge';
 import { Anchor, DrawnNode, Link, Node, Weathermap } from 'types';
 import { v4 as uuidv4 } from 'uuid';
 
-export const CURRENT_VERSION = 9;
+export const CURRENT_VERSION = 10;
 
 let colorsCalculatedCache: { [colors: string]: string } = {};