TeamsTimecardHelper/index.html at master · y2kbugger/TeamsTimecardHelper · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Teams Timecards</title>
  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
  <link rel="stylesheet" href="common.css" />
  <link rel="stylesheet" href="timecards.css" />
  <script src="https://cdn.jsdelivr.net/npm/@azure/msal-browser@4.30.0/lib/msal-browser.min.js"
    integrity="sha384-RGxxfG5yRS8DLU7ZJ8OoLhbV/BsJFHyPuMVHrTLbpj3t5Z15LnviJmaznKY/a7LZ" crossorigin="anonymous"></script>
  <script type="module" src="app.js"></script>
</head>

<body data-page="app">
  <!-- A slim toolbar: the team on the left, clocking in and the account on the right. The week
       is in a status card at the top of the page, below it. -->
  <header id="toolbar">
    <div id="toolbar-start">
      <button class="btn btn-quiet team-button" id="btn-team" title="Change team" disabled>
        <span id="toolbar-title">Loading…</span>
      </button>
    </div>
    <div id="toolbar-end">
      <button class="btn btn-success" id="btn-clock" hidden>Clock In</button>
      <span id="user-info"></span>
      <button class="btn btn-quiet btn-icon" id="btn-signout" title="Sign out (of this app only)" aria-label="Sign out" hidden>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="M16 17l5-5-5-5" /><path d="M21 12H9" />
        </svg>
      </button>
    </div>
  </header>

  <div id="error-banner"></div>

  <main id="app" hidden>
    <!-- The week, its total and the weekly average, centred above the days. -->
    <div id="status-card" hidden>
      <span class="spinner" id="busy" title="Talking to Microsoft" hidden></span>
      <div id="week-nav">
        <button class="btn btn-secondary btn-icon" id="btn-week-prev" title="Previous week" aria-label="Previous week">←</button>
        <div class="week-picker-stack">
          <input type="date" id="week-picker" aria-label="Week" />
          <span id="week-range-label"></span>
        </div>
        <button class="btn btn-secondary btn-icon" id="btn-week-next" title="Next week" aria-label="Next week">→</button>
      </div>
      <div class="status-total">
        <span id="week-total" title="Worked this week"></span>
        <div id="status-links"></div>
      </div>
    </div>
    <div id="status-panel" class="panel-empty" hidden></div>
    <div id="timecards-loading" class="panel-empty" hidden><span class="spinner"></span>Loading timecards…</div>
    <div id="weeks" hidden></div>
  </main>

  <div class="modal-overlay" id="edit-modal" hidden>
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-title">
      <h2 id="edit-title">Edit timecard</h2>
      <div class="form-row">
        <label>Clock in <input type="datetime-local" id="edit-clock-in" /></label>
        <label>Clock out <span class="field-note">(blank while running)</span>
          <input type="datetime-local" id="edit-clock-out" /></label>
      </div>
      <label class="form-block">Notes <textarea id="edit-notes" rows="2"></textarea></label>
      <div class="modal-subheader">
        <span>Breaks</span>
        <span class="field-note">To add one, click a card on its timeline.</span>
      </div>
      <div id="breaks-edit"></div>
      <div class="modal-actions">
        <button class="btn btn-secondary" id="btn-edit-cancel">Cancel</button>
        <button class="btn btn-primary" id="btn-edit-save">Save</button>
      </div>
    </div>
  </div>

  <!-- Chosen once, so a dialog rather than a page: it opens by itself when no team is chosen yet,
       and then cannot be dismissed without choosing. -->
  <div class="modal-overlay" id="team-modal" hidden>
    <div class="modal modal-narrow" role="dialog" aria-modal="true" aria-labelledby="team-title">
      <h2 id="team-title">Team</h2>
      <p id="team-picker-msg"></p>
      <select id="team-picker-select" aria-label="Team"></select>
      <div class="modal-actions">
        <button class="btn btn-secondary" id="btn-team-cancel">Cancel</button>
        <button class="btn btn-primary" id="btn-team-save">Use Team</button>
      </div>
    </div>
  </div>

  <div class="modal-overlay" id="confirm-modal" hidden>
    <div class="modal modal-narrow" role="alertdialog" aria-modal="true" aria-labelledby="confirm-title">
      <h2 id="confirm-title"></h2>
      <p id="confirm-msg"></p>
      <p id="confirm-beta-warn" class="beta-warn" hidden>Deleting a timecard uses a Microsoft Graph beta
        endpoint, which may change without notice.</p>
      <div class="modal-actions">
        <button class="btn btn-secondary" id="btn-confirm-cancel">Cancel</button>
        <button class="btn btn-danger" id="btn-confirm-ok">Delete</button>
      </div>
    </div>
  </div>

  <div id="toast-area"></div>
</body>

</html>