Cannot manage to send String DateType to OPC UA from Http Request - httprequest

Which node-red-contrib-iiot-opcua version are you using?
4.0.9
What happened?
I'm trying to send an HTTP request over OPC UA node, but it's not working at all. The string node never updates.
Server
OPCUA-IIoT-Flex-Server Node (Please attach AddressSpaceScript to the next section)
How can this be reproduced?
Export.json:
{
"id": "e92d7a441a9d8f99",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "d82207d63fdea7e6",
"type": "inject",
"z": "e92d7a441a9d8f99",
"name": "CicloRepetición",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "5",
"crontab": "",
"once": true,
"onceDelay": "0.5",
"topic": "",
"payload": "",
"payloadType": "date",
"x": 150,
"y": 180,
"wires": [
[
"873a84fa008fe370"
]
]
},
{
"id": "9e551e92d50d566d",
"type": "OPCUA-IIoT-Flex-Server",
"z": "e92d7a441a9d8f99",
"port": "55480",
"endpoint": "",
"acceptExternalCommands": true,
"maxAllowedSessionNumber": "",
"maxConnectionsPerEndpoint": "",
"maxAllowedSubscriptionNumber": "",
"alternateHostname": "",
"name": "Servidor OPC UA",
"showStatusActivities": true,
"showErrors": true,
"allowAnonymous": true,
"individualCerts": false,
"isAuditing": false,
"serverDiscovery": true,
"users": [],
"xmlsets": [],
"publicCertificateFile": "",
"privateCertificateFile": "",
"registerServerMethod": "1",
"discoveryServerEndpointUrl": "",
"capabilitiesForMDNS": "",
"maxNodesPerRead": 1000,
"maxNodesPerBrowse": 2000,
"delayToClose": 1000,
"addressSpaceScript": "/**\n* #param {any} server\n* #param {{ getOwnNamespace: () => any; findNode: (arg0: string) => any; }} addressSpace\n* #param {any} eventObjects\n* #param {() => void} done\n*/\nfunction constructAlarmAddressSpace(server, addressSpace, eventObjects, done) {\n // server = the created node-opcua server\n // addressSpace = script placeholder\n // eventObjects = to hold event variables in memory from this script\n \n // internal global sandbox objects are \n // node = node of the flex server, \n // coreServer = core iiot server object for debug and access to nodeOPCUA,\n // and scriptObjects to hold variables and functions\n const LocalizedText = opcua.LocalizedText;\n const namespace = addressSpace.getOwnNamespace();\n \n coreServer.internalDebugLog('init dynamic address space')\n node.warn('construct new address space for OPC UA')\n \n const Variant = opcua.Variant;\n const DataType = opcua.DataType;\n const DataValue = opcua.DataValue;\n\n // node.log(JSON.stringify(eventObjects));\n // node.log(JSON.stringify(server));\n \n var $this = this;\n\n this.sandboxFlowContext.set(\"ApiFact\", \"\");\n\n node.log($this.sandboxFlowContext.get(\"ApiFact\"));\n \n coreServer.internalDebugLog(\"init dynamic address space\");\n const rootFolder = addressSpace.findNode(\"RootFolder\");\n \n node.warn(\"construct new address space for OPC UA\");\n \n const myDevice = namespace.addFolder(rootFolder.objects, {\n \"browseName\": \"FotovoltaicasDallas\"\n });\n\n const apiFact = namespace.addVariable({\n \"organizedBy\": myDevice,\n \"browseName\": \"ApiFact\",\n \"nodeId\": \"ns=1;s=ApiFact\",\n \"dataType\": \"String\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.String,\n \"value\": $this.sandboxFlowContext.get(\"ApiFact\")\n });\n }\n /*,\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"apiFact\",\n parseFloat(variant.value) // TODO\n );\n return opcua.StatusCodes.Good;\n }\n */\n }\n });\n \n //------------------------------------------------------------------------------\n // Add a view\n //------------------------------------------------------------------------------\n const viewDI = namespace.addView({\n \"organizedBy\": rootFolder.views,\n \"browseName\": \"FotovoltaicasDallas-View\"\n });\n \n viewDI.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": apiFact.nodeId\n });\n \n coreServer.internalDebugLog(\"create dynamic address space done\");\n node.warn(\"construction of new address space for OPC UA done\");\n \n done();\n}\n",
"x": 690,
"y": 200,
"wires": [
[]
]
},
{
"id": "1c27f9ba47285ad5",
"type": "function",
"z": "e92d7a441a9d8f99",
"name": "Asignar Flow",
"func": "// El input de este nodo se lee por \"msg.payload\"\n// Aquí se recibirá el objeto que la api devuelva por su output.\n\n// node.log(JSON.stringify(msg.payload, null, 2));\n\nflow.set('ApiFact', msg.payload.fact);\nflow.set('ApiLength', msg.payload.length);\n\nmsg.test = {\n ApiFact: msg.payload.fact\n}\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 410,
"y": 200,
"wires": [
[]
]
},
{
"id": "873a84fa008fe370",
"type": "http request",
"z": "e92d7a441a9d8f99",
"name": "FotovoltaicaDallas API Request",
"method": "GET",
"ret": "txt",
"paytoqs": "ignore",
"url": "https://catfact.ninja/fact",
"tls": "",
"persist": false,
"proxy": "",
"insecureHTTPParser": false,
"authType": "",
"senderr": false,
"headers": [],
"x": 370,
"y": 80,
"wires": [
[
"eb69022b3c8d6327",
"1c27f9ba47285ad5"
]
]
},
{
"id": "eb69022b3c8d6327",
"type": "debug",
"z": "e92d7a441a9d8f99",
"name": "debug 1",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": true,
"complete": "payload",
"targetType": "msg",
"statusVal": "payload",
"statusType": "auto",
"x": 620,
"y": 80,
"wires": []
},
{
"id": "4383d0f36f9b9625",
"type": "opcua-compact-server",
"z": "e92d7a441a9d8f99",
"d": true,
"port": 54846,
"endpoint": "",
"productUri": "",
"acceptExternalCommands": true,
"maxAllowedSessionNumber": "10",
"maxConnectionsPerEndpoint": "10",
"maxAllowedSubscriptionNumber": "100",
"alternateHostname": "",
"name": "",
"showStatusActivities": false,
"showErrors": true,
"allowAnonymous": true,
"individualCerts": false,
"isAuditing": false,
"serverDiscovery": true,
"users": [],
"xmlsetsOPCUA": [],
"publicCertificateFile": "",
"privateCertificateFile": "",
"registerServerMethod": "1",
"discoveryServerEndpointUrl": "",
"capabilitiesForMDNS": "",
"maxNodesPerRead": 1000,
"maxNodesPerWrite": 1000,
"maxNodesPerHistoryReadData": 100,
"maxNodesPerBrowse": 3000,
"maxBrowseContinuationPoints": "10",
"maxHistoryContinuationPoints": "10",
"delayToInit": "1000",
"delayToClose": "200",
"serverShutdownTimeout": "100",
"addressSpaceScript": "function constructAlarmAddressSpace(server, addressSpace, eventObjects, done) {\n // server = the created node-opcua server\n // addressSpace = address space of the node-opcua server\n // eventObjects = add event variables here to hold them in memory from this script\n\n // internal sandbox objects are:\n // node = the compact server node,\n // coreServer = core compact server object for debug and access to NodeOPCUA\n // this.sandboxNodeContext = node context node-red\n // this.sandboxFlowContext = flow context node-red\n // this.sandboxGlobalContext = global context node-red\n // this.sandboxEnv = env variables\n // timeout and interval functions as expected from nodejs\n\n const opcua = coreServer.choreCompact.opcua;\n const LocalizedText = opcua.LocalizedText;\n const namespace = addressSpace.getOwnNamespace();\n\n const Variant = opcua.Variant;\n const DataType = opcua.DataType;\n const DataValue = opcua.DataValue;\n\n var flexServerInternals = this;\n\n this.sandboxFlowContext.set(\"isoInput1\", 0);\n this.setInterval(() => {\n flexServerInternals.sandboxFlowContext.set(\n \"isoInput1\",\n Math.random() + 50.0\n );\n }, 500);\n this.sandboxFlowContext.set(\"isoInput2\", 0);\n this.sandboxFlowContext.set(\"isoInput3\", 0);\n this.sandboxFlowContext.set(\"isoInput4\", 0);\n this.sandboxFlowContext.set(\"isoInput5\", 0);\n this.sandboxFlowContext.set(\"isoInput6\", 0);\n this.sandboxFlowContext.set(\"isoInput7\", 0);\n this.sandboxFlowContext.set(\"isoInput8\", 0);\n\n this.sandboxFlowContext.set(\"isoOutput1\", 0);\n this.setInterval(() => {\n flexServerInternals.sandboxFlowContext.set(\n \"isoOutput1\",\n Math.random() + 10.0\n );\n }, 500);\n\n this.sandboxFlowContext.set(\"isoOutput2\", 0);\n this.sandboxFlowContext.set(\"isoOutput3\", 0);\n this.sandboxFlowContext.set(\"isoOutput4\", 0);\n this.sandboxFlowContext.set(\"isoOutput5\", 0);\n this.sandboxFlowContext.set(\"isoOutput6\", 0);\n this.sandboxFlowContext.set(\"isoOutput7\", 0);\n this.sandboxFlowContext.set(\"isoOutput8\", 0);\n\n coreServer.debugLog(\"init dynamic address space\");\n const rootFolder = addressSpace.findNode(\"RootFolder\");\n\n node.warn(\"construct new address space for OPC UA\");\n\n const myDevice = namespace.addFolder(rootFolder.objects, {\n \"browseName\": \"RaspberryPI-Zero-WLAN\"\n });\n const gpioFolder = namespace.addFolder(myDevice, { \"browseName\": \"GPIO\" });\n const isoInputs = namespace.addFolder(gpioFolder, {\n \"browseName\": \"Inputs\"\n });\n const isoOutputs = namespace.addFolder(gpioFolder, {\n \"browseName\": \"Outputs\"\n });\n\n const gpioDI1 = namespace.addVariable({\n \"organizedBy\": isoInputs,\n \"browseName\": \"I1\",\n \"nodeId\": \"ns=1;s=Isolated_Input1\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoInput1\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoInput1\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDI2 = namespace.addVariable({\n \"organizedBy\": isoInputs,\n \"browseName\": \"I2\",\n \"nodeId\": \"ns=1;s=Isolated_Input2\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoInput2\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoInput2\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDI3 = namespace.addVariable({\n \"organizedBy\": isoInputs,\n \"browseName\": \"I3\",\n \"nodeId\": \"ns=1;s=Isolated_Input3\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoInput3\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoInput3\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDI4 = namespace.addVariable({\n \"organizedBy\": isoInputs,\n \"browseName\": \"I4\",\n \"nodeId\": \"ns=1;s=Isolated_Input4\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoInput4\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoInput4\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDI5 = namespace.addVariable({\n \"organizedBy\": isoInputs,\n \"browseName\": \"I5\",\n \"nodeId\": \"ns=1;s=Isolated_Input5\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoInput5\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoInput5\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDI6 = namespace.addVariable({\n \"organizedBy\": isoInputs,\n \"browseName\": \"I6\",\n \"nodeId\": \"ns=1;s=Isolated_Input6\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoInput6\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoInput6\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDI7 = namespace.addVariable({\n \"organizedBy\": isoInputs,\n \"browseName\": \"I7\",\n \"nodeId\": \"ns=1;s=Isolated_Input7\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoInput7\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoInput7\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDI8 = namespace.addVariable({\n \"organizedBy\": isoInputs,\n \"browseName\": \"I8\",\n \"nodeId\": \"ns=1;s=Isolated_Input8\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoInput8\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoInput8\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDO1 = namespace.addVariable({\n \"organizedBy\": isoOutputs,\n \"browseName\": \"O1\",\n \"nodeId\": \"ns=1;s=Isolated_Output1\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoOutput1\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoOutput1\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDO2 = namespace.addVariable({\n \"organizedBy\": isoOutputs,\n \"browseName\": \"O2\",\n \"nodeId\": \"ns=1;s=Isolated_Output2\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoOutput2\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoOutput2\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDO3 = namespace.addVariable({\n \"organizedBy\": isoOutputs,\n \"browseName\": \"O3\",\n \"nodeId\": \"ns=1;s=Isolated_Output3\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoOutput3\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoOutput3\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDO4 = namespace.addVariable({\n \"organizedBy\": isoOutputs,\n \"browseName\": \"O4\",\n \"nodeId\": \"ns=1;s=Isolated_Output4\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoOutput4\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoOutput4\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDO5 = namespace.addVariable({\n \"organizedBy\": isoOutputs,\n \"browseName\": \"O5\",\n \"nodeId\": \"ns=1;s=Isolated_Output5\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoOutput5\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoOutput5\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDO6 = namespace.addVariable({\n \"organizedBy\": isoOutputs,\n \"browseName\": \"O6\",\n \"nodeId\": \"ns=1;s=Isolated_Output6\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoOutput6\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoOutput6\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDO7 = namespace.addVariable({\n \"organizedBy\": isoOutputs,\n \"browseName\": \"O7\",\n \"nodeId\": \"ns=1;s=Isolated_Output7\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoOutput7\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoOutput7\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n const gpioDO8 = namespace.addVariable({\n \"organizedBy\": isoOutputs,\n \"browseName\": \"O8\",\n \"nodeId\": \"ns=1;s=Isolated_Output8\",\n \"dataType\": \"Double\",\n \"value\": {\n \"get\": function() {\n return new Variant({\n \"dataType\": DataType.Double,\n \"value\": flexServerInternals.sandboxFlowContext.get(\"isoOutput8\")\n });\n },\n \"set\": function(variant) {\n flexServerInternals.sandboxFlowContext.set(\n \"isoOutput8\",\n parseFloat(variant.value)\n );\n return opcua.StatusCodes.Good;\n }\n }\n });\n\n //------------------------------------------------------------------------------\n // Add a view\n //------------------------------------------------------------------------------\n const viewDI = namespace.addView({\n \"organizedBy\": rootFolder.views,\n \"browseName\": \"RPIW0-Digital-Ins\"\n });\n\n const viewDO = namespace.addView({\n \"organizedBy\": rootFolder.views,\n \"browseName\": \"RPIW0-Digital-Outs\"\n });\n\n viewDI.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDI1.nodeId\n });\n\n viewDI.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDI2.nodeId\n });\n\n viewDI.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDI3.nodeId\n });\n\n viewDI.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDI4.nodeId\n });\n\n viewDI.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDI5.nodeId\n });\n\n viewDI.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDI6.nodeId\n });\n\n viewDI.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDI7.nodeId\n });\n\n viewDI.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDI8.nodeId\n });\n\n viewDO.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDO1.nodeId\n });\n\n viewDO.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDO2.nodeId\n });\n\n viewDO.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDO3.nodeId\n });\n\n viewDO.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDO4.nodeId\n });\n\n viewDO.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDO5.nodeId\n });\n\n viewDO.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDO6.nodeId\n });\n\n viewDO.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDO7.nodeId\n });\n\n viewDO.addReference({\n \"referenceType\": \"Organizes\",\n \"nodeId\": gpioDO8.nodeId\n });\n\n coreServer.debugLog(\"create dynamic address space done\");\n node.warn(\"construction of new address space for OPC UA done\");\n\n done();\n}\n",
"x": 680,
"y": 280,
"wires": []
}
]
AdressSpace:
/**
* #param {any} server
* #param {{ getOwnNamespace: () => any; findNode: (arg0: string) => any; }} addressSpace
* #param {any} eventObjects
* #param {() => void} done
*/
function constructAlarmAddressSpace(server, addressSpace, eventObjects, done) {
// server = the created node-opcua server
// addressSpace = script placeholder
// eventObjects = to hold event variables in memory from this script
// internal global sandbox objects are
// node = node of the flex server,
// coreServer = core iiot server object for debug and access to nodeOPCUA,
// and scriptObjects to hold variables and functions
const LocalizedText = opcua.LocalizedText;
const namespace = addressSpace.getOwnNamespace();
coreServer.internalDebugLog('init dynamic address space')
node.warn('construct new address space for OPC UA')
const Variant = opcua.Variant;
const DataType = opcua.DataType;
const DataValue = opcua.DataValue;
// node.log(JSON.stringify(eventObjects));
// node.log(JSON.stringify(server));
var $this = this;
this.sandboxFlowContext.set("ApiFact", "");
node.log($this.sandboxFlowContext.get("ApiFact"));
coreServer.internalDebugLog("init dynamic address space");
const rootFolder = addressSpace.findNode("RootFolder");
node.warn("construct new address space for OPC UA");
const myDevice = namespace.addFolder(rootFolder.objects, {
"browseName": "FotovoltaicasDallas"
});
const apiFact = namespace.addVariable({
"organizedBy": myDevice,
"browseName": "ApiFact",
"nodeId": "ns=1;s=ApiFact",
"dataType": "String",
"value": {
"get": function() {
return new Variant({
"dataType": DataType.String,
"value": $this.sandboxFlowContext.get("ApiFact")
});
}
/*,
"set": function(variant) {
flexServerInternals.sandboxFlowContext.set(
"apiFact",
parseFloat(variant.value) // TODO
);
return opcua.StatusCodes.Good;
}
*/
}
});
//------------------------------------------------------------------------------
// Add a view
//------------------------------------------------------------------------------
const viewDI = namespace.addView({
"organizedBy": rootFolder.views,
"browseName": "FotovoltaicasDallas-View"
});
viewDI.addReference({
"referenceType": "Organizes",
"nodeId": apiFact.nodeId
});
coreServer.internalDebugLog("create dynamic address space done");
node.warn("construction of new address space for OPC UA done");
done();
}
What did you expect to happen?
It should update the OPC UA node.

Related

React Native : Warning: Failed prop type: Invalid prop `coordinate` of type `number` supplied to `MapMarker`, expected `object`

I'm building my first app, a city guide app.
I'm still very new to React Native and I'm having a problem with react-native-maps (I think).
I'm trying to get the markers that show up on the map to come from my database via Axios queries
This is my Axios :
import axios from 'axios';
// URL API BASE
const APIURL = 'http://10.22.101.55:5000/api';
// RECUPERATION DES RESTAURANTS
export const getAllRestaurant = (nom, adresse, ville, cp, telephone, email, latitude, longitude ) => axios.get(`${APIURL}/restaurant`, {
nom: nom,
adresse: adresse,
ville: ville,
cp: cp,
telephone: telephone,
email: email,
latitude: latitude,
longitude: longitude
});
I had to change the URL of my call otherwise I received a Network Error type error
(Localhost -> 10.22.101.55)
My page where I call Axios :
import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
// Récupération des données
import {getAllRestaurant} from '../service/emplacements'
export default function AccueilScreen() {
// RECUPERATION DES RESTAURANTS
const [restaurants, setRestaurants] = React.useState([])
const LesRestaurants = () => [
getAllRestaurant().then(response => {
setRestaurants(response.data);
console.log(response);
}).catch(err => console.log('API :' + err))
]
// CHARGEMENT DES RESTAURANTS
useEffect(() => {
LesRestaurants()
},[])
return (
<View style={styles.container}>
<MapView
scrollEnabled={false}
rotateEnabled={false}
zoomEnabled={false}
minZoomLevel={0}
maxZoomLevel={13}
style={styles.map}
region={{
latitude: 49.4826616,
longitude: 1.7245633,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
{restaurants.map((restaurant) => (
<Marker
key={restaurant.id}
coordinate={restaurant.latitude, restaurant.longitude}
title={restaurant.nom}
/>
))}
</MapView>
</View>
);
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: '100%',
width: '100%',
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
And this what I got in the console :
Object {
"config": Object {
"adapter": [Function xhrAdapter],
"data": undefined,
"headers": Object {
"Accept": "application/json, text/plain, */*",
},
"maxBodyLength": -1,
"maxContentLength": -1,
"method": "get",
"timeout": 0,
"transformRequest": Array [
[Function transformRequest],
],
"transformResponse": Array [
[Function transformResponse],
],
"url": "http://10.22.101.55:5000/api/restaurant",
"validateStatus": [Function validateStatus],
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
},
"data": Array [
Object {
"adresse": "17 Rue de la France",
"cp": 76220,
"createdAt": "2021-05-10T07:41:25.000Z",
"email": "lerestaurant#gmail.com",
"id": 1,
"latitude": 49.4813,
"longitude": 1.73745,
"nom": "Le Restaurant",
"telephone": "0685459547",
"updatedAt": "2021-05-10T07:41:25.000Z",
"ville": "Gournay",
},
],
"headers": Object {
"cache-control": "public, max-age=0",
"connection": "keep-alive",
"content-length": "268",
"content-type": "application/json; charset=utf-8",
"date": "Mon, 10 May 2021 08:14:35 GMT",
"etag": "W/\"10c-flj/WYuf2hJDQ4N+xG++sHgKueQ\"",
"keep-alive": "timeout=5",
"x-powered-by": "Express",
},
"request": XMLHttpRequest {
"DONE": 4,
"HEADERS_RECEIVED": 2,
"LOADING": 3,
"OPENED": 1,
"UNSENT": 0,
"_aborted": false,
"_cachedResponse": undefined,
"_hasError": false,
"_headers": Object {
"accept": "application/json, text/plain, */*",
},
"_incrementalEvents": false,
"_lowerCaseResponseHeaders": Object {
"cache-control": "public, max-age=0",
"connection": "keep-alive",
"content-length": "268",
"content-type": "application/json; charset=utf-8",
"date": "Mon, 10 May 2021 08:14:35 GMT",
"etag": "W/\"10c-flj/WYuf2hJDQ4N+xG++sHgKueQ\"",
"keep-alive": "timeout=5",
"x-powered-by": "Express",
},
"_method": "GET",
"_perfKey": "network_XMLHttpRequest_http://10.22.101.55:5000/api/restaurant",
"_requestId": null,
"_response": "[{\"id\":1,\"nom\":\"Le Restaurant\",\"adresse\":\"17 Rue de la France\",\"ville\":\"Gournay\",\"cp\":76220,\"telephone\":\"0685459547\",\"email\":\"lerestaurant#gmail.com\",\"latitude\":49.4813,\"longitude\":1.73745,\"createdAt\":\"2021-05-10T07:41:25.000Z\",\"updatedAt\":\"2021-05-10T07:41:25.000Z\"}]",
"_responseType": "",
"_sent": true,
"_subscriptions": Array [],
"_timedOut": false,
"_trackingName": "unknown",
"_url": "http://10.22.101.55:5000/api/restaurant",
"readyState": 4,
"responseHeaders": Object {
"Cache-Control": "public, max-age=0",
"Connection": "keep-alive",
"Content-Length": "268",
"Content-Type": "application/json; charset=utf-8",
"Date": "Mon, 10 May 2021 08:14:35 GMT",
"ETag": "W/\"10c-flj/WYuf2hJDQ4N+xG++sHgKueQ\"",
"Keep-Alive": "timeout=5",
"X-Powered-By": "Express",
},
"responseURL": "http://10.22.101.55:5000/api/restaurant",
"status": 200,
"timeout": 0,
"upload": XMLHttpRequestEventTarget {},
"withCredentials": true,
},
"status": 200,
"statusText": undefined,
}
And the error message in the console + the error display
Warning: Failed prop type: Invalid prop coordinate of type number
supplied to MapMarker, expected object.
For me, the error is made because of the coordinate that I give to <Marker/>
Thanks in advance for your help and your time !
EDIT : The error is truly coming from coordinate, when I give manually the latitude and longitude, everything is working just fine.
The solution was to change :
coordinate={restaurant.latitude, restaurant.longitude}
to
coordinate={{latitude: restaurant.latitude, longitude: restaurant.longitude}}
the error was due to my syntax which was bad.
I was not giving latitude and longitude correctly to the coordinate prop.
And Coordinate cannot be 'null' or 'undefine'.

React Native: Cannot get PeerJs server to communicate back to my React Native Client, sending back the peer ID

The example i found was here for the client:
https://github.com/metehankurucu/react-native-video-calling-app
So im trying to build the Server.js from this.
This is my Peer Client:
import React, {useState} from 'react';
import {Alert} from 'react-native';
import {
mediaDevices,
MediaStream,
MediaStreamConstraints,
} from 'react-native-webrtc';
import socketio from 'socket.io-client';
import {MainContext as MainContextType, User} from '../interfaces';
import {
SERVER_URL,
PEER_SERVER_HOST,
PEER_SERVER_PORT,
PEER_SERVER_PATH,
} from '../server';
// #ts-ignore
import Peer from 'react-native-peerjs';
import {navigate} from '../helpers/RootNavigation';
const initialValues: MainContextType = {
username: '',
peerId: '',
users: [],
localStream: null,
remoteStream: null,
remoteUser: null,
initialize: () => {},
setUsername: () => {},
call: () => {},
switchCamera: () => {},
toggleMute: () => {},
isMuted: false,
closeCall: () => {},
reset: () => {},
activeCall: null,
};
export const MainContext = React.createContext(initialValues);
interface Props {}
const MainContextProvider: React.FC<Props> = ({children}) => {
const [username, setUsername] = useState(initialValues.username);
const [peerId, setPeerId] = useState(initialValues.peerId);
const [users, setUsers] = useState<User[]>(initialValues.users);
const [localStream, setLocalStream] = useState<MediaStream | null>(
initialValues.localStream,
);
const [remoteStream, setRemoteStream] = useState<MediaStream | null>(
initialValues.remoteStream,
);
const [remoteUser, setRemoteUser] = useState<User | null>(null);
const [socket, setSocket] = useState<SocketIOClient.Socket | null>(null);
const [peerServer, setPeerServer] = useState<any>(null);
const [isMuted, setIsMuted] = useState(initialValues.isMuted);
const [activeCall, setActiveCall] = useState<any>(null);
const initialize = async () => {
const isFrontCamera = true;
const devices = await mediaDevices.enumerateDevices();
const facing = isFrontCamera ? 'front' : 'environment';
const videoSourceId = devices.find(
(device: any) => device.kind === 'videoinput' && device.facing === facing,
);
const facingMode = isFrontCamera ? 'user' : 'environment';
const constraints: MediaStreamConstraints = {
audio: true,
video: {
mandatory: {
minWidth: 1280,
minHeight: 720,
minFrameRate: 30,
},
facingMode,
optional: videoSourceId ? [{sourceId: videoSourceId}] : [],
},
};
const newStream = await mediaDevices.getUserMedia(constraints);
setLocalStream(newStream as MediaStream);
const io = socketio.connect('http://localhost', {
reconnection: true,
autoConnect: true,
});
io.on('connect', () => {
console.log('connect');
setSocket(io);
console.log('setSocket');
io.emit('register', username);
console.log('register');
});
io.on('users-change', (users: User[]) => {
console.log('users-change');
setUsers(users);
console.log('setUsers');
});
io.on('accepted-call', (user: User) => {
console.log('accepted-call');
setRemoteUser(user);
console.log('setRemoteUser');
});
io.on('rejected-call', (user: User) => {
console.log('rejected-call');
setRemoteUser(null);
console.log('setRemoteUser');
setActiveCall(null);
console.log('setActiveCall');
Alert.alert('Your call request rejected by ' + user?.username);
navigate('Users');
console.log('navigate');
});
io.on('not-available', (username: string) => {
console.log('not-available');
setRemoteUser(null);
console.log('setRemoteUser');
setActiveCall(null);
console.log('setActiveCall');
Alert.alert(username + ' is not available right now');
navigate('Users');
console.log('Users');
});
const peerServer = new Peer({
host: 'localhost',
path: '/peerjs',
secure: false,
port: 9000,
config: {
iceServers: [
{
urls: [
'stun:stun1.l.google.com:19302',
'stun:stun2.l.google.com:19302',
],
},
],
},
});
console.log(peerServer);
peerServer.on('error', (err: Error) =>
console.log('Peer server error', err),
);
peerServer.on('open', (peerId: string) => {
console.log('open');
setPeerServer(peerServer);
console.log('setPeerServer');
setPeerId(peerId);
console.log('setPeerId');
io.emit('set-peer-id', peerId);
console.log('set-peer-id');
});
io.on('call', (user: User) => {
console.log(user);
peerServer.on('call', (call: any) => {
console.log('call');
setRemoteUser(user);
console.log('setRemoteUser');
Alert.alert(
'New Call',
'You have a new call from ' + user?.username,
[
{
text: 'Reject',
onPress: () => {
io.emit('reject-call', user?.username);
setRemoteUser(null);
setActiveCall(null);
},
style: 'cancel',
},
{
text: 'Accept',
onPress: () => {
io.emit('accept-call', user?.username);
call.answer(newStream);
setActiveCall(call);
navigate('Call');
},
},
],
{cancelable: false},
);
call.on('stream', (stream: MediaStream) => {
console.log('stream');
setRemoteStream(stream);
console.log('setRemoteStream');
});
call.on('close', () => {
console.log('close');
closeCall();
console.log('closeCall');
});
call.on('error', () => {});
});
});
};
const call = (user: User) => {
if (!peerServer || !socket) {
Alert.alert('Peer server or socket connection not found');
return;
}
if (!user.peerId) {
Alert.alert('User not connected to peer server');
return;
}
socket.emit('call', user.username);
console.log('setRemoteUser');
setRemoteUser(user);
try {
console.log('1');
const call = peerServer.call(user.peerId, localStream);
console.log('peerServer.call(user.peerId, localStream)');
call.on(
'stream',
(stream: MediaStream) => {
setActiveCall(call);
setRemoteStream(stream);
},
(err: Error) => {
console.error('Failed to get call stream', err);
},
);
} catch (error) {
console.log('Calling error', error);
}
};
const switchCamera = () => {
if (localStream) {
// #ts-ignore
localStream.getVideoTracks().forEach((track) => track._switchCamera());
}
};
const toggleMute = () => {
if (localStream)
localStream.getAudioTracks().forEach((track) => {
track.enabled = !track.enabled;
setIsMuted(!track.enabled);
});
};
const closeCall = () => {
activeCall?.close();
setActiveCall(null);
setRemoteUser(null);
navigate('Users');
Alert.alert('Call is ended');
};
const reset = async () => {
peerServer?.destroy();
socket?.disconnect();
setActiveCall(null);
setRemoteUser(null);
setLocalStream(null);
setRemoteStream(null);
setUsername('');
setPeerId('');
};
return (
<MainContext.Provider
value={{
username,
setUsername,
peerId,
setPeerId,
users,
setUsers,
localStream,
setLocalStream,
remoteStream,
setRemoteStream,
initialize,
call,
switchCamera,
toggleMute,
isMuted,
closeCall,
reset,
remoteUser,
activeCall,
}}>
{children}
</MainContext.Provider>
);
};
export default MainContextProvider;
Forgive me as i have put alot of consol.logs in there, so i hope i havent confused you.
And this is my Peerjs Server:
const express = require("express");
const app = express();
const port = 9000;
const http = require("http");
const server = http.createServer(app);
const io = require("socket.io")(server);
app.use(express.static(__dirname + "/public"));
io.sockets.on("error", e => console.log(e));
server.listen(port, () => console.log(`Server is running on port ${port}`));
let broadcaster
io.sockets.on("connection", socket => {
socket.on("broadcaster", () => {
broadcaster = socket.id;
socket.broadcast.emit("broadcaster");
});
socket.on("watcher", () => {
socket.to(broadcaster).emit("watcher", socket.id);
});
socket.on("disconnect", () => {
socket.to(broadcaster).emit("disconnectPeer", socket.id);
});
});
this is the JSON i get from the client:
{
"acks": {},
"connected": false,
"disconnected": true,
"flags": {},
"ids": 0,
"io": {
"_autoConnect": true,
"_callbacks": {
"$close": [Array],
"$error": [Array],
"$open": [Array],
"$packet": [Array]
},
"_randomizationFactor": 0.5,
"_readyState": "opening",
"_reconnection": true,
"_reconnectionAttempts": Infinity,
"_reconnectionDelay": 1000,
"_reconnectionDelayMax": 5000,
"_timeout": 20000,
"backoff": {
"attempts": 0,
"factor": 2,
"jitter": 0.5,
"max": 5000,
"ms": 1000
},
"decoder": {},
"encoder": {},
"engine": {
"_callbacks": [Object],
"hostname": "localhost",
"id": null,
"opts": [Object],
"pingInterval": null,
"pingTimeout": null,
"pingTimeoutTimer": null,
"port": "80",
"prevBufferLen": 0,
"readyState": "opening",
"secure": false,
"transport": [XHR],
"transports": [Array],
"upgrades": null,
"writeBuffer": [Array]
},
"nsps": {
"/": [Circular]
},
"opts": {
"autoConnect": true,
"hostname": "localhost",
"path": "/socket.io",
"port": "80",
"reconnection": true,
"secure": false
},
"skipReconnect": false,
"subs": [
[Function subDestroy],
[Function subDestroy],
[Function subDestroy]
],
"uri": "http://localhost"
},
"nsp": "/",
"receiveBuffer": [],
"sendBuffer": [],
"subs": [
[Function subDestroy],
[Function subDestroy],
[Function subDestroy],
[Function subDestroy]
]
}
[Mon Mar 29 2021 19: 22: 16.595] LOG {
"_api": {
"_options": {
"config": [Object],
"debug": 0,
"host": "localhost",
"key": "peerjs",
"path": "/peerjs/",
"port": 9000,
"secure": false,
"token": "f0ty4c4n2si"
}
},
"_connections": Map {},
"_destroyed": false,
"_disconnected": false,
"_events": {},
"_eventsCount": 0,
"_id": null,
"_lastServerId": null,
"_lostMessages": Map {},
"_open": false,
"_options": {
"config": {
"iceServers": [Array]
},
"debug": 0,
"host": "localhost",
"key": "peerjs",
"path": "/peerjs/",
"port": 9000,
"secure": false,
"token": "f0ty4c4n2si"
},
"_socket": {
"_baseUrl": "ws://localhost:9000/peerjs/peerjs?key=peerjs",
"_disconnected": true,
"_events": {
"close": [r],
"disconnected": [r],
"error": [r],
"message": [r]
},
"_eventsCount": 4,
"_messagesQueue": [],
"pingInterval": 5000
}
}
[Mon Mar 29 2021 19: 22: 16.752] LOG Peer server error[Error: Could not get an ID from the server.]

Failing vue-cli with vuetify project to run with IE 11 polyfilling issue?

My application doesn't work in IE11, in Chrome in FF works correctly.
In IE11 it is displayed blank page. Result from IE debugger is below. Tried to solve it so many ways
like by this. It's look like problem with polyfilling of vuetify but I'm not sure. Do you have any suggestions?
vue cli
3.8.2
build
npx vue-cli-service build --mode development --modern
result from debugger:
SCRIPT1003: Expected ':'
val("webpack_require.r(webpack_exports);\n/* harmony import / var _src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0__ = webpack_require(/! ../../../src/components/VApp/VApp.sass / \"./node_modules/vuetify/src/components/VApp/VApp.sass\");\n/ harmony import / var _src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0___default = /#PURE/webpack_require.n(_src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0__);\n/ harmony import / var _mixins_themeable__WEBPACK_IMPORTED_MODULE_1__ = webpack_require(/! ../../mixins/themeable / \"./node_modules/vuetify/lib/mixins/themeable/index.js\");\n/ harmony import / var _util_mixins__WEBPACK_IMPORTED_MODULE_2__ = webpack_require(/! ../../util/mixins / \"./node_modules/vuetify/lib/util/mixins.js\");\n// Styles\n // Mixins\n\n // Utilities\n\n\n/ #vue/component /\n\n/ harmony default export */ webpack_exports[\"default\"] = (Object(_util_mixins__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_mixins_themeable__WEBPACK_IMPORTED_MODULE_1__[\"default\"]).extend({\n name: 'v-app',\n props: {\n dark: {\n type: Boolean,\n default: undefined\n },\n id: {\n type: String,\n default: 'app'\n },\n light: {\n type: Boolean,\n default: undefined\n }\n },\n computed: {\n isDark() {\n return this.$vuetify.theme.dark;\n }\n\n },\n\n beforeCreate() {\n if (!this.$vuetify || this.$vuetify === this.$root) {\n throw new Error('Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object');\n }\n },\n\n render(h) {\n const wrapper = h('div', {\n staticClass: 'v-application--wrap'\n }, this.$slots.default);\n return h('div', {\n staticClass: 'v-application',\n class: {\n 'v-application--is-rtl': this.$vuetify.rtl,\n 'v-application--is-ltr': !this.$vuetify.rtl,\n ...this.themeClasses\n },\n attrs: {\n 'data-app': true\n },\n domProps: {\n id: this.id\n }\n }, [wrap
webpack.config.js
module.exports = {
resolve: {
alias: {
"#": require("path").resolve(__dirname, "src") // change this to your folder path
}
},
publicPath: "/dms-gui/",
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}]
},
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
]
};
vue.config.js
const path = require('path');
module.exports = {
transpileDependencies: ['vue-router', 'vuetify', 'axios'],
...
}
babel.config.js
module.exports = {
presets: [
['#vue/app', { useBuiltIns: 'entry' }]
]
}
main.js
import 'core-js/stable'
import Vue from "vue";
import Vuetify from "vuetify/lib";
import App from "./App.vue";
import router from "./router";
import store from "./store/store";
import VueCookies from "vue-cookies";
import AsyncComputed from 'vue-async-computed'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'vuetify/dist/vuetify.css';
import { BNav, BNavItemDropdown, BDropdownItem, BNavItem } from 'bootstrap-vue'
import vuetify from '#/plugins/vuetify'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import '#fortawesome/fontawesome-free/css/all.css'
Vue.use(VueCookies)
Vue.use(Vuetify)
Vue.use(AsyncComputed)
Vue.component('b-nav', BNav)
Vue.component('b-nav-item-dropdown', BNavItemDropdown)
Vue.component('b-dropdown-item', BDropdownItem)
Vue.component('b-nav-item', BNavItem)
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: function(h) {
return h(App);
}
}).$mount("#app");
Vue.use(Vuetify, {
iconfont: 'md'
})

Sourcemaps inaccurate (Vue + webpack + sentry)

I'm trying to generate correct sourcemaps for my project written in vue2 so I could later use them in sentry. However right now when I upload them to Sentry, everything seems to be working fine apart from Sentry complaining that it cannot match the location in the source map. Sourcemap Validator also thinks so:
http://sourcemaps.io/report/1578938920829_http%3A%2F%2F7ec94d64.ngrok.io%2FSideMenuAnalytics.40e8f1227591b28bea7d.js
It looks that sourcemap mappings are off by X characters. Have you seen something like that and could give me a hint how to solve it? Or can someone share webpack config which is producing correct sourcemaps?
PS. I've found this: https://github.com/webpack/webpack/issues/8302#issuecomment-521779175 but I'm not sure if it's actually related to my problem.
source file (.js):
(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{485:function(t,e,i){var n=i(604);"string"==typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);(0,i(8).default)("8850203c",n,!0,{})},603:function(t,e,i){"use strict";var n=i(485);i.n(n).a},604:function(t,e,i){(e=i(7)(!1)).push([t.i,".sidebar-menu__item{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:22px;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.sidebar-menu__tab{width:100%;border-left:4px solid transparent;padding-left:16px;color:#6d7688;display:inline-block;font-weight:500;text-decoration:none;vertical-align:middle;word-break:break-word}.sidebar-menu__tab--active{border-left:4px solid #1593ff;color:#1a2a4a;font-weight:500}.sidebar-menu__activetab{color:#0079e1}#media(max-width: 768px){.sidebar-menu{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}}.sidebar-submenu{margin-top:20px;margin-bottom:20px;width:100%;padding-left:20px}.sidebar-submenu .sidebar-menu__item{margin-bottom:1em}",""]),t.exports=e},605:function(t,e,i){var n=i(776);"string"==typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);(0,i(8).default)("737a94e4",n,!0,{})},639:function(t,e,i){"use strict";i(22),i(94),i(23);var n={name:"SideMenu",components:{BaseSelect:i(51).r},props:["items","exactlyMatchRoute"],data:function(){return{options:[],menuItem:this.$route.name}},watch:{menuItem:function(t){this.$router.push({name:t}),this.menuItem=t}},methods:{flatten:function(t){var e=this;return t.reduce((function(t,i){return t.push({value:i.name,text:i.i18n}),i.items&&(t=t.concat(e.flatten(i.items))),t}),[])}},created:function(){this.options=this.flatten(this.items)}},a=(i(603),i(1)),o=Object(a.a)(n,(function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",[i("ul",{staticClass:"sidebar-menu hidden-xs"},t._l(t.items,(function(e){return i("li",{key:e.name},[i("div",{staticClass:"sidebar-menu__item"},[i("router-link",{staticClass:"sidebar-menu__tab",attrs:{"active-class":"sidebar-menu__tab--active",to:{name:e.name},tag:"a",exact:t.exactlyMatchRoute}},[t._v(t._s(e.i18n))]),e.items?i("ul",{staticClass:"sidebar-submenu"},t._l(e.items,(function(e){return i("li",{key:e.name},[i("router-link",{staticClass:"sidebar-menu__tab",attrs:{"active-class":"sidebar-menu__tab--active",to:{name:e.name},tag:"a",exact:!0}},[t._v(t._s(e.i18n))])],1)})),0):t._e()],1)])})),0),i("BaseSelect",{attrs:{classes:"large visible-xs-block",options:t.options},model:{value:t.menuItem,callback:function(e){t.menuItem=e},expression:"menuItem"}})],1)}),[],!1,null,null,null);e.a=o.exports},775:function(t,e,i){"use strict";var n=i(605);i.n(n).a},776:function(t,e,i){(e=i(7)(!1)).push([t.i,".partner-settings__contact{margin-bottom:20px}.partner-settings__title{margin-bottom:20px}.settings__row{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;margin-bottom:20px}.settings__row button:first-child{margin-right:25px}.settings__column{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:50%;padding-right:20px}.partner-settings__label{font-weight:500}",""]),t.exports=e},858:function(t,e,i){"use strict";i.r(e);var n={components:{SideMenu:i(639).a},data:function(){return{items:[{name:"general-performance",i18n:this.$t("pPartner general performance")},{name:"campaigns-performance",i18n:this.$t("pPartner campaigns performance")},{i18n:this.$t("jsPartner_analytics overview bookings"),name:"bookings-all",items:[{name:"bookings-all",i18n:this.$t("jsPartner_analytics overview all bookings")},{name:"bookings-conducted",i18n:this.$t("jsPartner_analytics overview conducted bookings")}]}]}}},a=(i(775),i(1)),o=Object(a.a)(n,(function(){var t=this.$createElement;return(this._self._c||t)("SideMenu",{attrs:{items:this.items,exactlyMatchRoute:!1}})}),[],!1,null,null,null);e.default=o.exports}}]);
# sourceMappingURL=SideMenuAnalytics.40e8f1227591b28bea7d.js.map
sourcemap file (.js.map):
{"version":3,"sources":["webpack:///./src/components/SideMenu.vue?b476","webpack:///./src/components/SideMenu.vue?f4a6","webpack:///./src/components/SideMenu.vue?ddfe","webpack:///./src/pages/analytics/SideMenuAnalytics.vue?6589","webpack:///./src/components/SideMenu.vue?6646","webpack:///./src/components/SideMenu.vue?82ff","webpack:///src/components/SideMenu.vue","webpack:///./src/components/SideMenu.vue","webpack:///./src/pages/analytics/SideMenuAnalytics.vue?eb0c","webpack:///./src/pages/analytics/SideMenuAnalytics.vue?0508","webpack:///./src/pages/analytics/SideMenuAnalytics.vue?258b","webpack:///./src/pages/analytics/SideMenuAnalytics.vue?a09f","webpack:///src/pages/analytics/SideMenuAnalytics.vue","webpack:///./src/pages/analytics/SideMenuAnalytics.vue"],"names":["content","module","i","locals","exports","add","default","___CSS_LOADER_API_IMPORT___","push","component","_vm","this","_h","$createElement","_c","_self","staticClass","_l","tab","key","name","attrs","exactlyMatchRoute","_v","_s","i18n","t","_e","options","model","value","callback","$$v","menuItem","expression","items"],"mappings":"8EAGA,IAAIA,EAAU,EAAQ,KACA,iBAAZA,IAAsBA,EAAU,CAAC,CAACC,EAAOC,EAAIF,EAAS,MAC7DA,EAAQG,SAAQF,EAAOG,QAAUJ,EAAQG,SAG/BE,EADH,EAAQ,GAA+DC,SAChE,WAAYN,GAAS,EAAM,K,iCCR5C,oBAA2b,G,qBCE3bI,EADkC,EAAQ,EAChCG,EAA4B,IAE9BC,KAAK,CAACP,EAAOC,EAAI,wwBAAywB,KAElyBD,EAAOG,QAAUA,G,oBCHjB,IAAIJ,EAAU,EAAQ,KACA,iBAAZA,IAAsBA,EAAU,CAAC,CAACC,EAAOC,EAAIF,EAAS,MAC7DA,EAAQG,SAAQF,EAAOG,QAAUJ,EAAQG,SAG/BE,EADH,EAAQ,GAAkEC,SACnE,WAAYN,GAAS,EAAM,K,mDCR5C,ICAgM,ECkChM,CACE,KAAF,WACE,WAAF,CACI,W,MAAJ,GAEE,MAAF,8BACE,KAAF,WACI,MAAJ,CACM,QAAN,GACM,SAAN,mBAGE,MAAF,CACI,SAAJ,YACM,KAAN,cAAQ,KAAR,IACM,KAAN,aAGE,QAAF,CACI,QAAJ,YAAM,IAAN,OACM,OAAN,wBAKQ,OAJA,EAAR,MAAU,MAAV,OAAU,KAAV,SACA,UACU,EAAV,8BAEA,IACA,MAGE,QAAF,WACI,KAAJ,mC,gBCxDIS,EAAY,YACd,GHTW,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,KAAK,CAACE,YAAY,0BAA0BN,EAAIO,GAAIP,EAAS,OAAE,SAASQ,GAAK,OAAOJ,EAAG,KAAK,CAACK,IAAID,EAAIE,MAAM,CAACN,EAAG,MAAM,CAACE,YAAY,sBAAsB,CAACF,EAAG,cAAc,CAACE,YAAY,oBAAoBK,MAAM,CAAC,eAAe,4BAA4B,GAAK,CAAED,KAAMF,EAAIE,MAAM,IAAM,IAAI,MAAQV,EAAIY,oBAAoB,CAACZ,EAAIa,GAAGb,EAAIc,GAAGN,EAAIO,SAAUP,EAAS,MAAEJ,EAAG,KAAK,CAACE,YAAY,mBAAmBN,EAAIO,GAAIC,EAAS,OAAE,SAASQ,GAAG,OAAOZ,EAAG,KAAK,CAACK,IAAIO,EAAEN,MAAM,CAACN,EAAG,cAAc,CAACE,YAAY,oBAAoBK,MAAM,CAAC,eAAe,4BAA4B,GAAK,CAAED,KAAMM,EAAEN,MAAM,IAAM,IAAI,OAAQ,IAAO,CAACV,EAAIa,GAAGb,EAAIc,GAAGE,EAAED,UAAU,MAAK,GAAGf,EAAIiB,MAAM,QAAO,GAAGb,EAAG,aAAa,CAACO,MAAM,CAAC,QAAU,yBAAyB,QAAUX,EAAIkB,SAASC,MAAM,CAACC,MAAOpB,EAAY,SAAEqB,SAAS,SAAUC,GAAMtB,EAAIuB,SAASD,GAAKE,WAAW,eAAe,KAC75B,IGWpB,EACA,KACA,KACA,MAIa,IAAAzB,E,0CCnBf,oBAAsd,G,qBCEtdL,EADkC,EAAQ,EAChCG,EAA4B,IAE9BC,KAAK,CAACP,EAAOC,EAAI,0eAA2e,KAEpgBD,EAAOG,QAAUA,G,wCCNjB,ICA+M,ECO/M,CACE,WAAF,CAAI,S,OAAJ,GACE,KAFF,WAGI,MAAJ,CACM,MAAN,CACA,CAAQ,KAAR,sBAAQ,KAAR,yCACA,CAAQ,KAAR,wBAAQ,KAAR,2CACA,CACQ,KAAR,iDACQ,KAAR,eACQ,MAAR,CACA,CAAU,KAAV,eAAU,KAAV,sDACA,CAAU,KAAV,qBAAU,KAAV,kE,gBCXIK,EAAY,YACd,GHTW,WAAa,IAAiBG,EAATD,KAAgBE,eAAuC,OAAvDF,KAA0CI,MAAMD,IAAIF,GAAa,WAAW,CAACS,MAAM,CAAC,MAApFV,KAAgGwB,MAAM,mBAAoB,OACtI,IGWpB,EACA,KACA,KACA,MAIa,UAAA1B,E","file":"SideMenuAnalytics.40e8f1227591b28bea7d.js","sourcesContent":["// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=style&index=0&lang=scss&\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"8850203c\", content, true, {});","import mod from \"-!../../node_modules/vue-style-loader/index.js!../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../node_modules/vue-style-loader/index.js!../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=style&index=0&lang=scss&\"","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".sidebar-menu__item{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:22px;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.sidebar-menu__tab{width:100%;border-left:4px solid transparent;padding-left:16px;color:#6d7688;display:inline-block;font-weight:500;text-decoration:none;vertical-align:middle;word-break:break-word}.sidebar-menu__tab--active{border-left:4px solid #1593ff;color:#1a2a4a;font-weight:500}.sidebar-menu__activetab{color:#0079e1}#media(max-width: 768px){.sidebar-menu{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}}.sidebar-submenu{margin-top:20px;margin-bottom:20px;width:100%;padding-left:20px}.sidebar-submenu .sidebar-menu__item{margin-bottom:1em}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenuAnalytics.vue?vue&type=style&index=0&lang=scss&\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"737a94e4\", content, true, {});","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('ul',{staticClass:\"sidebar-menu hidden-xs\"},_vm._l((_vm.items),function(tab){return _c('li',{key:tab.name},[_c('div',{staticClass:\"sidebar-menu__item\"},[_c('router-link',{staticClass:\"sidebar-menu__tab\",attrs:{\"active-class\":\"sidebar-menu__tab--active\",\"to\":{ name: tab.name},\"tag\":\"a\",\"exact\":_vm.exactlyMatchRoute}},[_vm._v(_vm._s(tab.i18n))]),(tab.items)?_c('ul',{staticClass:\"sidebar-submenu\"},_vm._l((tab.items),function(t){return _c('li',{key:t.name},[_c('router-link',{staticClass:\"sidebar-menu__tab\",attrs:{\"active-class\":\"sidebar-menu__tab--active\",\"to\":{ name: t.name},\"tag\":\"a\",\"exact\":true}},[_vm._v(_vm._s(t.i18n))])],1)}),0):_vm._e()],1)])}),0),_c('BaseSelect',{attrs:{\"classes\":\"large visible-xs-block\",\"options\":_vm.options},model:{value:(_vm.menuItem),callback:function ($$v) {_vm.menuItem=$$v},expression:\"menuItem\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../node_modules/babel-loader/lib/index.js??ref--1!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js??ref--1!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=script&lang=js&\"","<template>\n <div>\n <ul class=\"sidebar-menu hidden-xs\">\n <li :key=\"tab.name\" v-for=\"tab in items\">\n <div class=\"sidebar-menu__item\">\n <router-link\n active-class=\"sidebar-menu__tab--active\"\n class=\"sidebar-menu__tab\"\n :to=\"{ name: tab.name}\"\n tag=\"a\"\n :exact=\"exactlyMatchRoute\"\n >{{tab.i18n}}</router-link>\n <!-- second level navigation (this section displays children nested underneath the main element -->\n <ul class=\"sidebar-submenu\" v-if=\"tab.items\">\n <li :key=\"t.name\" v-for=\"t in tab.items\">\n <router-link\n active-class=\"sidebar-menu__tab--active\"\n class=\"sidebar-menu__tab\"\n :to=\"{ name: t.name}\"\n tag=\"a\"\n :exact=\"true\"\n >{{t.i18n}}</router-link>\n </li>\n </ul>\n </div>\n </li>\n </ul>\n <BaseSelect classes=\"large visible-xs-block\" :options=\"options\" v-model=\"menuItem\" />\n </div>\n</template>\n\n<script>\nimport { BaseSelect } from 'Components/base/index';\n\nexport default {\n name: 'SideMenu',\n components: {\n BaseSelect\n },\n props: ['items', 'exactlyMatchRoute'],\n data: function () {\n return {\n options: [],\n menuItem: this.$route.name\n }\n },\n watch: {\n menuItem: function (name) {\n this.$router.push({ name });\n this.menuItem = name;\n }\n },\n methods: {\n flatten: function (array) {\n return array.reduce((acc, value) => {\n acc.push({ value: value.name, text: value.i18n });\n if (value.items) {\n acc = acc.concat(this.flatten(value.items));\n }\n return acc;\n }, []);\n }\n },\n created: function () {\n this.options = this.flatten(this.items)\n }\n};\n</script>\n\n<style lang=\"scss\">\n#import \"~#getyourguide/design-system/colors/colors\";\n#import \"~#getyourguide/design-system/spacing/breakpoints\";\n\n$border-width: 4px;\n$indent: 16px;\n\n.sidebar-menu {\n &__item {\n display: flex;\n align-items: center;\n margin-bottom: 22px;\n flex-direction: column;\n }\n\n &__tab {\n width: 100%;\n border-left: $border-width solid transparent;\n padding-left: $indent;\n color: $ui-slate;\n display: inline-block;\n font-weight: 500;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n\n &--active {\n border-left: $border-width solid #1593ff;\n color: #1a2a4a;\n font-weight: 500;\n }\n }\n\n &__activetab {\n color: $cta-active;\n }\n\n #media (max-width: $screen-sm-min) {\n flex-direction: row;\n }\n}\n\n.sidebar-submenu {\n margin-top: $border-width + $indent;\n margin-bottom: $border-width + $indent;\n width: 100%;\n padding-left: $border-width + $indent;\n\n // Reset margin in submenu items\n .sidebar-menu__item {\n margin-bottom: 1em;\n }\n}\n</style>\n","import { render, staticRenderFns } from \"./SideMenu.vue?vue&type=template&id=39191e03&\"\nimport script from \"./SideMenu.vue?vue&type=script&lang=js&\"\nexport * from \"./SideMenu.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SideMenu.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/vue-style-loader/index.js!../../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenuAnalytics.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../../node_modules/vue-style-loader/index.js!../../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenuAnalytics.vue?vue&type=style&index=0&lang=scss&\"","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".partner-settings__contact{margin-bottom:20px}.partner-settings__title{margin-bottom:20px}.settings__row{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;margin-bottom:20px}.settings__row button:first-child{margin-right:25px}.settings__column{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:50%;padding-right:20px}.partner-settings__label{font-weight:500}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('SideMenu',{attrs:{\"items\":_vm.items,\"exactlyMatchRoute\":false}})}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../../node_modules/babel-loader/lib/index.js??ref--1!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenuAnalytics.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/babel-loader/lib/index.js??ref--1!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenuAnalytics.vue?vue&type=script&lang=js&\"","<template>\n <SideMenu :items=\"items\" :exactlyMatchRoute=\"false\"/>\n</template>\n\n<script>\nimport SideMenu from '../../components/SideMenu.vue';\n\nexport default {\n components: { SideMenu },\n data() {\n return {\n items: [\n { name: 'general-performance', i18n: this.$t('pPartner general performance') },\n { name: 'campaigns-performance', i18n: this.$t('pPartner campaigns performance') },\n {\n i18n: this.$t('jsPartner_analytics overview bookings'),\n name: 'bookings-all',\n items: [\n {name: 'bookings-all', i18n: this.$t('jsPartner_analytics overview all bookings')},\n {name: 'bookings-conducted', i18n: this.$t('jsPartner_analytics overview conducted bookings')},\n ]\n }\n ]\n };\n }\n};\n</script>\n\n<style lang=\"scss\">\n// TODO: title, columns, rows definitions should not\n// live here. All those definitions should be moved into\n// its own components.\n\n.partner-settings__contact {\n margin-bottom: 20px;\n}\n\n.partner-settings__title {\n margin-bottom: 20px;\n}\n\n.settings__row {\n display: flex;\n flex-direction: row;\n margin-bottom: 20px;\n\n button {\n &:first-child {\n margin-right: 25px;\n }\n }\n}\n\n.settings__column {\n display: flex;\n flex-direction: column;\n width: 50%;\n padding-right: 20px;\n}\n\n.partner-settings__label {\n font-weight: 500;\n}\n</style>\n","import { render, staticRenderFns } from \"./SideMenuAnalytics.vue?vue&type=template&id=6982eed3&\"\nimport script from \"./SideMenuAnalytics.vue?vue&type=script&lang=js&\"\nexport * from \"./SideMenuAnalytics.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SideMenuAnalytics.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""}
webpack config
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
const MomentLocalesPlugin = require("moment-locales-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const TerserPlugin = require("terser-webpack-plugin");
const state = require("../state");
const { isProd } = state;
module.exports = {
mode: isProd ? "production" : "development",
devtool: isProd ? "source-map" : "cheap-module-eval-source-map",
output: {
path: path.resolve(__dirname, "../..", "./public/assets/compiled"),
publicPath: "/assets/compiled/",
filename: "[name].[hash].js"
},
resolve: {
alias: {
Public: path.resolve(__dirname, "../..", "./public"),
Components: path.resolve(__dirname, "../..", "./src/components/"),
Mixins: path.resolve(__dirname, "../..", "./src/mixins/"),
Store: path.resolve(__dirname, "../..", "./src/store/"),
Util: path.resolve(__dirname, "../..", "./src/util/"),
Pages: path.resolve(__dirname, "../..", "./src/pages/"),
Styles: path.resolve(__dirname, "../..", "./src/styles/")
}
},
module: {
noParse: /es6-promise\.js$/, // avoid webpack shimming process
// noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
preserveWhitespace: false
}
}
},
{
test: /\.js$/,
loader: "babel-loader",
// In order to enable es6 module for SSR render it's necessary to tell babel
// that it should process module files.
// Reference: https://github.com/nuxt/nuxt.js/issues/3485
// We should only use include || exclude
exclude: function(modulePath) {
return (
/node_modules/.test(modulePath) &&
!/node_modules\/#getyourguide\/design-system/.test(modulePath) &&
!/node_modules\/#getyourguide\/event-logger/.test(modulePath) &&
!/node_modules\/#sentry\/browser/.test(modulePath) &&
!/node_modules\/v-tooltip/.test(modulePath) &&
!/node_modules\/vue-18n/.test(modulePath)
);
},
options: {
presets: [
[
"#babel/preset-env",
{
debug: false,
useBuiltIns: "usage",
corejs: 3,
targets: {
ie: "11"
},
modules: 'auto' // Needed for tree shaking to work.
}
]
],
plugins: [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-shorthand-properties"
]
}
},
{
test: /\.scss?$/,
oneOf: [
{
use: [
"vue-style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: false
}
},
{
loader: "postcss-loader",
options: {
sourceMap: false,
plugins: [
require("autoprefixer")({
grid: true,
flexbox: true
})
]
}
},
{
loader: "sass-loader",
options: {
implementation: require("sass"),
sourceMap: false
}
}
]
}
]
}
]
},
performance: {
maxEntrypointSize: 300000,
hints: isProd ? "warning" : false
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "common.[hash].css"
}),
...(isProd ? [] : [new FriendlyErrorsPlugin()]),
// new BundleAnalyzerPlugin({
// generateStatsFile: true,
// openAnalyzer: true
// }),
// To strip all locales except “en”
new MomentLocalesPlugin()
],
optimization: {
minimizer: isProd
? [
new TerserPlugin({
sourceMap: true
})
]
: []
}
};

Express.js/socket.io/knockout.js simpleGrid update throught socket.io

i'm development a application using express/socket.io/knockout.js, it's my first time using knockout.js, to be exact i'm using simpleGrid example from knockout live example, but, with the difference that I get JSON from a socket in server.js, i don't have problem with this, i get json from server into client app, but I'm can't refresh/update simple grid with json recived. Grid is populated first time throught ajax call, but no update using socket.io and I can log using console.log json data coming from server .emit.
Cheers,
SR109
Here my index2.html, app client:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title of the document</title>
<script type='text/javascript' src='js/jquery-3.3.1.min.js'></script>
<script type='text/javascript' src='js/knockout-3.4.2.js'></script>
<script type='text/javascript' src='js/knockout.simpleGrid.3.0.js'></script>
<script type='text/javascript' src="http://localhost:3000/socket.io/socket.io.js"></script>
<link rel="stylesheet" type="text/css" href="cs/sheetindex2.css">
</head>
<body>
<div class='liveExample'>
<div data-bind='simpleGrid: gridViewModel'> </div>
</div>
<script>
var registros = [];
var registros2 = [];
$.ajax({
url:"http://localhost:3000/json",
type: "get",
success: function(data){
registros = JSON.stringify(data);
registros2 = data;
//console.log(registros);
//console.log(registros2);
ko.applyBindings(new PagedGridModel(registros2));
},
error: function(req, err){
console.log('my message' + err);
}
})
var PagedGridModel = function(items) {
this.items = ko.observableArray(items);
console.log(items);
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Fecha", rowText: "fecha" },
{ headerText: "Turno", rowText: "turno" },
{ headerText: "1", rowText: "h1" },
{ headerText: "2", rowText: "h2" },
{ headerText: "3", rowText: "h3" },
{ headerText: "4", rowText: "h4" },
{ headerText: "5", rowText: "h5" },
{ headerText: "6", rowText: "h6" },
{ headerText: "7", rowText: "h7" },
{ headerText: "8", rowText: "h8" }
],
pageSize: 30
});
};
var socket = io.connect('http://localhost:3000');
console.log('Un cliente se ha conectado');
socket.on('messages', function(data) {
console.log(data);
PagedGridModel.items(data);
if(typeof registro2 != "undefined" && array != null && array.length != null && array.length > 0){
registros2=data;
ko.applyBindings(new PagedGridModel(registros2));
}
});
</script>
</body>
</html>
And my server2.js (i don't have problems with this):
var express = require('express');
var mysql = require('mysql');
var path = require('path');
var connection = mysql.createConnection({
host:'localhost',
user:'root',
password:'rootadmin',
database: 'mecanizado'
})
var app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
//app.use("/cs", express.static(__dirname + 'client' + '/css'));
//app.use("/js", express.static(__dirname + 'client' + '/js'));
app.use(express.static(__dirname));
app.use(express.static(__dirname + 'js'));
app.use(express.static(__dirname + 'cs'));
app.route('/aplicacion').get(function(req,res){
console.log(__dirname + '/index2.html');
res.sendFile(__dirname + '/index2.html');
});
app.route('/resultado').get(function(req,res){
res.send("resultado1");
res.end();
});
app.route('/usuario').get(function(req,res){
res.json({'results': 'parametro'});
res.end();
});
app.route('/json').get(function(req,res){
//connection.connect();
//connection.query('SELECT * FROM mecanizado.isla1', function(err,rows,fields){
connection.query("SELECT DATE_FORMAT(fecha,'%Y-%m-%d') AS fecha, turno, h1,h2,h3,h4,h5,h6,h7,h8 FROM mecanizado.isla1 order by fecha desc, FIELD(turno,'mañana','tarde','noche') desc", function(err,rows,fields){
res.json(rows);
});
//connection.end();
});
var server = app.listen(3000, function() {
console.log('Server started on port');
});
var io = require('socket.io').listen(server);
io.on('connection', function (socket) {
//socket.emit('messages', { hello: 'world' });
//setInterval(()=>socket.emit('messages','mensaje'),1000);
setInterval(()=>consulta(socket), 1000);
/* socket.on('my other event', function (data) {
console.log('cliente conectado');
//setInterval(socket.send('${new Date()}'), 1000);
setInterval(socket.emit('messages','mensaje'),1000);
}); */
});
function consulta (socket){
connection.query("SELECT DATE_FORMAT(fecha,'%Y-%m-%d') AS fecha, turno, h1,h2,h3,h4,h5,h6,h7,h8 FROM mecanizado.isla1 order by fecha desc, FIELD(turno,'mañana','tarde','noche') desc", function(err,rows,fields){
//res.json(rows);
console.log(rows);
socket.emit('messages',rows);
});
}
We need access to the actual instance that you used to apply bindings on the HTML. Only then can we modify the values. For this we need to save the instance in a variable. I have done that like this: window.vm = new PagedGridModel(registros2);
$.ajax({
url:"http://localhost:3000/json",
type: "get",
success: function(data){
registros = JSON.stringify(data);
registros2 = data;
//console.log(registros);
//console.log(registros2);
window.vm = new PagedGridModel(registros2);
ko.applyBindings(window.vm);
},
error: function(req, err){
console.log('my message' + err);
}
})
var PagedGridModel = function(items) {
this.items = ko.observableArray(items);
console.log(items);
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Fecha", rowText: "fecha" },
{ headerText: "Turno", rowText: "turno" },
{ headerText: "1", rowText: "h1" },
{ headerText: "2", rowText: "h2" },
{ headerText: "3", rowText: "h3" },
{ headerText: "4", rowText: "h4" },
{ headerText: "5", rowText: "h5" },
{ headerText: "6", rowText: "h6" },
{ headerText: "7", rowText: "h7" },
{ headerText: "8", rowText: "h8" }
],
pageSize: 30
});
};
var socket = io.connect('http://localhost:3000');
console.log('Un cliente se ha conectado');
socket.on('messages', function(data) {
console.log(data);
window.vm.items(data);
if(typeof registro2 != "undefined" && array != null && array.length != null && array.length > 0){
registros2=data;
//ko.applyBindings(new PagedGridModel(registros2));
}
});