UI Widgets

Generates a view based the raw date "Qewd Data" and an applied "Schema" within PulseTile. The schema defines the presentation for both the read only edit view within the application.

by Simon Gamester

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
		    
		    <h1>UI Widget Generator</h1>
		    
		    <form id="build">
			    <p>Generates a view based the raw date "Qewd Data" and an applied "Schema" within PulseTile. The schema defines the presentation for both the read only edit view within the application.</p>
				
				<div class="form-group">
					<label for="module">Select Module</label>
					<p>Populates to Data API and Schema with example data.</p>
					<select class="form-control form-control-lg" id="module">
						<option value="personalnotes" selected="selected">Personal Notes</option>
						<option value="orders">Orders</option>
						<option value="events">Events</option>
						<option value="testresults">Test Results</option>
						<option value="procedures">Procedures</option>
						<option value="vaccinations">Vaccinations</option>
						<option value="referrals">Referrals</option>
						<option value="mdt">MDT</option>
					</select>
				</div>
				<div class="form-group">
					<label for="qewd">Qewd to PulseTile API Data</label>
					<textarea class="form-control" id="qewd" rows="8"></textarea>
				</div>
				
				<div class="form-group">
					<label for="schema">PulseTile UI Schema</label>
					<textarea class="form-control" id="schema" rows="25"></textarea>
				</div>
		    
			    <button id="build-read" class="btn btn-primary">Build Read View</button>
			    <button id="build-edit" class="btn btn-primary">Build Edit View</button>
	    	
		    </form>
	    	
	    	<div id="page">
		    	<form>
			    	<div id="view"></div>
			    	
			    	<!-- Personal Notes -->
			    	<div id="view-personalnotes" class="template">
				    	<h2>{{module.title}}</h2>
				    	
				   ...

CSS

#page, #htmlOutputWrapper, #build {
	margin: 30px 0;
}

#page {
	border: 1px dashed #ccc;
	padding: 30px;
	background: #f9f9f9;
	border-radius: 5px;
}

label {
	font-weight: bold;
}

.template {
	display: none;
}

JavaScript

// Default Data - Used to populate in the form
var qewd = $.parseJSON(`{
	"personalnotes": {
		"author": "Dr Tony Shannon",
		"dateCreated": 1456287062000,
		"noteType": "Generic Plugin",
		"source": "ethercis",
		"sourceId": "23dbda9d-7688-426c-8cb8-312a4f351071"
	},
	"orders": {
		"name": "Cardiac-ECG",
		"orderDate": 1458738936944,
		"source": "ethercis",
		"sourceId": "23dbda9d-7688-426c-8cb8-312a4f351071"
	},
	"events": {
		"dateCreated": 1494586220000,
		"dateTime": 1494496220958,
		"description": "Needs nursing and supervisory care",
		"name": "Discharge to care home",
		"source": "ethercis",
		"sourceId": "93ac376d-3ff4-4e0b-b080-47eb3fe81750",
		"type": "Admission",
		"typeMultiple": "Admission"
	},
	"testresults": {
		"dateCreated":1427004662000,
		"sampleTaken":1426889462518,
		"source":"ethercis",
		"sourceId":"810272ac-28e8-4928-b61b-79dcef4b4170",
		"testName":"Example Name"
	},
	"procedures": {
		"date":1436969493829,
		"name":"total replacement of hip",
		"source":"ethercis",
		"sourceId":"fa7408c3-7d69-4f50-84ac-cbf735a0ab18",
		"time":54693829
	},
	"vaccinations": {
		"dateCreated":1356149462000,
		"source":"ethercis",
		"sourceId":"3e13f196-2334-41b6-b788-660464e7436a",
		"vaccinationName":"Influenza"
	},
	"referrals": {
		"dateOfReferral":1458792662000,
		"referralFrom":"Tony Shannon",
		"referralTo":"Ripplefields Optometry service",
		"source":"ethercis",
		"sourceId":"94133578-f505-4e76-b4ed-762462508801"
	},
	"mdt": {
		"dateOfMeeting":1455062400000,
		"dateOfRequest":1458739933006,
		"serviceTeam":"",
		"source":"marand",
		"sourceId":"5836b208-160f-4925-b2b1-a26626432940"
	}

}`);

var schemas = $.parseJSON(`{
	"personalnotes": {
		"title": "Personal Notes",
		"fields": [
			{
				"name": "author",
				"type": "textBox",
				"label": "Author"
			},
			{
				"name": "dateCreated",
				"type": "calendarBox",
				"label": "Date Created"
			},
			{
				"name": "noteType",
				"type": "textArea",
				"label": "Note Type"
			},
			{
				"name":...