var RhzApp;
(function (RhzApp) {
var cfg = angular.module('config', []);
cfg.factory('config', function () {
return {
baseurl: 'http://phollott.github.io/rhizome/fhir'
}
});
var app = angular.module('rhzApp', ['ionic', 'rhizome', 'config']);
/**
* This is about as simple as a controller gets...
*/
app.controller('RhzCtrl', function (config, rhsCareplan, $scope, $ionicActionSheet) {
var url = config.baseurl + "/careplan/112"
rhsCareplan.loadResource(url)
$scope.showMenu = function () {
var hideSheet = $ionicActionSheet.show({
buttons: rhsCareplan.getButtons(),
titleText: 'Available Careplan Resources',
cancelText: 'Cancel',
cancel: function () {},
destructiveText: 'Restart Care Plan',
destructiveButtonClicked: function () {},
buttonClicked: rhsCareplan.resetResource
});
}
});
//need to pass the reference to the panel, so it knows which svg to watch
/* app.directive('rhzSvg', function () {
return {
link: function ($scope, $element, $attr) {
var svg, svgRoot = Snap($element[0])
alert(JSON.stringify($attr))
$scope.$on('RhzFocusSvg', function (evt, obj) {
if (obj.svg) {
loadSvg(obj.svg)
focusFrame(obj.frame, 0)
} else {
focusFrame(obj.frame, 2000)
}
});
loadSvg = function(text) {
var svgFrag = Snap.parse(text)
svgRoot.append(svgFrag)
svg = svgRoot.select("#svg")
}
focusFrame = function(frId, dur) {
var fr = svg.select(frId)
svg.animate({
x: 0-fr.attr('x'),
y: 0-fr.attr('y')
}, dur)
}
}
}
});
*/
app.directive('rhzIonQuestionnaireTest', function (rhsQuestionnaire) {
return {
restrict: 'E',
link: function (scope, element, attrs) {
scope.$watch(function () {
return rhsQuestionnaire.resourceCollection[attrs.ref]
}, function (obj) {
if (obj) {
scope.q4c = obj.resource.content;
scope.groupHeader = obj.resource.content.group.header;
scope.group = obj.resource.content.group;
}
});
},
template: '<div class="col">' +
'<div class="row responsive-sm" >' +
'<div class="col q4c-sq1">' +
'<svg rhz-svg="" id="rhizSvg" ref="{{q4c.name.text}}" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>' +
'</div>' +
'<div class="col">' +
'<div ng-bind="q4c.name.text" class="label q4c-sq2"></div>' +
'<ol id="questions" class="buttonlist q4c-sq2" rhz-question-group=""></ol>' +
'<div class="q4c-sq2">' +
'</div>' +
'</div>' +
'</div>'
}
});
app.factory('rhsQuestionnaire', function (jsonpService, codeService, $rootScope) {
var svc = {}
svc.resourceCollection = []
svc.loadResource = function (url, ref) {
// Todo: check if we already have this resource loaded
svc.url = url
jsonpService.getData(function (resource) {
svc.setResource(resource, ref)
}, url)
}
svc.setResource = function (res, ref) {
codeService.loadCodedConcepts(res.content)
$rootScope.$broadcast('RhzFocusSvg', {
svg: res.content.text.div,
frame: codeService.getInitialFrame()
})
svc.resourceCollection[ref] = {
url: svc.url,
resource: res
}
svc.resource = res
}
return svc
});
// Todo: use the raw fhir resource instead of parsing acts, and encpasulate the json service better.
app.directive('rhzIonCareplan', function (jsonpService, codeService, rhsCareplan, rhsQuestionnaire, $ionicSlideBoxDelegate) {
return {
restrict: 'AE',
link: function (scope, element, attrs) {
scope.$watch(function () {
return rhsCareplan.resource
}, function (resource) {
if (resource.content) {
var acts = []
for (a in resource.content.activity) {
var act = resource.content.activity[a],
item = {
id: a,
details: act.simple.details,
notes: act.notes,
status: act.status,
start: act.simple.timingPeriod.start
}
if (act.simple.actionResulting) {
// load the questionnaire into service
// alert(JSON.stringify(act))
var ar = act.simple.actionResulting[0],
url = ar.reference
rhsQuestionnaire.loadResource(url, a)
item.media = url
}
acts.push(item)
}
acts.sort(function (a, b) {
b = new Date(b.start);
a = new Date(a.start);
return b > a ? -1 : b < a ? 1 : 0;
});
scope.plan = {
activities: acts,
title: resource.title
}
$ionicSlideBoxDelegate.update()
scope.slide = 1
}
});
}
}
});
/**
* Bind to service using watch instead of broadcast
*/
/* app.directive('rhzIonCareplanSplash', function (rhsCareplan) {
return {
restrict: 'AE',
transclude: 'true',
link: function (scope, element, attr) {
scope.$watch(function () {
return rhsCareplan.resource
}, function (resource) {
if (resource) {
scope.title = resource.title
}
});
},
template: '<div class="card"><div class="item item-icon-left pull-right"> <i class="icon ion-home"></i><h2>Rhizome: Q4C</h2><h3>{{title}}</h3></div><div class="item item-body" ng-transclude></div><div class="item item-icon-right pull-right"><i class="icon ion-arrow-right-a"></i><h3>Swipe from right to left to <br/>progress through careplan.</h3></div></div>'
};
}); */
})(RhzApp || (RhzApp = {}));
<div id="demo">
<div id="inset" ng-app="rhzApp" ng-controller="RhzCtrl">
<ion-slide-box active-slide="slide" show-pager="false" rhz-ion-careplan="">
<ion-slide>
<rhz-ion-careplan-context/>
</ion-slide>
<ion-slide>
<rhz-ion-careplan-splash>
<p>This demo was created using Ionic Framework, AngularJS, and the Rhizome and SnapSVG libraries, demonstrating how these can be used together in a Healthcare app.</p>
<p>This demo also makes extensive use of the HL7 FHIR Careplan and Questionnaire resource standard.</p>
</rhz-ion-careplan-splash>
</ion-slide>
<ion-slide ng-repeat="activity in plan.activities">
<div ng-if="activity.media.indexOf('fhir') > -1">
<rhz-ion-questionnaire-test ref="{{activity.id}}"/>
</div>
<div ng-if="activity.media.indexOf('youtube') > -1">
<div>Place Video Here</div>
</div>
<div class="card" ng-if="!activity.media">
<div class="item item-icon-left pull-right"> <i class="icon ion-calendar"></i>
<h2>{{activity.details}}</h2>
<p>{{activity.start}}</p>
</div>
<div class="item item-body">
<p>{{activity.details}}</p>
<p>{{activity.notes}}</p>
</div>
<div class="item item-icon-left pull-right"> <i ng-show="activity.status==='completed'" class="icon ion-checkmark-round"></i>
<i ng-show="activity.status==='in progress'" class="icon ion-refresh"></i>
<i ng-show="activity.status==='cancelled'" class="icon ion-close-round"></i>
<h2>{{activity.status}}</h2>
</div>
</div>
</ion-slide>
</ion-slide-box>
<div class="bar bar-footer bar-positive">
<h1 class="title">Rhizome Q4C</h1>
<div class="buttons" ng-click="showMenu()">
<button class="button">Menu</button>
</div>
</div>
</div>
</div>
#demo {
width: 305px;
height: 580px;
-moz-border-radius: 15px;
border-radius: 20px;
background-color: goldenrod;
}
#inset {
position: absolute;
width: 280px;
height: 470px;
top: 50px;
left: 12px;
background-color: white
}
.q4c-sq1 {
width: 250px;
height: 250px;
float: left
}
.q4c-sq2 {
width: 250px;
text-align: center;
float: left
}
#rhizSvg {
width: 250px;
height: 250px;
background-color: lightgray
}
.frame {
opacity: 0
}
.buttonface {
width: 250px;
height: 25px;
}
.buttonhalf {
width: 125px;
height: 25px;
font-size: 8pt;
}
ol.buttonlist {
list-style: none;
margin: 0;
padding: 0
}
.question {
padding: 5px;
max-width: 250px;
text-wrap: normal
}
.label {
font-family: Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold
}