npm - @adlfe/campaign-management-library - Versions diffs - 2.10.0 → 2.10.2 - Mend

@adlfe/campaign-management-library 2.10.0 → 2.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1655) hide show

package/projects/adl-campaign-management-library-internal/src/assets/flowbuilder/index.html ADDED Viewed

@@ -0,0 +1,738 @@
+<html>
+<head>
+	<script src="./flowbuilder.js"></script>
+	<script>
+		var flowbuilder
+		var activeId = undefined
+		var selected = null
+		var numList = 0
+		var script
+		function init() {
+			flowbuilder = new FlowBuilder(document.getElementById("canvas"))
+			flowbuilder.onCreate = function (newComponent) {
+				clickActive("pointer")
+			}
+			flowbuilder.onSelect = function (selectedComponent) {
+				// hide old form
+				if (selected != selectedComponent) {
+					if (selected != undefined) {
+						if (document.getElementById("form" + selected.getType()) != null) {
+							document.getElementById("form" + selected.getType()).style.display = "none"
+						}
+					}
+				}
+				selected = selectedComponent
+				// show form based on selected
+				if (selected != undefined) {
+					if (document.getElementById("form" + selectedComponent.getType()) != null) {
+						document.getElementById("form" + selectedComponent.getType()).style.display = ""
+					}
+					switch (selected.getType()) {
+						case "FlowSendMsg":
+							console.log("select FlowSendMsg")
+							document.getElementById("txtSendMsgTo").value = selected.getTo()
+							document.getElementById("txtSendMsgMsg").value = selected.getMsg()
+							break;
+						case "FlowSendMedia":
+							console.log("select FlowSendMedia")
+							document.getElementById("txtSendMediaTo").value = selected.getTo()
+							document.getElementById("txtSendMediaType").value = selected.getMediaType()
+							document.getElementById("txtSendMediaURL").value = selected.getMediaURL()
+							document.getElementById("txtSendMediaMsg").value = selected.getMsg()
+							break;
+						case "FlowHttpCall":
+							console.log("select FlowHttpCall")
+							document.getElementById("txtHttpMethod").value = selected.getMethod()
+							document.getElementById("txtHttpUrl").value = selected.getUrl()
+							document.getElementById("txtHttpBodyType").value = selected.getBodyType()
+							document.getElementById("txtHttpBody").value = selected.getBody()
+							break;
+						case "FlowSendButton":
+							console.log("select FlowSendButton")
+							document.getElementById("txtSendBtnTo").value = selected.getTo()
+							document.getElementById("txtSendBtnMsg").value = selected.getMsg()
+							var divBtn = document.getElementById("divButtons")
+							var str = ""
+							for (var i in selected.getButtons()) {
+								var idx = parseInt(i) + 1
+								str += `
+                                        <div id='frameBtn` + idx + `'>
+                                            <input type='text' id='Btn` + idx + `'  value='` + selected.getButtons()[i] + `'>
+                                        </div>
+                                    `
+							}
+							numList = selected.getButtons().length
+							divBtn.innerHTML = str;
+							break;
+						case "FlowSendTemplate":
+							console.log("select FlowSendTemplate")
+							document.getElementById("txtSendTemplateTo").value = selected.getTo()
+							document.getElementById("txtSendTemplateName").value = selected.getTemplateName()
+							document.getElementById("Param1").value = selected.getParameters()[0]
+							document.getElementById("Param2").value = selected.getParameters()[1]
+							document.getElementById("Param3").value = selected.getParameters()[2]
+							break;
+						case "FlowBranch":
+							console.log("select FlowBranch")
+							var divBtn = document.getElementById("divConditions")
+							var str = ""
+							for (var i in selected.getConditions()) {
+								var idx = parseInt(i) + 1
+								str += `
+                                        <div id='frameCon` + idx + `'>
+                                            <input type='text' id='Con` + idx + `'  value='` + selected.getConditions()[i] + `'>
+                                        </div>
+                                    `
+							}
+							numList = selected.getConditions().length
+							divBtn.innerHTML = str;
+							break;
+						case "FlowSendList":
+							console.log("select FlowSendList")
+							document.getElementById("txtSendListTo").value = selected.getTo()
+							document.getElementById("txtSendListMsg").value = selected.getMsg()
+							document.getElementById("txtSendListTitle").value = selected.getListTitle()
+							var divBtn = document.getElementById("divList")
+							var str = ""
+							for (var i in selected.getList()) {
+								var idx = parseInt(i) + 1
+								str += `
+                                        <div id='frameList` + idx + `'>
+                                            <input type='text' id='List` + idx + `'  value='` + selected.getList()[i] + `'>
+                                        </div>
+                                    `
+							}
+							numList = selected.getList().length
+							divBtn.innerHTML = str;
+							break;
+						case "FlowWaitResponse":
+							console.log("select FlowWaitResponse")
+							document.getElementById("txtWaitVariable").value = selected.getVariable()
+							document.getElementById("txtWaitDuration").value = selected.getDuration()
+							break;
+						case "FlowValidation":
+							console.log("select FlowValidation")
+							document.getElementById("txtValidationVariable").value = selected.getVariable()
+							document.getElementById("txtValidationPattern").value = selected.getPattern()
+							document.getElementById("txtValidationCustom").value = selected.getCustomPattern()
+							break;
+					}
+				}
+			}
+			clickActive("pointer")
+		}
+		function clickActive(id) {
+			btn = document.getElementById(activeId);
+			if (btn != undefined) {
+				btn.className = ""
+			}
+			activeId = id
+			btn = document.getElementById(activeId)
+			if (btn != undefined) {
+				btn.className = "btnActive"
+				flowbuilder.setActiveComponent(id)
+			}
+		}
+		function getScript() {
+			script = flowbuilder.getScript()
+			console.log(script)
+		}
+		function loadScript() {
+			flowbuilder.loadScript(script)
+		}
+		function doClear() {
+			flowbuilder.init()
+		}
+		//------------------------------------------------------
+		function save() {
+			if (selected != null) {
+				switch (selected.getType()) {
+					case "FlowSendMsg":
+						selected.setTo(document.getElementById("txtSendMsgTo").value)
+						selected.setMsg(document.getElementById("txtSendMsgMsg").value)
+						break;
+					case "FlowSendMedia":
+						selected.setTo(document.getElementById("txtSendMediaTo").value)
+						selected.setMsg(document.getElementById("txtSendMediaMsg").value)
+						selected.setMediaType(document.getElementById("txtSendMediaType").value)
+						selected.setMediaURL(document.getElementById("txtSendMediaURL").value)
+						break;
+					case "FlowSendButton":
+						selected.setTo(document.getElementById("txtSendBtnTo").value)
+						selected.setMsg(document.getElementById("txtSendBtnMsg").value)
+						var btns = []
+						for (var i = 1; i <= numList; i++) {
+							btns.push(document.getElementById("Btn" + i).value)
+						}
+						selected.setButtons(btns)
+						break;
+					case "FlowSendTemplate":
+						selected.setTo(document.getElementById("txtSendTemplateTo").value)
+						selected.setTemplateName(document.getElementById("txtSendTemplateName").value)
+						var parameters = []
+						parameters.push(document.getElementById("Param1").value)
+						parameters.push(document.getElementById("Param2").value)
+						parameters.push(document.getElementById("Param3").value)
+						selected.setParameters(parameters)
+						break;
+					case "FlowBranch":
+						var btns = []
+						for (var i = 1; i <= numList; i++) {
+							btns.push(document.getElementById("Con" + i).value)
+						}
+						selected.setConditions(btns)
+						break;
+					case "FlowSendList":
+						selected.setTo(document.getElementById("txtSendListTo").value)
+						selected.setMsg(document.getElementById("txtSendListMsg").value)
+						selected.setListTitle(document.getElementById("txtSendListTitle").value)
+						var btns = []
+						for (var i = 1; i <= numList; i++) {
+							btns.push(document.getElementById("List" + i).value)
+						}
+						selected.setList(btns)
+						break;
+					case "FlowWaitResponse":
+						selected.setVariable(document.getElementById("txtWaitVariable").value)
+						selected.setDuration(document.getElementById("txtWaitDuration").value)
+						break;
+					case "FlowValidation":
+						selected.setVariable(document.getElementById("txtValidationVariable").value)
+						selected.setPattern(document.getElementById("txtValidationPattern").value)
+						selected.setCustomPattern(document.getElementById("txtValidationCustom").value)
+						break;
+					case "FlowValidation":
+						selected.setMethod(document.getElementById("txtHttpMethod").value)
+						selected.setUrl(document.getElementById("txtHttpUrl").value)
+						selected.setBody(document.getElementById("txtHttpBody").value)
+						selected.setBodyType(document.getElementById("txtHttpBodyType").value)
+						break;
+				}
+			}
+		}
+		//-----------------------------------------------------------------------
+		function addButton() {
+			if (numList < 3) {
+				var divBtn = document.getElementById("divButtons")
+				numList++
+				btn = document.createElement("DIV")
+				btn.id = "frameBtn" + numList
+				btn.innerHTML = `<input type='text' id='Btn` + numList + `' value='Opt ` + numList + `'>`
+				divBtn.appendChild(btn)
+			} else {
+				alert("Maximum button is 3")
+			}
+		}
+		function delButton() {
+			if (numList > 0) {
+				var divBtn = document.getElementById("divButtons")
+				var btn = document.getElementById("frameBtn" + numList)
+				divBtn.removeChild(btn)
+				numList--
+			}
+		}
+		//-----------------------------------------------------------------------
+		function addCondition() {
+			var divBtn = document.getElementById("divConditions")
+			numList++
+			btn = document.createElement("DIV")
+			btn.id = "frameCon" + numList
+			btn.innerHTML = `<input type='text' id='Con` + numList + `' value='response = "Yes"'>`
+			divBtn.appendChild(btn)
+		}
+		function delCondition() {
+			if (numList > 0) {
+				var divBtn = document.getElementById("divConditions")
+				var btn = document.getElementById("frameCon" + numList)
+				divBtn.removeChild(btn)
+				numList--
+			}
+		}
+		//-----------------------------------------------------------------------
+		function addList() {
+			if (numList < 20) {
+				var divBtn = document.getElementById("divList")
+				numList++
+				btn = document.createElement("DIV")
+				btn.id = "frameList" + numList
+				btn.innerHTML = `<input type='text' id='List` + numList + `' value='Opt ` + numList + `'>`
+				divBtn.appendChild(btn)
+			} else {
+				alert("Maximum Item is 20")
+			}
+		}
+		function delList() {
+			if (numList > 0) {
+				var divBtn = document.getElementById("divList")
+				var btn = document.getElementById("frameList" + numList)
+				divBtn.removeChild(btn)
+				numList--
+			}
+		}
+		//--------------------------------------
+		var varNo = 1;
+		function addVar() {
+			flowbuilder.addVariable("var_" + varNo)
+			varNo++
+		}
+		function delVar() {
+			if (varNo > 0) {
+				varNo--
+				flowbuilder.delVariable("var_" + varNo)
+			}
+		}
+		function getVar() {
+			console.log(flowbuilder.getVariables())
+		}
+	</script>
+	<style>
+		body {
+			margin: 0px;
+			padding: 0px;
+			overflow: hidden;
+			font-family: Helvetica, Arial, Sans-Serif;
+			font-size: 13px;
+		}
+		#header {
+			background-color: #FFFFFF;
+			width: 100%;
+			height: 60px;
+			border-bottom: 1px solid #999999;
+		}
+		#frame {
+			width: 100%;
+			height: calc(100% - 61px);
+			position: relative;
+		}
+		#menu {
+			width: 220px;
+			height: 100%;
+			display: inline-block;
+			background: #FFFFFF;
+			margin: 10px;
+			order: 1;
+			overflow-y: scroll;
+		}
+		#canvas {
+			height: 100%;
+			display: inline-block;
+			background: #cccccc;
+			width: calc(100% - 240px);
+		}
+		.btnActive {
+			background-color: #2596be;
+		}
+		button {
+			margin-top: 4px;
+			margin-bottom: 4px;
+		}
+	</style>
+</head>
+<body onload="init()">
+	<div id="header">Flow Builder</div>
+	<div id="frame">
+		<div id="menu">
+			Menu<br>
+			<button onclick="clickActive('pointer')"
+				id="pointer">Pointer</button><br>
+			<button onclick="clickActive('FlowSendMsg')"
+				id="FlowSendMsg">Send Msg</button><br>
+			<button onclick="clickActive('FlowSendButton')"
+				id="FlowSendButton">Send Button</button><br>
+			<button onclick="clickActive('FlowSendList')"
+				id="FlowSendList">Send List</button><br>
+			<button onclick="clickActive('FlowSendTemplate')"
+				id="FlowSendTemplate">Send Template</button><br>
+			<button onclick="clickActive('FlowSendMedia')"
+				id="FlowSendMedia">Send Media</button><br>
+			<button onclick="clickActive('FlowSendEmail')"
+				id="FlowSendEmail">Send Email</button><br>
+			<button onclick="clickActive('FlowWaitResponse')"
+				id="FlowWaitResponse">Wait Response</button><br>
+			<button onclick="clickActive('FlowValidation')"
+				id="FlowValidation">Validation</button><br>
+			<button onclick="clickActive('FlowBranch')"
+				id="FlowBranch">Branch</button><br>
+			<button onclick="clickActive('FlowHttpCall')"
+				id="FlowHttpCall">Http Call</button><br>
+			<br>
+			<br>
+			<button onclick="doClear()">Clear</button>
+			<button onclick="getScript()">Get Script</button>
+			<button onclick="loadScript()">Load Script</button>
+			<button onclick="addVar()">Add Variable</button>
+			<button onclick="delVar()">Del Variable</button>
+			<button onclick="getVar()">Get Variable</button>
+			<br>
+			<br>
+			<br>
+			<br>
+			<div id="formFlowSendMsg"
+				style="display: none">
+				<div>
+					To : <br><input id="txtSendMsgTo"
+						type="text"></input>
+				</div>
+				<div>
+					Message : <br><textarea id="txtSendMsgMsg"
+						type="text"
+						rows="5"
+						style="width: 100%"></textarea>
+				</div>
+				<div>
+					<button onclick="save()">Save</button>
+				</div>
+			</div>
+			<div id="formFlowSubFlow"
+				style="display: none">
+				<div>
+					Flow : <br><input id="flow"
+						type="text"></input>
+				</div>
+				<div>
+					<button onclick="save()">Save</button>
+				</div>
+			</div>
+			<div id="formFlowSendMedia"
+				style="display: none">
+				<div>
+					To : <br><input id="txtSendMediaTo"
+						type="text"></input>
+				</div>
+				<div>
+					Type : <br>
+					<select id="txtSendMediaType">
+						<option value="image">Image</option>
+						<option value="audio">Audio</option>
+						<option value="video">Video</option>
+						<option value="document">Document</option>
+					</select></input>
+				</div>
+				<div>
+					URL : <br><input id="txtSendMediaURL"
+						type="text"></input>
+				</div>
+				<div>
+					Message : <br><textarea id="txtSendMediaMsg"
+						type="text"
+						rows="5"
+						style="width: 100%"></textarea>
+				</div>
+				<div>
+					<button onclick="save()">Save</button>
+				</div>
+			</div>
+			<div id="formFlowSendButton"
+				style="display: none">
+				<div>
+					To : <br><input id="txtSendBtnTo"
+						type="text"></input>
+				</div>
+				<div>
+					Message : <br><textarea id="txtSendBtnMsg"
+						type="text"
+						rows="5"></textarea>
+				</div>
+				<div>
+					<br>Buttons :
+				</div>
+				<div id="divButtons">
+				</div>
+				<div>
+					<button onclick="addButton()">Add Button</button>
+					<button onclick="delButton()">Del Button</button>
+				</div>
+				<div>
+					<button onclick="save()">Save</button>
+				</div>
+			</div>
+			<div id="formFlowSendTemplate"
+				style="display: none">
+				<div>
+					To : <br><input id="txtSendTemplateTo"
+						type="text"></input>
+				</div>
+				<div>
+					Template : <br>
+					<select id="txtSendTemplateName">
+						<option value="Template_1">Template 1</option>
+						<option value="Template_2">Template 2</option>
+						<option value="Template_3">Template 3</option>
+					</select></input>
+				</div>
+				<div>
+					<br>Param :
+				</div>
+				<div id="divButtons">
+					<div id='frameParam1'>
+						<input type='text'
+							id='Param1'
+							value='param 1'>
+					</div>
+					<div id='frameParam2'>
+						<input type='text'
+							id='Param2'
+							value='param 2'>
+					</div>
+					<div id='frameParam3'>
+						<input type='text'
+							id='Param3'
+							value='param 3'>
+					</div>
+				</div>
+				<div>
+					<button onclick="save()">Save</button>
+				</div>
+			</div>
+			<div id="formFlowBranch"
+				style="display: none">
+				<div>
+					<br>Conditions :
+				</div>
+				<div id="divConditions">
+				</div>
+				<div>
+					<button onclick="addCondition()">Add Condition</button>
+					<button onclick="delCondition()">Del Condition</button>
+				</div>
+				<div>
+					<button onclick="save()">Save</button>
+				</div>
+			</div>
+			<div id="formFlowSendList"
+				style="display: none">
+				<div>
+					To : <br><input id="txtSendListTo"
+						type="text"></input>
+				</div>
+				<div>
+					Message : <br><textarea id="txtSendListMsg"
+						type="text"
+						rows="5"></textarea>
+				</div>
+				<div>
+					List Title : <br><input id="txtSendListTitle"
+						type="text"></input>
+				</div>
+				<div>
+					<br>List :
+				</div>
+				<div id="divList">
+				</div>
+				<div>
+					<button onclick="addList()">Add Item</button>
+					<button onclick="delList()">Del Item</button>
+				</div>
+				<div>
+					<button onclick="save()">Save</button>
+				</div>
+			</div>
+			<div id="formFlowWaitResponse"
+				style="display: none">
+				<div>
+					Variable : <br><input id="txtWaitVariable"
+						type="text"></input>
+				</div>
+				<div>
+					Duration : <br><input id="txtWaitDuration"
+						type="text"></input>
+				</div>
+				<div>
+					<button onclick="save()">Save</button>
+				</div>
+			</div>
+			<div id="formFlowValidation"
+				style="display: none">
+				<div>
+					Variable : <br><input id="txtValidationVariable"
+						type="text"></input>
+				</div>
+				<div>
+					Pattern : <br>
+					<select name="cars"
+						id="txtValidationPattern">
+						<option value="PhoneNo">PhoneNo</option>
+						<option value="Email">Email</option>
+						<option value="Number">Number</option>
+						<option value="URL">URL</option>
+						<option value="Custom">Custom</option>
+					</select></input>
+				</div>
+				<div>
+					Custom Pattern : <br><input id="txtValidationCustom"
+						type="text"></input>
+				</div>
+				<div>
+					<button onclick="save()">Save</button>
+				</div>
+			</div>
+			<div id="formFlowHttpCall"
+				style="display: none">
+				<div>
+					Method : <br>
+					<select id="txtHttpMethod">
+						<option value="POST">POST</option>
+						<option value="PUT">PUT</option>
+						<option value="GET">GET</option>
+						<option value="DELETE">DELETE</option>
+					</select></input>
+				</div>
+				<div>
+					URL : <br><input id="txtHttpUrl"
+						type="text"></input>
+				</div>
+				<div>
+					Body Type : <br>
+					<select id="txtHttpBodyType">
+						<option value="JSON">JSON</option>
+						<option value="FORM">Form</option>
+						<option value="NONE">None</option>
+					</select></input>
+				</div>
+				<div>
+					Body : <br><textarea id="txtHttpBody"
+						rows="5"
+						style="width: 100%"></textarea>
+				</div>
+				<div>
+					<button onclick="save()">Save</button>
+				</div>
+			</div>
+		</div>
+		<div id="canvas">
+			canvas
+		</div>
+	</div>
+</body>
+</html>