JSFiddle - React, Tailwind, and code Playground

by Jens Schyma

HTML

<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>

<script id="myView" type="ui5/xmlview">
  <mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
  xmlns:layout="sap.ui.commons.layout" xmlns:m="sap.m" xmlns:t="sap.ui.table" xmlns:u="sap.ui.unified">
 <layout:MatrixLayout>
    	<layout:rows>
        <layout:MatrixLayoutRow>
        	<layout:MatrixLayoutCell backgroundDesign="Fill1" padding="None">
          <u:FileUploader
			id="fileUploader"
			name="myFileUpload"
			uploadUrl="upload/"
			tooltip="Upload your file to the local server"
			uploadComplete="handleUploadComplete" change="onTest"/>
          
          <Button text="Replace" press="onPressReplace"/>
          </layout:MatrixLayoutCell>
        </layout:MatrixLayoutRow>
      	<layout:MatrixLayoutRow>
        	<layout:MatrixLayoutCell backgroundDesign="Fill1" padding="None">
    <t:Table
				rows="{/Types}"
				title="Cprojects Templates"
				selectionMode="MultiToggle"
				visibleRowCount="7"
				paste="onPaste">
				<t:columns>
					<t:Column width="11rem">
						<m:Label text="Kind" />
						<t:template>
							<m:Text text="{kind}" wrapping="false" />
						</t:template>
					</t:Column>
          <t:Column width="11rem">
						<m:Label text="Original Value" />
						<t:template>
							<m:Text text="{val}" wrapping="false" />
						</t:template>
					</t:Column>
          <t:Column width="11rem">
						<m:Label text="Replace" />
						<t:template>
							<m:Input value="{repl}" wrapping="false" />
						</t:template>
					</t:Column>
          
        </t:columns>
     </t:Table>
    
    </layout:MatrixLayoutCell>
        </layout:MatrixLayoutRow>
      </layout:rows>
    </layout:MatrixLayout>
 ...

JavaScript

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}
 sap.ui.getCore().attachInit(function() {
   "use strict";
   sap.ui.controller("MyController", {
     mJSONModel : new sap.ui.model.json.JSONModel(),
     onInit: function() {
     	this.mJSONModel.setData({
      	Types:[
        	
        ]
      });
			this.getView().setModel(this.mJSONModel);
     },
     onTest: function(e){
     				var file = e.getParameter("files") && e.getParameter("files")[0];
           if(file && window.FileReader){  
              var reader = new FileReader();  
              var that = this;  
              reader.onload = function(evn) {  
                var strCSV= evn.target.result; //string in CSV 
                  that.onPressLoad(strCSV);
                };
              reader.readAsText(file);  
            }
     },
     mXML:"",
     onPressLoad: function(inData){
     //var oFileUploader = this.byId("fileUploader");
     //debugger;
     this.mXML = inData;
     	var d = this.getListOfTypes(inData);
     	this.mJSONModel.setData({
      	Types:d   
      });
     },
     onPressReplace: function(){
      var oFileUploader = this.byId("fileUploader");
     	var output = this.replaceInXML(this.mXML,this.mJSONModel.getData().Types);
      var OldName = oFileUploader.oFilePath.getDOMValue();
      download("CHANGED_"+OldName,output);
     },
     regex  : [
      {kind:"Project Type",elname:"PRO_TYPE"},
      {kind:"Task Type",elname:"TSK_TYPE"},//,r:/<TSK_TYPE>(.*?)<\/TSK_TYPE>/gm},
      {kind:"Phase Type",elname:"PHA_TYPE"},
      {kind:"Rate",elname:"RATE"},
      {kind:"Role Type",elname:"PARTICIPANT_ROLE"},
      {kind:"Role Function",elname:"ROLE_FUNCTION_ID"},
     ...