Update JS payload codec configuration and templates.

ui/src/index.css

@@ -106,3 +106,7 @@ pre {
 .search-dropdown .ant-select-dropdown-menu {
   max-height: 600px;
 }
+
+.CodeMirror {
+	height: 600px;
+}

ui/src/views/device-profiles/CreateDeviceProfile.tsx

@@ -28,33 +28,40 @@ class CreateDeviceProfile extends Component<IProps> {
   }
 
   render() {
-    const encodeScript = `// Encode encodes the given object into an array of bytes.
+    const codecScript = `// Decode uplink function.
 //
 // Input is an object with the following fields:
-// - f_port = LoRaWAN fPort
-// - variables = Device variables
-// - object = Input object, e.g. {"temperature": 22.5}
+// - bytes = Byte array containing the uplink payload, e.g. [255, 230, 255, 0]
+// - fPort = Uplink fPort.
+// - variables = Object containing the configured device variables.
 //
-// This function must return an array of bytes, e.g. [225, 230, 255, 0]
-export function Encode(input) {
-  return [];
-}`;
+// Output must be an object with the following fields:
+// - data = Object representing the decoded payload.
+function decodeUplink(input) {
+  return {
+    object: {
+      temp: 22.5
+    }
+  };
+}
 
-    const decodeScript = `// Decode decodes an array of bytes into an object.
+// Encode downlink function.
 //
 // Input is an object with the following fields:
-// - f_port = LoRaWAN fPort
-// - variables = Device variables
-// - data = Input byte array, e.g. [225, 230, 255, 0]
+// - data = Object representing the payload that must be encoded.
+// - variables = Object containing the configured device variables.
 //
-// This function must return an object, e.g. {"temperature": 22.5}
-export function Decode(input) {
-  return {};
-}`;
+// Output must be an object with the following fields:
+// - bytes = Byte array containing the downlink payload.
+function encodeDownlink(input) {
+  return {
+    data: [225, 230, 255, 0]
+  };
+}
+`;
 
     let deviceProfile = new DeviceProfile(); 
-    deviceProfile.setPayloadEncoderConfig(encodeScript);
-    deviceProfile.setPayloadDecoderConfig(decodeScript);
+    deviceProfile.setPayloadCodecScript(codecScript);
 
     return(
       <Space direction="vertical" style={{width: "100%"}} size="large">

ui/src/views/device-profiles/DeviceProfileForm.tsx

@@ -92,8 +92,7 @@ class DeviceProfileForm extends Component<IProps, IState> {
 
     // codec
     dp.setPayloadCodecRuntime(v.payloadCodecRuntime);
-    dp.setPayloadEncoderConfig(v.payloadEncoderConfig);
-    dp.setPayloadDecoderConfig(v.payloadDecoderConfig);
+    dp.setPayloadCodecScript(v.payloadCodecScript);
 
     // tags
     for (const elm of v.tagsMap) {
@@ -322,17 +321,9 @@ class DeviceProfileForm extends Component<IProps, IState> {
               </Select>
             </Form.Item>
             {this.state.payloadCodecRuntime === CodecRuntime.JS && <CodeEditor
-              label="Decode function"
-              tooltip="The function must have the signature function Decode(fPort, bytes) and must return an object. ChirpStack Application Server will convert this object to JSON."
-              name="payloadDecoderConfig"
-              value={this.props.initialValues.getPayloadDecoderConfig()}
-              formRef={this.formRef} disabled={this.props.disabled}
-            />}
-            {this.state.payloadCodecRuntime === CodecRuntime.JS && <CodeEditor
-              label="Encode function"
-              tooltip="The function must have the signature function Encode(fPort, obj) and must return an array of bytes."
-              name="payloadEncoderConfig"
-              value={this.props.initialValues.getPayloadEncoderConfig()}
+              label="Codec functions"
+              name="payloadCodecScript"
+              value={this.props.initialValues.getPayloadCodecScript()}
               formRef={this.formRef} disabled={this.props.disabled}
             />}
           </Tabs.TabPane>