Rhizonic Careplan Cards

Rhizome library with Ionic and FHIR Careplan and Questionnaire resources

by phollott

HTML

<script src="//code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="//code.ionicframework.com/1.0.0-beta.6/css/ionic.css">
<script src="//phollott.github.io/lib/rhizome/rhizome.js"></script>
<script src="//cdn.jsdelivr.net/snap.svg/0.3.0/snap.svg-min.js"></script>
<div id="demo">
    <div id="inset" ng-app="rhzApp" ng-controller="RhzCtrl">
        <ion-slide-box rhz-ion-careplan="" active-slide="slide" show-pager="false">
            <ion-slide>
                <div class="card">
                    <div class="item item-icon-left pull-right"> <i class="icon ion-home"></i>

                         <h2>Rhizome: Goals and<br/> Conditions</h2>

                    </div>
                    <rhz-careplan-concerns>
                        <div class="list">
                            <div class="item item-divider">Concerns</div> <a ng-repeat="goal in content.goal" class="item item-text-wrap"><h5>{{goal.description}}</h5></a>

                        </div>
                    </rhz-careplan-concerns>
                    <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>
            </ion-slide>
            <ion-slide>
                <div class="card">
                    <div class="item item-icon-left pull-right"> <i class="icon ion-home"></i>

                         <h2>Rhizome: Q4C</h2>

                         <h3>{{plan.title}}</h3>

                    </div>
                    <div class="item item-body">
                        <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>
                ...

CSS

#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
}

JavaScript

var RhzApp;
(function (RhzApp) {

    var app = angular.module('rhzApp', ['ionic', 'rhizome']);

    app.factory('careplanService', function ($rootScope) {
    var svc = {}, resource = null
    
    svc.setResource = function (res) {
        resource = res
        $rootScope.$broadcast('RhzCareplan', {
            resource: resource
        });
    }
    
    return svc
});


    
    app.controller('RhzCtrl', function ($scope, jsonpService, careplanService) {
        $scope.$on('RhzCareplanUrl', function (evt, obj) {
            $scope.loadCareplan(obj.url + '.json')
        });
        $scope.loadCareplan = function (url) {
            jsonpService.getData(function (resource) {
                careplanService.setResource(resource)
/*                $scope.$broadcast('RhzCareplan', {
                    resource: resource
                });*/
            }, url)
        }
        $scope.loadCareplan("http://phollott.github.io/rhizome/fhir/careplan/112.json")
    });

    app.directive('rhzCareplanConcerns', function (careplanService) {
        return {
            restrict: 'AE',
            link: function (scope, element, attr) {
/*                scope.$watch(careplanService.resource, function (new) {
                    alert(new)
                }); */
                scope.$on('RhzCareplan', function (evt, obj) {
                    scope.content = obj.resource.content
                });
            }
        };
    });

    app.directive('rhzIonCareplan', function (jsonpService, codeService, $ionicSlideBoxDelegate) {
        return {
            restrict: 'AE',
            link: function (scope, element, attrs) {
                scope.$on('RhzCareplan', function (evt, obj) {
                    var acts = [],
                        content = obj.resource.content
                    for (a in content.activity) {
                        var act = content.activity[a],
                            item = {
                                id: a,
             ...