reboot/src/pages/history/history.html at ff68f5e32d0cb245d993891d6c79bc2ec913e609 · SoftStackFactory/reboot · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!--
  Generated template for the HistoryPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title text-center>History</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-grid class='wrapper'>
    <ion-row>
      <ion-col col-12>
        <ion-card class='round-card'>
          <ion-card-header>
              <h1>Self Assessment History</h1>
          </ion-card-header>
          <ion-card-content class='card-align'>
            <ion-grid col-6>
              <ion-row>
                <ion-col col-6>
                  <p class='small-label'>Name: </p>
                </ion-col>
                <ion-col col-6>
                  <p class='small-label'>First Started: </p>
                </ion-col>
                <ion-col col-6>
                  <p class='small-label'>Seperation Date:</p>
                </ion-col>
                <ion-col col-6>
                  <p class='small-label'>Last Updated:</p>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col col-12>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel fringilla dui, sed malesuada nibh. </p>
                </ion-col>
              </ion-row>
            </ion-grid>
            <ion-grid>
              <ion-row>
                <ion-col col-4>
                  <p class='small-label'>Most Improved: </p>
                  <h2>Career</h2>
                </ion-col>
                <ion-col col-4>
                  <p class='small-label'>Highest Score: </p>
                  <h2>9</h2>
                </ion-col>
                <ion-col col-4>
                  <p class='small-label'>Next Test Date: </p>
                  <h2>01/01/19</h2>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col col-4>
                  <p class='small-label'>Tests Taken: </p>
                  <h2>25</h2>
                </ion-col>
                <ion-col col-4>
                  <p class='small-label'>Lowest Score: </p>
                  <h2>1</h2>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-12>
        <ion-card class='round-card' padding>
          <ion-card-content>
            <ion-grid>
              <ion-row justify-content-end>
                <ion-col col-5>
                  <ion-item>
                    <ion-label>Timeset</ion-label>
                    <ion-select [(ngModel)]='chartSelect' interface="popover">
                      <ion-option value=1>One Month</ion-option>
                      <ion-option value=3>Three Months</ion-option>
                      <ion-option value=6>Six Months</ion-option>
                    </ion-select>
                  </ion-item>
                </ion-col>
              </ion-row>
            </ion-grid>
          <canvas id="lineChart" #lineChart></canvas>
        </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-12>
      <ion-card class='round-card' padding>
        <ion-card-content>
          <table id="self-assessment-table">
            <tr>
              <td></td>
              <th scope="col" *ngFor="let label of labels">{{label}}</th>
            </tr>
            <tr *ngFor="let date of history; let odd = odd; let even = even" [ngClass]="{odd: odd, even:even}">
              <th>{{date.date}}</th>
              <td *ngFor="let val of date.value">{{val}}</td>
            </tr>
          </table>
        </ion-card-content>
      </ion-card>
    </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>