{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"_parentId":{"value":"770709729"}},"macroMetadata":{"macroId":{"value":"d62cc54a-306c-4b79-8d07-c6bfa044607a"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"34a49c5e-0a08-4c1a-a81f-692a095d77f1"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"This model allows the user to view all their sites, floors, and equips in one place. Clicking on the site, floor, green button, or room temp will display magic bubbles. The color of the room temp button is based off of the room temp compared to the room setpoint. Must be placed on a floor.","type":"text"}]},{"type":"paragraph","content":[{"text":"The room temp point has to be tagged as ","type":"text"},{"text":"vipPoint","type":"text","marks":[{"type":"code"}]},{"text":" and the setpoint tagged as ","type":"text"},{"text":"vipSp","type":"text","marks":[{"type":"code"}]},{"text":" in the database. If not present, no value will be displayed as there is nothing to compare with.","type":"text"},{"type":"hardBreak"},{"text":"The description of each equip is based on the ","type":"text"},{"text":"description","type":"text","marks":[{"type":"code"}]},{"text":" string tag in the database. If not present, It will be blank.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":576,"widthType":"pixel"},"content":[{"type":"media","attrs":{"__fileSize":242659,"__fileMimeType":"image/png","width":1091,"id":"e96c5e7c-4885-47a2-8f65-c80fe0b13e6b","collection":"contentId-770709729","type":"file","__fileName":"Screen Shot 2017-10-10 at 10.59.22 AM.png","height":1027}}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Ractive Code","type":"text","marks":[{"type":"underline"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Template","type":"text","marks":[{"type":"underline"}]}]},{"type":"codeBlock","content":[{"text":"

\n {{#myPoints}}\n

\n {{#each subItems}}\n

\n {{#each .subItems}}\n {{> sub }}\n {{/each}}\n {{/each}}\n

\n {{/myPoints}}\n

\n \n{{#partial sub}}\n

\n \n \n

RMT

\n \n

\n {{#.vipPoint}}{{curVal.toFixed(2)}}{{unit}}{{/.vipPoint}}

\n {{#each .subItems}}\n {{>subI}}\n {{/each}}\n{{/partial}}\n \n{{#partial subI}}\n

\n \n \n

RMT

\n {{#.vipPoint}}{{curVal.toFixed(2)}}{{unit}}{{/.vipPoint}}

\n{{/partial}}\n

","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Model","type":"text","marks":[{"type":"underline"}]}]},{"type":"codeBlock","content":[{"text":"{\n data:\n {\n myPoints:[]\n }\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Style","type":"text","marks":[{"type":"underline"}]}]},{"type":"codeBlock","content":[{"text":".top{\n overflow: auto;\n width: 100%;\n height: 100%;\n}\n.s-main{\n display: flex;\n flex-direction: row;\n flex: 1 1 auto;\n flex-wrap: wrap;\n}\n.s-hand{\n cursor: pointer;\n}\n.s-box{\n min-width: 500px;\n display: flex;\n flex-direction: column;\n margin-bottom: 5px;\n margin-right: 5px;\n width: 100%;\n}\n.s-site{\n font-size: 20px;\n font-weight: bold;\n margin-bottom: 5px;\n}\n.s-rmt{\n margin-right: 5px;\n justify-content: center;\n}\n.s-floor{\n font-size: 18px;\n text-indent: 20px;\n margin-bottom: 5px;\n}\n.s-equip{\n font-size: 14px;\n margin-bottom: 5px;\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n}\n.s-dot{\n width:10px;\n height:10px;\n background-color: green;\n border-radius: 50%;\n}\n.s-name{\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.s-temp{\n text-align: center;\n margin-right: 5px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n}\n.s-tempSpace{\n width:60.5px;\n}\n.s-space{\n width:14%;\n margin-right: 5px;\n}\n.s-space15{\n width:15%;\n margin-right: 5px;\n}\n.s-space5{\n width:5%;\n margin-right: 5px;\n}\n.s-space20{\n width:20%;\n margin-right: 5px;\n}\n.s-space30{\n width:30%;\n margin-right: 5px;\n}\n.s-center{\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.margin .small .r-side {\n margin-right: 5px;\n}\n.no-flex{\n flex: 0 0 auto;\n}\n.s-icons{\n display: flex;\n}\n.purple{\n border-radius: 0 3px 3px 0;\n height:25px;\n width:40px;\n background: #8c68b2;\n}\n.red{\n border-radius: 3px 0 0 3px;\n height:25px;\n width:40px;\n background: #c34c46;\n}\n.green{\n border-radius: 3px 0 0 3px;\n height:25px;\n width:40px;\n background: #6cc487;\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Init","type":"text","marks":[{"type":"underline"}]}]},{"type":"codeBlock","content":[{"text":"this.ractive.fire(\"obtainData\");\nthis.ractive.on(\"magicB\", function(event) {\n var item = this.get(event.keypath);\n if (item)\n top.app.ShowRelatedBubbles(item.id, item.id, false, event);\n});\nthis.ractive.on(\"magicBTemp\", function(event) {\n var item = this.get(event.keypath);\n console.log(item.vipPoint.id);\n if (item)\n top.app.ShowRelatedBubbles(item.vipPoint.id, item.vipPoint.id, true, event);\n});\n\nthis.ractive.on(\"alarms\", function(event) {\n var item = this.get(event.keypath);\n var mainWin = window.parent;\ntry {\nwindow.top.app.OpenEquipTreeWithApp (\"alarms\");\nconsole.log(\"alarms\");\n} catch (err) {console.error(err)}\n});","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Program","type":"text","marks":[{"type":"underline"}]}]},{"type":"codeBlock","content":[{"text":"var ractive = this;\nfinstack.eval('finShowEquipSummary(null)', function(data){\nractive.myPoints = data.result.toObj();\nconsole.log(data.result.toObj());\n});","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"How To Make your Own","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Drag Ractive out from components on the left side menu, and click on it to have the green outline","type":"text"},{"type":"hardBreak"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"f87b512c-54c4-437e-b90e-0d46038ef1fc","collection":"contentId-770709729","height":"400"}}},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"113cab6b-cc86-4808-a3fd-c708225d422d","collection":"contentId-770709729","height":"400"}}},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"024669a1-8627-40d5-af31-c324de77fbc6","collection":"contentId-770709729","height":"400"}}},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"28428a40-0c8c-4f10-9dff-3dc3dcd5e23c","collection":"contentId-770709729","height":"400"}}},{"type":"hardBreak"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Under properties open the ractive editor, and copy and paste from the Ractive Code given above for template, model, style, and init","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"After saving go to programs and add a new program","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Name your program, and set the program target filter to ","type":"text"},{"text":"stackractive","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Copy and paste the above code for program into the main part","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Top right of program editor, click the three dots, and select variables","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click the gear that appears as you hover over this","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"turn Invokes the Function on and change the dropdown to Custom Event","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Type in ","type":"text"},{"text":"obtainData","type":"text","marks":[{"type":"code"}]},{"text":" in the line below and save","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Save and you're done!","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Adding a Timer","type":"text","marks":[{"type":"underline"},{"type":"strong"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":85.0},"content":[{"type":"media","attrs":{"__fileSize":50280,"__fileMimeType":"image/png","width":518,"id":"1af74d0c-e7a6-498e-a7e3-51064fb42f5b","collection":"contentId-770709729","type":"file","__fileName":"Screen Shot 2017-10-10 at 11.10.05 AM.png","height":352}}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":80.0},"content":[{"type":"media","attrs":{"__fileSize":82516,"__fileMimeType":"image/png","width":943,"id":"752fdd23-74bb-4258-9116-1c2b9be8d9b3","collection":"contentId-770709729","type":"file","__fileName":"Screen Shot 2017-10-10 at 11.07.53 AM.png","height":690}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Drag out a timer from the components in the left side menu","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Edit your program to add a new variable","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"click the + icon on the right next to Program Vars to add a new variable","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Name the variable ","type":"text"},{"text":"timer","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the text box below type ","type":"text"},{"text":"timer","type":"text","marks":[{"type":"code"}]},{"text":", and turn on invokes the function","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Change the dropdown to custom event and type ","type":"text"},{"text":"timer","type":"text","marks":[{"type":"code"}]},{"text":" in the box below","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click the gray save button","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Then save the program and that’s it.","type":"text"}]}]}]}],"version":1}

Browser not supported