demo-dr-form/patient.html at main · healthdatasafe/demo-dr-form · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="icon" href="https://healthdatasafe.github.io/style-old/images/Favicon/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="https://healthdatasafe.github.io/style-old/hds.min.css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inter:300,400">
  <title>Demo Form - Patient's page</title>
</head>
<script src="https://healthdatasafe.github.io/hds-lib-js/hds-lib.js"></script>
<script type="module" src="patient-home-controler.js"></script>

<body>
  <div class="container">
    <a href="https://www.healthdatasafe.org" target="_hds"><img src="https://healthdatasafe.github.io/style-old/images/Horizontal/hds-logo-hz-1024x400-hz-color.png" alt="Logo" width="300px"></a>
    <h1>Demo Form - Patient's page</h1>
    <div class="card">
      <div class="card-login">
        <h2 class="card-title">Welcome</h2>
        <span id="login-button"></span>
        <br><br>
        <span id="welcome-message-mme">
          Dear Patient, from this page you will answer a questionnaire to be shared with your Doctor.
        </span>
        <br>
        <span id="welcome-message-viewer" style="display: none;"> Welcome message
        </span>
        <br>
        <span id="please-login">
          Please login.
        </span>
      </div>
    </div>
    <div class="card" id="card-content" style="display: none;">
      <h2>Questionnaires</h2>
      <table id="questionnary-table" class="table">
        <thead>
          <th>Questionnaire</th>
          <th>Doctor's username</th>
          <th>Status</th>
        </thead>
        <tbody>
          <!-- will be filled by getQuestionaires-->
        </tbody>
      </table>

      <h2>Questionnaire details</h2>
      <div id="card-questionnary-details">
        <span id="card-questionnary-details-nothing">
          <h3>Nothing selected</h3>
          <p>Please select a questionnaire on the list above.</p>
        </span>
        <div id="card-questionnary-details-something" style="display: none;">
          <h3> Questionnaire: <span id="card-questionnary-details-title"></span></h3>
          <div id="card-questionnary-details-description"></div>
          <table>
            <tr>
              <td>
                <h3>Permission request</h3>
                <table id="access-request" border="1" class="table" width="30%">
                  <thead>
                    <th><B>Stream</B></th>
                    <th><B>Level</B></th>
                  </thead>
                  <tbody id="access-request-body">
                    <!-- will be filled by getQuestionaireDetails-->
                  </tbody>
                </table>
              </td>
              <td>&nbsp; &nbsp;</td>
              <td>
                <b>Consent: </b><span id="questionnary-details-consent"></span>
                <br><br>
                <button type="button" id="grant-access-button" class="btn btn-primary mb-2">Open</button>
                <br><br>
                <button type="button" id="revoke-access-button" class="btn btn-secondary mb-2">Revoke</button>
              </td>
            </tr>
          </table>

          <br>

          <br>
          <!--
            <h3>JSON detail</h3>
            <span id="card-questionnary-details-content"></span>
          -->
        </div>
      </div>
    </div>
  </div>
</body>
</html>