refactor(examples): update custom function examples

eslint.config.mjs

@@ -21,6 +21,7 @@ export default antfu(
        */
       markdown: 'prettier',
     },
+    ignores: ['examples/**'],
   },
   {
     rules: {

examples/function/dynamicSwitch.js

@@ -1,21 +1,18 @@
 /**
  * @description: Simulated dynamic switch command
- * @param {string | object} value - Payload
- * @param {string} msgType - Message type, value is 'received' or 'publish'
+ * @param {string} message - Message payload
+ * @param {string} messageType - Message type, value is 'received' or 'publish'
  * @param {number} index - Index of the message, valid only when script is used in the publish message and timed message is enabled
- * @return {object} - Return two commands alternately, { "command": "on" } or { "command": "off" }
+ * @return {string} - Return two commands alternately, { "command": "on" } or { "command": "off" }
  */
-function handlePayload(value, msgType, index) {
-  let _value = value
-  if (typeof value === 'string') {
-    _value = JSON.parse(value)
-  }
+function handlePayload(message, messageType, index) {
+  let _message = JSON.parse(message || '{}')
   if (index % 2 === 0) {
-    _value.command = 'on'
+    _message.command = 'on'
   } else {
-    _value.command = 'off'
+    _message.command = 'off'
   }
-  return JSON.stringify(_value, null, 2)
+  return JSON.stringify(_message, null, 2)
 }
 
-execute(handlePayload)
+return execute(handlePayload)

examples/function/tempAndHum.js

@@ -1,21 +1,17 @@
-/**
- * Simulated temperature and humidity reporting
- * @return Return a simulated temperature and humidity JSON data - { "temperature": 23, "humidity": 40 }
- * @param value, MQTT Payload - {}
- */
-
 function random(min, max) {
   return Math.round(Math.random() * (max - min)) + min
 }
 
-function handlePayload(value) {
-  let _value = value
-  if (typeof value === 'string') {
-    _value = JSON.parse(value)
-  }
-  _value.temperature = random(10, 30)
-  _value.humidity = random(20, 40)
-  return JSON.stringify(_value, null, 2)
+/**
+ * @description: Simulated dynamic switch command
+ * @param {string} message - Message payload
+ * @return {string} - Return a simulated temperature and humidity data - { "temperature": 23, "humidity": 40 }
+ */
+function handlePayload(message) {
+  let _message = JSON.parse(message || '{}')
+  _message.temperature = random(10, 30)
+  _message.humidity = random(20, 40)
+  return JSON.stringify(_message, null, 2)
 }
 
-execute(handlePayload)
+return execute(handlePayload)

examples/function/timestamp.js

@@ -1,18 +1,17 @@
 /**
- * Convert timestamp to normal time.
- * @return Return the UTC time - { "time": "2020-12-17 14:18:07" }
- * @param value, MQTT Payload - { "time": 1608185887 }
+ * Convert timestamp to normal time
+ * @param {string} message - Message payload - { "time": 1608185887 }
+ * @return {string} - Return the message with the time converted to normal time - { "time": "17/12/2020, 06:18:07" }
  */
-
-function handleTimestamp(value) {
-  let _value = value
-  if (typeof value === 'string') {
-    _value = JSON.parse(value)
-  }
-  // East Eight District needs an additional 8 hours
-  const date = new Date(_value.time * 1000 + 8 * 3600 * 1000)
-  _value.time = date.toJSON().substr(0, 19).replace('T', ' ')
-  return JSON.stringify(_value, null, 2)
+function handlePayload(message) {
+  let _message = JSON.parse(message)
+  const date = new Date(_message.time * 1000)
+  _message.time = new Intl.DateTimeFormat('en-GB', {
+    timeZone: 'UTC',
+    dateStyle: 'short',
+    timeStyle: 'medium'
+  }).format(date)
+  return JSON.stringify(_message, null, 2)
 }
 
-execute(handleTimestamp)
+return execute(handlePayload)

packages/ui/src/components/script/function/Editor.vue

@@ -32,12 +32,12 @@ const inUseScript = computed(() => {
 const defaultFunction: Record<string, { content: string }> = {
   javascript: {
     content: `/**
-* @description: default script
-* @param {string} message - Message payload
-* @param {string} messageType - Message type, value is 'received' or 'publish'
-* @param {number} index - Index of the message, valid only when script is used in the publish message and timed message is enabled
-* @return {any} - Payload after script processing
-*/
+ * @description: Default custom function template
+ * @param {string} message - Message payload
+ * @param {string} messageType - Message type, value is 'received' or 'publish'
+ * @param {number} index - Index of the message, valid only when script is used in the publish message and timed message is enabled
+ * @return {string | object} - Returns a string or an object that can be JSON.stringify
+ */
 function handlePayload(message, messageType, index) {
   const payload = JSON.parse(message)
   return payload.msg

packages/ui/src/components/script/function/Test.vue

@@ -58,7 +58,7 @@ function handleTest(payload: string) {
         {{ $t('script.test') }}
       </ElButton>
     </div>
-    <section class="h-80 bg-normal border border-b-0 px-0.5 pb-0.5 pt-3 border-border-default rounded-t">
+    <section class="h-40 bg-normal border border-b-0 px-0.5 pb-0.5 pt-3 border-border-default rounded-t">
       <MonacoEditor
         :value="payloadString"
         :language="monacoEditorLangugage"
@@ -78,7 +78,7 @@ function handleTest(payload: string) {
     <div class="my-3 flex justify-between items-center">
       <label class="text-title">{{ $t('script.output') }}</label>
     </div>
-    <section class="h-80 bg-normal border border-b-0 px-0.5 pb-0.5 pt-3 border-border-default rounded-t">
+    <section class="h-40 bg-normal border border-b-0 px-0.5 pb-0.5 pt-3 border-border-default rounded-t">
       <MonacoEditor
         :value="resultString"
         :language="resultMonacoEditorLangugage"

packages/ui/src/components/script/schema/Test.vue

@@ -91,7 +91,7 @@ function handleTest(payload: string) {
         </ElButton>
       </div>
     </div>
-    <section class="h-80 bg-normal border border-b-0 px-0.5 pb-0.5 pt-3 border-border-default rounded-t">
+    <section class="h-40 bg-normal border border-b-0 px-0.5 pb-0.5 pt-3 border-border-default rounded-t">
       <MonacoEditor
         :value="payloadString"
         :language="monacoEditorLangugage"
@@ -111,7 +111,7 @@ function handleTest(payload: string) {
     <div class="my-3 flex justify-between items-center">
       <label class="text-title">{{ $t('script.output') }}</label>
     </div>
-    <section class="h-80 bg-normal border border-b-0 px-0.5 pb-0.5 pt-3 border-border-default rounded-t">
+    <section class="h-40 bg-normal border border-b-0 px-0.5 pb-0.5 pt-3 border-border-default rounded-t">
       <MonacoEditor
         :value="resultString"
         :language="resultMonacoEditorLangugage"