analytics/webapps/p2pd/WEB-INF/fragments/producers/mobileAdmin/skinConfig/skinConfigPageMarkup.htm

<!--
 IBM Confidential
 OCO Source Materials
 BI and PM: Mobile
 (C) Copyright IBM Corp. 2013. 2014
 US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
-->
<div id="_THIS_idFragmentContainer">
	
		
		<script type="text/javascript">
			dojo.require("dojo.NodeList-manipulate");

			var _THIS_skinAPI = {
				 onFragmentVisibilityChange : function(){
					  
				 },
				 
				 chooseObject : function() {
					var url = '%GATEWAY%?b_action=xts.run&m=portal/select/select.xts&so.select=users.pw2&' + 
					'md.callBack=xml&md.displayOptions=h1&' + 
					'backURL=javascript:parent.ui_modal_dialog.close()';
					var iframeStaticHeight = parseInt(xClientHeight() * .75);
					var iframeStaticWidth = parseInt(xClientWidth() * .75);
					this.modalDialog = new ui_dialog('modalDialogViewer', '<string id=BROWSE_GROUP_BUTTON>', ui_dialog.style.BTN_NOBUTTONS | ui_dialog.style.CENTER | ui_dialog.style.IFRAME, -1, -1, iframeStaticWidth, iframeStaticHeight, _THIS_.div, url);
					
					this.modalDialog.show();
					
					this.skinModalDialog.disable();
					
					ccModalCallBack = dojo.hitch(this, this.selectGroupCallBack);
				},
				
				showAddSkin : function(skin){
					var modalSkinDialogTemplate = document.getElementById("_THIS_uploadSkin");
					var templateParent = modalSkinDialogTemplate.parentNode;
					templateParent.removeChild(modalSkinDialogTemplate);
					
					var skinDialog = modalSkinDialogTemplate.cloneNode("true");
					var dialogSection = document.getElementById("_THIS_dialogSection");
					dialogSection.appendChild(skinDialog);
					
					
					
					var title = "<string id=SKIN_ADD_TITLE>";
					if (skin){
						title = "<string id=SKIN_EDIT_TITLE>";
					}
						
					
					this.skinModalDialog = showModalDialog(ui_dialog.style.BTN_OKCANCEL, '_THIS_uploadSkin', title, document.body.clientHeight - 180, document.body.clientWidth - 80);
					
					if (skin){
						/* This has to happen after showModal as IE barks on the set of innerHTML of the label if we do not */
						var renderIDNode = document.getElementById("_THIS_RENDER_ID");
						renderIDNode.setAttribute("value", skin.render.id);
						
						var skinNameNode = document.getElementById("_THIS_SKINNAME");
						skinNameNode.setAttribute("value", skin.render.name);
						
						var groupIDNode = document.getElementById("_THIS_GROUP_ID");
						var groupIds = [];
						groupIds.push(skin.group.id);
						groupIDNode.setAttribute("value", dojo.toJson(groupIds));
						
						
						var groupNameField = document.getElementById("_THIS_GROUP");
						groupNameField.setAttribute("value", skin.group.name);
						
						document.getElementById("_THIS_BROWSE_LABEL").innerHTML="<string id=SKIN_EDIT_UPLOAD_TITLE>";
					}
					
					this.skinModalDialog.disable = dojo.hitch(this.skinModalDialog, function(){
						this.isDisabled=true;
						this.disabler = document.createElement("div");
						this.disabler.style.backgroundColor="#dddddd";
						this.disabler.style.width="100%";
						this.disabler.style.height="100%";
						this.disabler.style.position="absolute";
						this.disabler.style.top="0px";
						this.disabler.style.left="0px";
						this.disabler.style.opacity="0.5";
						this.disabler.style.filter="alpha(opacity=50))";
						this.dlg.appendChild(this.disabler);
					});
					
					this.skinModalDialog.enable = dojo.hitch(this.skinModalDialog, function(){
						this.isDisabled=false;
						
						this.dlg.removeChild(this.disabler);
						this.onactivate();
					});
					
					this.skinModalDialog.onactivate = dojo.hitch(this.skinModalDialog, function(){
						if (this.isDisabled){
							return;
						}
						else{
							ui_dialog.prototype.onactivate.apply(this, arguments);
						}
					});
					
					
					this.skinModalDialog.processCommand = dojo.hitch(this, function (btnType) {
						var close = true;
						try{
							if (btnType == ui_dialog.button.OK) {
								close = this._processSkinResult(skin != null);
				            } 
			            }
			            finally{
			            	if (close){
				            	this.skinModalDialog.destroy();
				            	templateParent.appendChild(modalSkinDialogTemplate);
			            	}
			            }
			            return close;
				    });
					
				},
				
				_processSkinResult : function(isEdit){
					return this.submitForm(isEdit);	
				},
				
				
				
				selectGroupCallBack : function(cmd, sResponse){
					this.skinModalDialog.enable();
					
					if(cmd == 'ok' && sResponse){
						var groupResponse = this._handleGroupResponse(sResponse);
						
						if (groupResponse.objectClass != "group" && groupResponse.objectClass != "role"){
							alert("<string id=SKINS_NOT_A_GROUP>");
						}
						else{
							document.getElementById("_THIS_GROUP").value=groupResponse.name;
							var groupPaths = document.getElementById("_THIS_GROUP_SEARCH_PATH");
							
							if (!groupPaths.groups){
								groupPaths.groups = [];
							}
							groupPaths.groups.length=0;
							groupPaths.groups.push(groupResponse.searchPath);
						}
						this.modalDialog.hide();
						this.modalDialog.destroy();
						this.modalDialog = null;
					}
					else{
						this.modalDialog.hide();
						this.modalDialog.destroy();
						this.modalDialog = null;
					}
				},
				
				_handleGroupResponse : function(sResponse){
					var response = this.decode(sResponse);
					var xml = new this.XMLBuilderLoadXMLFromString(response);
					
					if(xml)
					{
						var searchPathNode = _F_DOM.selectSingleNode(xml, "/return/object/item/name[text() = 'searchPath']/../value");
						var objectClassNode = _F_DOM.selectSingleNode(xml, "/return/object/item/name[text() = 'objectClass']/../value");
						var defaultNameNode = _F_DOM.selectSingleNode(xml, "/return/object/item/name[text() = 'defaultName']/../value");
						var nameNode = _F_DOM.selectSingleNode(xml, "/return/object/item/name[text() = 'name']/../value");
						
						var nameResponse = this.decode(_F_DOM.text(nameNode));
						nameResponse = "<root>"+nameResponse+"</root>";
						var nameXML = this.XMLBuilderLoadXMLFromString(nameResponse);
						var namePath = "/root/multilingualToken[@xml:lang = '" + _F_Config.productLocale + "']";
						var localizedNameNode = _F_DOM.selectSingleNode(nameXML, namePath);
						
						                                                          
						var group = {
								searchPath: _F_DOM.text(searchPathNode),
								objectClass: _F_DOM.text(objectClassNode),
								name: localizedNameNode != null ? _F_DOM.text(localizedNameNode) : _F_DOM.text(defaultNameNode)
								};
						
						
						return group;
					}
				},
				
				decode : function(text)
				{
					var amp_re = /&amp;/g;
					var lt_re = /&lt;/g;
					var gt_re = /&gt;/g;
					var apos_re = /&apos;/g;
					
					text = text.replace(lt_re, "<");
					text = text.replace(gt_re, ">");
					text = text.replace(apos_re, "'");
					text = text.replace(amp_re, "&");
	
					return text;
				},
				
				XMLBuilderLoadXMLFromString : function (markup)
				{
					var xmlDocument = null;
					if (typeof DOMParser != 'undefined')
					{
						xmlDocument = new DOMParser().parseFromString(markup, 'application/xml');
					}
					else if (typeof ActiveXObject != 'undefined')
					{
						try
						{
							xmlDocument = new ActiveXObject('Microsoft.XMLDOM');
							xmlDocument.loadXML(markup);
						}
						catch (e)
						{
						}
					}
					return xmlDocument;
				},
				
				findErrorCode : function (messageSection, errorCodeStr){
					for (var x in messageSection){
						var val = messageSection[x];
						
						if (val.startsWith(errorCodeStr)){
							return val;
						}
					}
				},
				
				_handleJsonUploadResponse : function(jsonText){
					var response = dojo.fromJson(jsonText);
					
					if (response.result.code == "success"){
						this._updateSkinsList(response.result);
					}
					else{
						var message = this.findErrorCode(MOB.SVR, "MOB-SVR-"+code);
						alert(message);
					}
				},
				
				_handleXMLUploadResponse : function(xmlDoc){
					var xmlCode = _F_DOM.selectSingleNode(xmlDoc, ".//code");
					var code = _F_DOM.text(xmlCode);
					
					if (code === "success"){
						alert("<string id=SKIN_UPLOAD_SUCCESFULL>");
					}
					else{
						var message = this.findErrorCode(MOB.SVR, "MOB-SVR-"+code);
						alert(message);
					}

				},
				
				mobileSkinUploadResult : function(){
					var frame = document.getElementById("_THIS_formPoster");
					
					if (frame.contentWindow && frame.contentWindow.location.toString().indexOf("http")== 0){
						try
						{	
							var doc = frame.contentWindow.document;
							var xmlDoc;
							if( typeof ActiveXObject != 'undefined') {
								xmlDoc = doc.XMLDocument;
							} else {
								xmlDoc = doc.documentElement;
							}

							if (xmlDoc && xmlDoc.nodeName !== "HTML"){
								this._handleXMLUploadResponse(xmlDoc);
							}
							else{
								var nodeList = dojo.query("*", frame.contentWindow.document.body);
								var jsonText = nodeList.text();
								this._handleJsonUploadResponse(jsonText);
							}
						}
						catch (err){
							alert("<string id=SKIN_FAILURE>");
						}
						finally{
							this.endBusy();
						}
					}
				},
				
				validateForm : function(isEdit){
					var valid=true;
					if (!isEdit){
						var groupPaths = document.getElementById("_THIS_GROUP_SEARCH_PATH");
						
						if (!groupPaths.groups){
							valid=false;
						}
						var upload = document.getElementById("_THIS_BROWSE");
						var value = upload.value;
						
						
						if (!value){
							valid=false;
						}
						if (!valid){
							alert("<string id=SKIN_GROUP_AND_ZIP_REQUIRED>");
						}						
					}
					else{
						var groupPaths = document.getElementById("_THIS_GROUP_SEARCH_PATH");
						
						if (!groupPaths.groups || groupPaths.length == 0){
							var groupIDNode = document.getElementById("_THIS_GROUP_ID");
							var value = groupIDNode.getAttribute("value");
							
							if (!value){
								valid=false;
							}
						}
						
						var skinNameNode = document.getElementById("_THIS_SKINNAME");
						var value = skinNameNode.value;
						if (!value || value == ""){
							valid=false;	
						}
						if (!valid){
							alert("<string id=SKIN_NAME_AND_GROUP_REQUIRED>");
						}
					}
					
					return valid;
				},
				
				
				submitForm : function(isEdit){
					if (this.validateForm(isEdit)){
						var groupPaths = document.getElementById("_THIS_GROUP_SEARCH_PATH");
						
						if (groupPaths.groups){
							groupPaths.value = dojo.toJson(groupPaths.groups);
						}
						this.startBusy();
						document.getElementById("_THIS_skin_form").submit();
						return true;
					}
					
					return false;
				},
				
				_updateSkinsList : function(response){
					var skinTable = document.getElementById("_THIS_SKIN_TABLE");
					
					var trs = skinTable.childNodes;
					var foundFirst = false;
					for (var i = trs.length -1; i >= 0; i--){
						var child = trs[i];
						if (child.tagName && child.tagName.toLowerCase() == "tr"){
							if (child.getAttribute("canDelete") != "false"){
								trs[i].parentNode.removeChild(trs[i]);
							}
						}
					}
					var skinObj = response.skins.skin;
					
					var skinList = [];
					if (skinObj && skinObj.length){
						skinList = skinObj;
					}
					else if (skinObj){
						skinList.push(skinObj);
					}
					for (var i=0; i < skinList.length; i++){
						this._addToSkinList(skinList[i], i); 
					}
					
				},
				
				sendBrowseRequest : function(){
					 var xhrArgs = {
							    url: "%GATEWAY%/mobileService/skins/browse.json",
							    handleAs: "json",
							    load: dojo.hitch(this, function(data){
							    	this.endBusy();
							    	this._updateSkinsList(data);
							    }),
							    error: dojo.hitch(this, function(error){
							    	this.endBusy();
							     	alert("<string id=SKIN_FAILURE>");
							    })
					};
					this.startBusy();
					 var deferred = dojo.xhrGet(xhrArgs);
				},
				
				_addToSkinList: function(skin, index){
					var tr = document.createElement("tr");
					if (index % 2 == 0){
						tr.className="cogstyle-table-row-default";						
					}
					else{
						tr.className="cogstyle-table-row-alternate";
					}
					
					tr.setAttribute("renderID", skin.render.id);
					dojo.place(
					
						"<td nowrap='' > "+
							"<input id='checkbox_select_render_" + skin.render.id + "' type='checkbox' > "+
							"<label for='checkbox_select_render_" + skin.render.id + "' style='display:none'>"+
							"<string id=SKIN_SELECT>" + skin.render.name + "</label>"+
						"</td>"+
						"<td nowrap='' style='text-align:left;'> "+
							"<table cellspacing='0' cellpadding='0' role='presentation'> "+
								"<tbody> "+
								"<tr> "+
									"<td style='padding:0px;white-space:nowrap;'>"+
									skin.render.name +
									"</td> "+
								"</tr> "+
								"</tbody> "+
							"</table> "+
						"</td> "+
						"<td nowrap='' style='text-align:left;'> "+
							"<table cellspacing='0' cellpadding='0' role='presentation'> "+
								"<tbody> "+
								"<tr> "+
									"<td style='padding:0px;white-space:nowrap;'>"+
									skin.group.name +
									"</td> "+
								"</tr> "+
								"</tbody> "+
							"</table> "+
						"</td> "+
						"<td nowrap='''><a href='javascript:noop()'><img role='button' border='0' title='<string id=SKIN_PROPERTIES>' alt='<string id=SKIN_PROPERTIES>' src='../ps/portal/images/action_properties.gif' style='vertical-align:middle;width:16px;' > </a>"+
						"</td> "+
					"</tr> ", tr);
					
					var skinTable = document.getElementById("_THIS_SKIN_TABLE");
					skinTable.appendChild(tr);
					var editImg = dojo.query("img", tr)[0];
					
					editImg.onclick=dojo.hitch(this, this.editRender, skin);
				},
				
				editRender : function(skinRender){
					this.showAddSkin(skinRender);
				},
				
				toggleSkinSelections : function(){
					var toggleNode = document.getElementById("_THIS_toggleAll");
					var skinTable = document.getElementById("_THIS_SKIN_TABLE");
					var trs = dojo.query("tr[renderID]", skinTable);
					
					for (var i = 0; i < trs.length; i++){
						var checkNodeList = dojo.query("input[type = 'checkbox']", trs[i]);
						
						if (checkNodeList.length > 0){
							checkNodeList[0].checked=toggleNode.checked;
						}
					}
				},
				
				removeSelectedSkins : function(){
					
					var skinTable = document.getElementById("_THIS_SKIN_TABLE");
					var trs = dojo.query("tr[renderID]", skinTable);
					var removed = [];
					
					for (var i = 0; i < trs.length; i++){
						var checkNodeList = dojo.query("input[type = 'checkbox']", trs[i]);
						
						if (checkNodeList.length > 0 && checkNodeList[0].checked){
							removed.push(trs[i].getAttribute("renderID"));
						}
					}
					
					if ( removed.length > 0 ){
						if ( window.confirm("<string id=SKIN_CONFIRM_DELETE>") ) {
							var parms = {};
							parms.renders = dojo.toJson(removed);
						 	var xhrArgs = {
							    url: "%GATEWAY%/mobileService/skins/delete.json",
							    handleAs: "json",
							    load: dojo.hitch(this, function(data){
							    	this.endBusy();
							    	this._updateSkinsList(data.result);
							    }),
							    error: dojo.hitch(this, function(error){
							    	this.endBusy();
							      alert("<string id=SKIN_UNEXPECTED_ERROR>");
							    }),
							    content: parms
							};
							this.startBusy();
							var deferred = dojo.xhrGet(xhrArgs);
						}
					}
					else{
						alert("<string id=SKIN_CHOOSE_TO_DELETE>");
					}
				},
				
				startBusy : function(){
					document.body.style.cursor ='wait';
				},
				
				endBusy : function(){
					document.body.style.cursor = 'default';
				}
			};
			_THIS_.addEventListener('fragment.visibility.change', dojo.hitch(_THIS_skinAPI, _THIS_skinAPI.onFragmentVisibilityChange), false);
			_THIS_skinAPI.sendBrowseRequest(); 
		</script>
		
				
		<div >
		
		<div>
		<!-- Fragment title bar -->
		<table class="cogstyle-portlet-caption-bar" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
			<tbody>
				<tr>
					<td class="cogstyle-portlet-caption" width="100%" valign="top">
					<span>
						<div role="heading" id="_THIS_CAPTION_BAR_TITLE"><string id=SKIN_FRAGMENT_TITLE></div>
					</span>
				</tr>
			</tbody>
		</table>
		
		<iframe style='visiblity:hidden;width:0px;height:0px;border:none' frameborder='0' name='formPoster' title='formPoster' id="_THIS_formPoster"  onload='if (window._THIS_skinAPI.mobileSkinUploadResult){_THIS_skinAPI.mobileSkinUploadResult();}' ></iframe>

		<span style="display:none" id="_THIS_hiddenSection">
			<div id="_THIS_uploadSkin">
				<form id='_THIS_skin_form' target='formPoster'  method='POST' enctype='multipart/form-data' action='%GATEWAY%/mobileService/skins/upload.json'>
				<table role='presentation'><tr><td>
				<label  for="_THIS_SKINNAME" class="formLabel"><string id=SKIN_NAME></label><br>
				<input type='text' name='skinName' id="_THIS_SKINNAME"></td></tr>
				<tr><td>
				<br/><label  for="_THIS_BROWSE" class="formLabel" id="_THIS_BROWSE_LABEL"><string id=SKIN_UPLOAD_TITLE></label><br>
				<input type='file' name='skinFile' id="_THIS_BROWSE" ></td></tr>
				<tr><td>
				<br/><label class="formLabel" for="_THIS_GROUP"><string id=GROUP_BROWSE_LABEL></label><br>
				<input type='button' onclick='_THIS_skinAPI.chooseObject()' value='<string id=BROWSE_GROUP_BUTTON>' name='chooseGroupButton'><input id="_THIS_GROUP" type='text' name='groupNames' value='' readonly></td></tr>
				</table>
				<input type='hidden' name='skinGroup' id="_THIS_GROUP_SEARCH_PATH">
				<input type='hidden' name='skinGroupID' id="_THIS_GROUP_ID">
				<input type='hidden' name='renderID' id="_THIS_RENDER_ID">
				</form>
			</div>
		</span>
		<span id="_THIS_dialogSection">
		</span>
		 
		<div style="margin-right:20px">
			<table style="width:100%">
			<tr>
			<td style="text-align:right">
				<a href="javascript:_THIS_skinAPI.showAddSkin()"><img role="button" style="border:0" title="<string id=SKIN_ADD_TEXT>" alt="<string id=SKIN_ADD_TEXT>" src="../ps/portal/images/action_new_cognos_content.gif"></a>
				<a href="javascript:_THIS_skinAPI.removeSelectedSkins()"><img role="button" style="border:0" title="<string id=SKIN_REMOVE_TEXT>" alt="<string id=SKIN_REMOVE_TEXT>" src="../ps/portal/images/action_delete.gif"></a>
			</td>
			</tr>
			
			</table>
				
		</div>
		
		<div class="cogstyle-table-wrapper">
			<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;width:100%;overflow:auto;" class="cogstyle-table" >
			
				<thead style="background-color:#99aacc;" class="cogstyle-table-header">
					<tr>
						<th width="15px" nowrap="">
							<input type="checkbox"  id="_THIS_toggleAll" onclick="_THIS_skinAPI.toggleSkinSelections()" value="true" cogtype="checkbox_toggler">
							<label for="_THIS_toggleAll" style="display:none"><string id=ADMIN_SKIN_SELECT_ALL_CHECKBOX_LABEL></label>
						</th>
	
						<th nowrap="" style="text-align:left;" class="cogstyle-table-group-title">
							&nbsp;<string id=ADMIN_SKIN_NAME>
						</th>
			
						<th nowrap="" style="text-align:left;" class="cogstyle-table-group-title">
							<string id=ADMIN_SKIN_GROUP>
						</th>
						<th nowrap="" style="text-align:left;" class="cogstyle-table-group-title">
							<string id=ADMIN_SKIN_ACTION>
						</th>
			</tr>
			</thead>
			<tbody class="cogstyle-table-body"  id="_THIS_SKIN_TABLE">
			<tr>
				<td style="height:1px;padding:0;margin:0;background-color:#ffffff;border:1px" colspan="15"></td>
			</tr>
			
			</tbody>
			</table>
		</div>
		
		</div>
		
		
	</div> 
	
</div>