Add Date Time Parameter (#17)

* Update Dashboard * Update README * Remove unused import from Server * Add Date Time parameter
VolkovLabs · May 11, 2022 · d25b990 · d25b990
1 parent 32f3aeb
commit d25b990
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -43,10 +43,18 @@ yarn run start
 ## Features
 
 - Provides functionality to create customizable forms.
-- Allows to specify GET request to get initial values and POST, PUT, PATCH request to send values updated in the form.
-- Allows to fully customize Submit button.
-- Supports String, Number, Boolean, Radio, Slider and Select elements.
+- Supported Parameters:
+  - Date and Time Input
+  - Number Input
+  - Number Slider
+  - Radio Group with Boolean options
+  - Radio Group with Custom options
+  - Select with Custom options
+  - String Input
+  - Text Area
 - Supports the Custom Code after Initial and Update requests.
+- Allows to specify GET request to get initial values and POST, PUT, PATCH request to send values updated in the form.
+- Allows to customize Submit, Reset buttons.
 
 ## Feedback
 

diff --git a/provisioning/dashboards/panels.json b/provisioning/dashboards/panels.json
@@ -182,7 +182,7 @@
             "step": 1,
             "title": "Step",
             "type": "slider",
-            "value": 1
+            "value": 5
           },
           {
             "id": "select",
@@ -224,15 +224,22 @@
             "id": "text",
             "rows": 4,
             "title": "Text",
-            "type": "textarea"
+            "type": "textarea",
+            "value": "Text"
+          },
+          {
+            "id": "dateTime",
+            "title": "DateTime",
+            "type": "datetime",
+            "value": "2022-03-31T04:17:49.000Z"
           }
         ],
         "reset": {
           "backgroundColor": "purple",
           "foregroundColor": "yellow",
           "icon": "process",
           "text": "Reset",
-          "variant": "hidden"
+          "variant": "secondary"
         },
         "submit": {
           "backgroundColor": "purple",
@@ -271,6 +278,6 @@
   "timezone": "",
   "title": "Panels",
   "uid": "O4tc_E6Gz",
-  "version": 13,
+  "version": 16,
   "weekStart": ""
 }
diff --git a/server/server.ts b/server/server.ts
@@ -1,5 +1,4 @@
 const http = require('http');
-const fs = require('fs');
 
 /**
  * Server Port

diff --git a/src/components/FormPanel/FormPanel.tsx b/src/components/FormPanel/FormPanel.tsx
@@ -1,11 +1,12 @@
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { css, cx } from '@emotion/css';
-import { PanelProps, SelectableValue } from '@grafana/data';
+import { DateTime, PanelProps, SelectableValue } from '@grafana/data';
 import { getTemplateSrv, locationService } from '@grafana/runtime';
 import {
   Alert,
   Button,
   ButtonGroup,
+  DateTimePicker,
   FieldSet,
   InlineField,
   InlineFieldRow,
@@ -259,6 +260,18 @@ export const FormPanel: React.FC<Props> = ({ options, width, height, onOptionsCh
               </InlineField>
             )}
 
+            {parameter.type === InputParameterType.DATETIME && (
+              <InlineField label={parameter.title} grow labelWidth={10}>
+                <DateTimePicker
+                  date={parameter.value}
+                  onChange={(dateTime: DateTime) => {
+                    parameter.value = dateTime;
+                    onOptionsChange(options);
+                  }}
+                />
+              </InlineField>
+            )}
+
             {parameter.type === InputParameterType.SLIDER && parameter.value != null && (
               <InlineField label={parameter.title} grow labelWidth={10}>
                 <Slider

diff --git a/src/constants/parameter.ts b/src/constants/parameter.ts
@@ -1,5 +1,4 @@
 import { SelectableValue } from '@grafana/data';
-import { CapitalizeFirstLetter } from '../utils';
 
 /**
  * Input Parameter Type
@@ -12,39 +11,45 @@ export const enum InputParameterType {
   SLIDER = 'slider',
   SELECT = 'select',
   TEXTAREA = 'textarea',
+  SECRET = 'secret',
+  DATETIME = 'datetime',
 }
 
 /**
  * Input Parameter Type Options
  */
 export const InputParameterTypeOptions: SelectableValue[] = [
   {
-    value: InputParameterType.BOOLEAN,
-    label: CapitalizeFirstLetter(InputParameterType.BOOLEAN),
+    value: InputParameterType.DATETIME,
+    label: 'Date and Time Input',
   },
   {
     value: InputParameterType.NUMBER,
-    label: CapitalizeFirstLetter(InputParameterType.NUMBER),
+    label: 'Number Input',
   },
   {
-    value: InputParameterType.RADIO,
-    label: CapitalizeFirstLetter(InputParameterType.RADIO),
+    value: InputParameterType.SLIDER,
+    label: 'Number Slider',
   },
   {
-    value: InputParameterType.SELECT,
-    label: CapitalizeFirstLetter(InputParameterType.SELECT),
+    value: InputParameterType.BOOLEAN,
+    label: 'Radio Group with Boolean options',
   },
   {
-    value: InputParameterType.SLIDER,
-    label: CapitalizeFirstLetter(InputParameterType.SLIDER),
+    value: InputParameterType.RADIO,
+    label: 'Radio Group with Custom options',
+  },
+  {
+    value: InputParameterType.SELECT,
+    label: 'Select with Custom options',
   },
   {
     value: InputParameterType.STRING,
-    label: CapitalizeFirstLetter(InputParameterType.STRING),
+    label: 'String Input',
   },
   {
     value: InputParameterType.TEXTAREA,
-    label: CapitalizeFirstLetter(InputParameterType.TEXTAREA),
+    label: 'Text Area',
   },
 ];