.btn-style{ | |||||
min-width: 150px; | |||||
margin-right: 10px; | |||||
margin-top: 20px; | |||||
} | |||||
body{ | |||||
padding-top: 70px; | |||||
} | |||||
.menu { | |||||
position: absolute; | |||||
top: 0px; | |||||
left: 0px; | |||||
width: 100%; | |||||
height: 30px; | |||||
padding: 10px; | |||||
color: white; | |||||
background-color: black; | |||||
} | |||||
.img-center{ | |||||
margin-top: 30px; | |||||
margin-left: auto; | |||||
margin-right: auto; | |||||
} | |||||
{ | |||||
"active": true, | |||||
"address": [ | |||||
{ | |||||
"city": "Amsterdam", | |||||
"country": "NLD", | |||||
"line": [ "Van Egmondkade 23" ], | |||||
"postalCode": "1024 RJ", | |||||
"use": "home" | |||||
} | |||||
], | |||||
"birthDate": "1944-11-17", | |||||
"communication": [ | |||||
{ | |||||
"language": { | |||||
"coding": [ | |||||
{ | |||||
"code": "nl", | |||||
"display": "Dutch", | |||||
"system": "urn:ietf:bcp:47" | |||||
} | |||||
], | |||||
"text": "Nederlands" | |||||
}, | |||||
"preferred": true | |||||
} | |||||
], | |||||
"contact": [ | |||||
{ | |||||
"name": { | |||||
"family": [ "Abels" ], | |||||
"given": [ "Sarah" ], | |||||
"use": "usual" | |||||
}, | |||||
"relationship": [ | |||||
{ | |||||
"coding": [ | |||||
{ | |||||
"code": "partner", | |||||
"system": "http://hl7.org/fhir/patient-contact-relationship" | |||||
} | |||||
] | |||||
} | |||||
], | |||||
"telecom": [ | |||||
{ | |||||
"system": "phone", | |||||
"use": "mobile", | |||||
"value": "0690383372" | |||||
} | |||||
] | |||||
} | |||||
], | |||||
"deceasedBoolean": false, | |||||
"gender": "male", | |||||
"id": "f001", | |||||
"identifier": [ | |||||
{ | |||||
"system": "urn:oid:2.16.840.1.113883.2.4.6.3", | |||||
"use": "usual", | |||||
"value": "738472983" | |||||
} | |||||
], | |||||
"managingOrganization": { | |||||
"display": "Burgers University Medical Centre", | |||||
"reference": "Organization/f001" | |||||
}, | |||||
"maritalStatus": { | |||||
"coding": [ | |||||
{ | |||||
"code": "M", | |||||
"display": "Married", | |||||
"system": "http://hl7.org/fhir/v3/MaritalStatus" | |||||
} | |||||
], | |||||
"text": "Getrouwd" | |||||
}, | |||||
"multipleBirthBoolean": true, | |||||
"name": [ | |||||
{ | |||||
"family": [ "van de Heuvel" ], | |||||
"given": [ "Pieter" ], | |||||
"suffix": [ "MSc" ], | |||||
"use": "usual" | |||||
} | |||||
], | |||||
"photo": [], | |||||
"resourceType": "Patient", | |||||
"telecom": [ | |||||
{ | |||||
"system": "phone", | |||||
"use": "mobile", | |||||
"value": "0648352638" | |||||
}, | |||||
{ | |||||
"system": "email", | |||||
"use": "home", | |||||
"value": "p.heuvel@gmail.com" | |||||
} | |||||
] | |||||
} |
<!DOCTYPE html> | |||||
<html> | |||||
<head> | |||||
<meta charset="utf-8" /> | |||||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |||||
<title></title> | |||||
<!--css--> | |||||
<link rel="stylesheet" href="css/mobile.css"> | |||||
<link rel="stylesheet" href="../../lib/bootstrap.min.css"> | |||||
</head> | |||||
<body> | |||||
<div id="navigation"></div> | |||||
<div class="container"> | |||||
<div id="content"></div> | |||||
</div> | |||||
<div id="date"> | |||||
</div> | |||||
<!--scripts--> | |||||
<script src="../../lib//jquery-2.2.4.min.js"></script> | |||||
<script src="../../lib/es6-shim.min.js"></script> | |||||
<script src="../../lib/bootstrap.min.js"></script> | |||||
<script src="../../lib/babel.min.js"></script> | |||||
<script src="../../lib/react.js"></script> | |||||
<script src="../../lib/react-dom.js"></script> | |||||
<script src="scripts/app.js"></script> | |||||
<script src="scripts/landung.js"></script> | |||||
<script src="scripts/Patient.js"></script> | |||||
<script src="scripts/fhirService.js"></script> | |||||
<script src="scripts/react.js"></script> | |||||
</body> | |||||
</html> |
function Patient(fhirpatient) { | |||||
var patient = fhirpatient; | |||||
return { | |||||
"lastname": () => { | |||||
if (patient.name) { | |||||
var nameElement = patient.name.find((element) => { | |||||
return (element.use == "usual"); | |||||
}); | |||||
if (nameElement) | |||||
return nameElement.family; | |||||
} | |||||
return undefined; | |||||
}, | |||||
"gender": () => { | |||||
if(patient.gender) | |||||
return patient.gender; | |||||
return undefined; | |||||
}, | |||||
"date": () => { | |||||
if(patient.birthDate) | |||||
return patient.birthDate; | |||||
}, | |||||
"home": () => { | |||||
if (patient.address) { | |||||
var addressElement = patient.address.find((element) => { | |||||
return (element.use == "home"); | |||||
}); | |||||
if (addressElement) | |||||
return (addressElement.postalCode + " " + addressElement.city); | |||||
} | |||||
return undefined; | |||||
}, | |||||
"country": () => { | |||||
if (patient.address) { | |||||
var addressElement = patient.address.find((element) => { | |||||
return (element.use == "home"); | |||||
}); | |||||
if (addressElement) | |||||
return (addressElement.country); | |||||
} | |||||
return undefined; | |||||
}, | |||||
} | |||||
} |
function loadTemplates() { $('#navigation').load('templates/NavbarTemplate.html'); | |||||
$('#content').load('templates/AboutTemplate.html'); | |||||
} $(document).ready(loadTemplates); |
var patient = {}; | |||||
$.getJSON("data/patient.json", (data) => { | |||||
patient = Patient(data); | |||||
}); |
function simulation() { | |||||
var v; | |||||
var s; | |||||
var fuel; | |||||
var schub = false; | |||||
setStartValues(50000, -1000, 10000); | |||||
function switchon() { | |||||
schub = true; | |||||
update(); | |||||
checkGameOver(); | |||||
} | |||||
function switchoff() { | |||||
schub = false; | |||||
update(); | |||||
checkGameOver(); | |||||
} | |||||
function a() { | |||||
if (schub == false || fuel <= 0) | |||||
return -1.63; | |||||
else { | |||||
fuel = fuel - 100; | |||||
return -1.63 + 12; | |||||
} | |||||
} | |||||
function showValues() { | |||||
$("#height").html("Höhe: " + s + " m"); | |||||
$("#speed").html("Geschwindigkeit: " + v + " m/s"); | |||||
$("#fuel").html("Teibstoffvorrat: " + fuel + " l"); | |||||
} | |||||
function update() { | |||||
v = v + a(); | |||||
s = s + v; | |||||
showValues(); | |||||
} | |||||
function checkGameOver() { | |||||
if (s <= 0) { | |||||
if (v < -10) | |||||
alert("Fehlschlag"); | |||||
else | |||||
alert("Erfolgreich"); | |||||
setStartValues(50000, -1000, 10000); | |||||
showValues(); | |||||
} | |||||
} | |||||
function setStartValues(height, velocity, Newfuel) { | |||||
v = velocity; | |||||
s = height; | |||||
fuel = Newfuel; | |||||
} | |||||
$('#content').html("<h2>Mondlandung</h2>"); | |||||
$("#content").append("<div class='menu'>Hauptmenü</div>") | |||||
$("#content").append("<div id='height'>Höhe: </div>"); | |||||
$("#content").append("<div id='speed'>Geschwindikgiet: </div>"); | |||||
$("#content").append("<div id='fuel'>Treibstoffvorrat: </div>"); | |||||
$("#content").append("<button id='energy' class='btn-style'>Triebwerk an</button>"); | |||||
$("#content").append("<button id='no-energy' class='btn-style'>Triebwerk aus</button>"); | |||||
$("#energy").click(switchon); | |||||
$("#no-energy").click(switchoff); | |||||
showValues(); | |||||
} | |||||
<div class="row"> | |||||
<h2 class="col-xs-12 page-header"> | |||||
Patientenverwaltung | |||||
<small>Ein Demoprojekt</small> | |||||
</h2> | |||||
</div> | |||||
<div class="row"> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/html5.png" alt="HTML5 LOGO" /> | |||||
<h4>HTML5</h4> | |||||
<p>Strukturierte Inhalte für den Browser</p> | |||||
</div> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/css3.png" alt="CSS3 LOGO" /> | |||||
<h4>CSS3</h4> | |||||
<p>Flexibles Design und Layout</p> | |||||
</div> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/bootstrap.png" alt="Bootstrap" /> | |||||
<h4>Bootstrap3</h4> | |||||
<p>Responsive und schick</p> | |||||
</div> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/jQuery.png" alt="JQuery LOGO" /> | |||||
<h4>JQuery</h4> | |||||
<p>Zugriff auf das DOM</p> | |||||
</div> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/react.png" alt="REACT LOGO" /> | |||||
<h4>REACT</h4> | |||||
<p>Building User Interfaces</p> | |||||
</div> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/js.png" alt="JavaScript" /> | |||||
<h4>JavaScript</h4> | |||||
<p>Die Programmiersprache im Browser</p> | |||||
</div> | |||||
</div> |
| |||||
<nav class="navbar navbar-inverse navbar-fixed-top"> | |||||
<div class="container"> | |||||
<div class="navbar-header"> | |||||
<span class="navbar-brand" href="#" onclick="simulation()"> | |||||
Patientenverwaltung | |||||
</span> | |||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu"> | |||||
<span class="sr-only">Toggle navigation</span> | |||||
<span class="icon-bar"></span> | |||||
<span class="icon-bar"></span> | |||||
<span class="icon-bar"></span> | |||||
</button> | |||||
</div> | |||||
<div id="menu" class="collapse navbar-collapse"> | |||||
<ul class="nav navbar-nav"> | |||||
<li><a href="#" onclick="$('#content').load('templates/PatientDetailsTemplate.html')"</a>Patient</li> | |||||
<li><a href="#" onclick="$('#content').load('templates/AboutTemplate.html')">Info</a></li> | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
</nav> |
<div class="row"> | |||||
<h2 class="col-xs-12 page-header"> | |||||
Patientenverwaltung | |||||
<span id="patient-name">Patientenname</span> | |||||
</h2> | |||||
<script type="text/javascript"> | |||||
$("#patient-name").html(patient.lastname()) | |||||
</script> | |||||
</div> | |||||
<div class="row"> | |||||
<h6 class="col-xs-6"> | |||||
Geschlecht | |||||
</h6> | |||||
<h6 class="col-xs-6" id="patient-gender"></h6> | |||||
<script type="text/javascript"> | |||||
$("#patient-gender").html(patient.gender()) | |||||
</script> | |||||
</div> | |||||
<div class="row"> | |||||
<h6 class="col-xs-6"> | |||||
Geburtsdatum | |||||
</h6> | |||||
<h6 class="col-xs-6" id="patient-date">Geburtsdatum</h6> | |||||
<script type="text/javascript"> | |||||
$("#patient-date").html(patient.date()) | |||||
</script> | |||||
</div> | |||||
<div class="row"> | |||||
<h6 class="col-xs-6"> | |||||
Wohnort: | |||||
</h6> | |||||
<h6 class="col-xs-6" id="patient-home">Patientenname</h6> | |||||
<script type="text/javascript"> | |||||
$("#patient-home").html(patient.home()) | |||||
</script> | |||||
</div> | |||||
<div class="row"> | |||||
<h6 class="col-xs-6"> | |||||
Land: | |||||
</h6> | |||||
<h6 class="col-xs-6" id="patient-country">Land:</h6> | |||||
<script type="text/javascript"> | |||||
$("#patient-country").html(patient.country()) | |||||
</script> | |||||
</div> |