<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Serverless Workflow Onboarding Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.8/wing.min.css"/>
    <!-- Load AngularJS -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.1.0/uuidv4.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("NewPatientOnboarding", []);

        //Controller Part
        app.controller("NewPatientOnboardingController", function ($scope, $http) {

            //Initialize page with default data which is blank in this example
            $scope.appointments = [];

            $scope.form = {
                name: "",
                symptoms: "",
                dateOfBirth: "",
            };

            //Now load the data from server
            _refreshPageData();

            // Invoke workflow by sending event
            $scope.add = function () {
                let eventdata = {
                    "name": $scope.form.name,
                    "symptoms": $scope.form.symptoms.split(","),
                    "dateOfBirth": $scope.form.dateOfBirth,
                };
                let ceId = uuidv4();
                $http({
                    method: "POST",
                    url: '/',
                    data: eventdata,
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'ce-specversion': '1.0',
                        'ce-type': 'new.patient.events',
                        'ce-source': '/hospital/entry',
                        'ce-id': ceId
                    }
                }).then(_success, _error);
            };

            /* Private Methods */

            //HTTP GET- get all patients
            function _refreshPageData() {
                $http({
                    method: 'GET',
                    url: '/onboarding/schedule/appointment'
                }).then(function successCallback(response) {
                    $scope.appointments = response.data;
                }, function errorCallback(response) {
                    console.log(response.statusText);
                });
            }

            function _success(response) {
                setTimeout(_refreshPageData, 1000);
                _clearForm();
            }

            function _error(response) {
                alert(response.data.message || response.statusText);
            }

            //Clear the form
            function _clearForm() {
                $scope.form.name = "";
                $scope.form.symptoms = "";
                $scope.form.dateOfBirth = "";
            }
        });
    </script>
</head>
<body ng-app="NewPatientOnboarding" ng-controller="NewPatientOnboardingController">

<div class="container">
    <h1>Serverless Workflow Demo: <br/> New Patient Onboarding</h1>

    <h3>Enter new patient info</h3>
    <form ng-submit="add()">
        <div class="row">
            <div class="col-6"><input type="text" placeholder="Name" ng-model="form.name" size="60"/></div>
        </div>
        <div class="row">
            <div class="col-6"><input type="text" placeholder="Symptoms" ng-model="form.symptoms" size="60"/></div>
        </div>
        <div class="row">
            <div class="col-6"><input type="text" placeholder="Date of Birth (YYYY-MM-DD)" ng-model="form.dateOfBirth" size="60"/></div>
        </div>
        <input type="submit" value="Send Onboarding Event"/>
    </form>

    <h3>Onboarded Patients</h3>
    <table style="width:100%">
        <tr>
            <th align="left"><b>Id</b></th>
            <th align="left"><b>Name</b></th>
            <th align="left"><b>Symptoms</b></th>
            <th align="left"><b>Assigned Doc Name</b></th>
            <th align="left"><b>Assigned Doc Specialty</b></th>
            <th align="left"><b>Next Appointment</b></th>
        </tr>
        <tr ng-repeat="a in appointments">
            <td>{{ a.patient.id }}</td>
            <td>{{ a.patient.name }}</td>
            <td>{{ a.patient.symptoms }}</td>
            <td>{{ a.doctor.name }}</td>
            <td>{{ a.doctor.specialty }}</td>
            <td>{{ a.date }}</td>
        </tr>
    </table>
</div>

</body>
</html>