-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
166 lines (157 loc) · 8.79 KB
/
index.html
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<html>
<head>
<title>Meetings for today</title>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<script src="./env.js"></script>
<style>
html {
font-family: 'Segoe UI', Tahoma, sans-serif;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.title {
grid-area: 1 / 1 / 2 / 2;
margin-left: 10px;
}
.login {
display: grid;
grid-area: 1 / 2 / 2 / 3;
align-content: center;
justify-content: end;
margin-right: 10px;
}
.body {
grid-area: 2 / 1 / 3 / 3;
}
.no-data {
width: 20rem;
text-align: center;
margin: 0 auto;
}
.no-data img {
margin: 0 auto;
}
.no-data p {
margin: 1rem;
}
.no-data>p:first-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<div class="grid">
<div class="title">
<h1>Meetings for today</h1>
</div>
<div class="login">
<mgt-login></mgt-login>
</div>
<div class="body">
<mgt-agenda>
<template data-type="loading">
<div class="loading">Loading...</div>
</template>
<template data-type="no-data">
<div class="no-data" data-if="mgt.Providers.globalProvider.state === mgt.ProviderState.SignedIn">
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>illustration_balloon</title>
<defs>
<linearGradient x1="20.4578125%" y1="-10.5147724%" x2="49.3654615%" y2="44.0878535%"
id="linearGradient-1">
<stop stop-color="#F7B548" offset="0%"></stop>
<stop stop-color="#FFD590" offset="99.9313767%"></stop>
</linearGradient>
</defs>
<g id="illustration_balloon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Android-/-Light-/-illustration_balloon" fill-rule="nonzero">
<ellipse id="balloon" fill="#72ACF1" cx="59.6273292" cy="42" rx="41.7391304" ry="42"></ellipse>
<polygon id="balloon" fill="#3E8EED"
points="42.1008596 41.89932 44.2859031 41.421645 57.308728 101.739315 55.1236845 102.21699">
</polygon>
<polygon id="balloon" fill="#3E8EED"
points="61.584082 101.787788 74.917528 41.4648075 77.1001118 41.9532825 63.7666658 102.276263">
</polygon>
<polygon id="balloon" fill="#3E8EED"
points="67.6821764 101.378737 94.335518 61.7493675 96.1873938 63.0104925 69.5340522 102.639862">
</polygon>
<polygon id="balloon" fill="#3E8EED"
points="23.3985466 63.017955 25.2504224 61.75683 51.903764 101.3862 50.0518882 102.647325">
</polygon>
<path
d="M71.552795,101.25 L71.552795,116.55 C71.552795,118.5 69.9875776,120 68.1242236,120 L51.1304348,120 C49.1925466,120 47.7018634,118.425 47.7018634,116.55 L47.7018634,101.25 L71.552795,101.25 Z"
id="balloon" fill="url(#linearGradient-1)"></path>
<path
d="M101.36646,42 C101.36646,38.475 100.919255,35.1 100.099379,31.8 C99.6521739,31.65 99.2049689,31.575 98.6832298,31.575 C94.8074534,31.575 94.8074534,36.075 90.8571429,36.075 C86.9068323,36.075 86.9813665,31.575 83.0310559,31.575 C79.0807453,31.575 79.1552795,36.075 75.2049689,36.075 C71.2546584,36.075 71.3291925,31.575 67.378882,31.575 C63.4285714,31.575 63.5031056,36.075 59.552795,36.075 C55.6024845,36.075 55.6770186,31.575 51.7267081,31.575 C47.8509317,31.575 47.8509317,36.075 43.9006211,36.075 C40.0248447,36.075 40.0248447,31.575 36.0745342,31.575 C32.1242236,31.575 32.1987578,36.075 28.2484472,36.075 C24.2981366,36.075 24.3726708,31.575 20.4223602,31.575 C19.9006211,31.575 19.4534161,31.65 19.0062112,31.8 C18.3354037,35.1 17.8881988,38.475 17.8881988,42 C17.8881988,42.675 17.8881988,43.275 17.9627329,43.95 L101.36646,43.95 C101.36646,43.275 101.36646,42.675 101.36646,42 Z"
id="balloon" fill="#A7CBF6"></path>
<path
d="M46.5838509,98.25 L72.5962733,98.25 C73.6397516,98.25 74.5341615,99.075 74.5341615,100.125 C74.5341615,101.175 73.7142857,102 72.5962733,102 L46.5838509,102 C45.5403727,102 44.7204969,101.175 44.7204969,100.125 C44.7204969,99.075 45.5403727,98.25 46.5838509,98.25 Z"
id="balloon" fill="#FFD590"></path>
<path
d="M34.5838509,40.05 L34.5838509,57.3 C34.5838509,61.95 30.8571429,65.7 26.2360248,65.7 C21.6149068,65.7 17.8881988,61.95 17.8881988,57.3 L17.8881988,40.05 L34.5838509,40.05 Z"
id="balloon" fill="#FFD590"></path>
<path
d="M51.2795031,40.05 L51.2795031,57.3 C51.2795031,61.95 47.552795,65.7 42.931677,65.7 C38.310559,65.7 34.5838509,61.95 34.5838509,57.3 L34.5838509,40.05 L51.2795031,40.05 Z"
id="balloon" fill="#F7B548"></path>
<path
d="M67.9751553,40.05 L67.9751553,57.3 C67.9751553,61.95 64.2484472,65.7 59.6273292,65.7 C55.0062112,65.7 51.2795031,61.95 51.2795031,57.3 L51.2795031,40.05 L67.9751553,40.05 Z"
id="balloon" fill="#FFD590"></path>
<path
d="M84.6708075,40.05 L84.6708075,57.3 C84.6708075,61.95 80.9440994,65.7 76.3229814,65.7 C71.7018634,65.7 67.9751553,61.95 67.9751553,57.3 L67.9751553,40.05 L84.6708075,40.05 Z"
id="balloon" fill="#F7B548"></path>
<path
d="M101.445652,40.05 L101.445652,57.3 C101.445652,61.95 97.6397516,65.7 93.0186335,65.7 L93.0978261,65.7 C88.4767081,65.7 84.6708075,61.95 84.6708075,57.3 L84.6708075,40.05 L101.445652,40.05 Z"
id="balloon" fill="#FFD590"></path>
<path
d="M26.757764,120 C27.0559006,118.95 27.1304348,117.825 27.1304348,116.7 C27.2049689,109.125 21.0931677,102.975 13.6397516,102.9 C6.1863354,102.9 1.86517468e-14,108.975 1.86517468e-14,116.55 C1.86517468e-14,117.675 0.149068323,118.875 0.447204969,120 L26.757764,120 Z"
id="balloon" fill="#F2F2F2"></path>
<path
d="M29.9627329,110.025 C24.447205,110.025 19.9751553,114.45 19.826087,120 L40.0993789,120 C39.9503106,114.45 35.4782609,110.025 29.9627329,110.025 Z"
id="balloon" fill="#F2F2F2"></path>
<path
d="M91.4534161,15.075 C91.4534161,14.925 91.4534161,14.775 91.4534161,14.625 C91.4534161,13.05 91.9751553,11.475 92.9440994,10.2 C94.3602484,8.4 96.447205,7.35 98.6832298,7.35 C101.515528,7.35 104.124224,9 105.31677,11.55 C106.360248,10.875 107.552795,10.5 108.819876,10.5 C112.322981,10.5 115.15528,13.275 115.229814,16.8 C117.987578,17.4 119.776398,20.1 119.180124,22.95 C118.658385,25.425 116.496894,27.15 114.037267,27.075 L91.0062112,27.15 C87.7267081,27.15 85.0434783,24.45 85.0434783,21.15 C85.0434783,17.85 87.7267081,15.075 91.0062112,15.075 L91.4534161,15.075 Z"
id="balloon" fill="#F2F2F2"></path>
<polygon id="balloon" fill="#3E8EED"
points="17.8881988 39.75 101.515528 39.75 101.515528 44.25 17.8881988 44.25"></polygon>
</g>
</g>
</svg>
<p>No more meetings for today</p>
<p>Enjoy!</p>
</div>
<div class="no-data" data-else>
<p>Sign in to view your upcoming meetings</p>
</div>
</template>
</mgt-agenda>
</div>
</div>
<script>
(() => {
// set up auth
mgt.Providers.globalProvider = new mgt.Msal2Provider({
clientId: appId,
authority: `https://login.microsoftonline.com/${tenantId}`,
// define all permissions upfront so that we can use
// people cards without additional prompts
scopes: ['User.Read', 'People.Read', 'User.Read.All', 'Calendars.Read', 'GroupMember.Read.All', 'User.ReadBasic.All', 'People.Read.All', 'Presence.Read.All', 'Sites.Read.All', 'Mail.ReadBasic']
});
// configure Microsoft Graph query to retrieve upcoming meetings for today
const now = new Date();
const midnight = new Date();
midnight.setDate(midnight.getDate()+1);
midnight.setHours(0);
midnight.setMinutes(0);
midnight.setSeconds(0);
midnight.setMilliseconds(0);
const agenda = document.querySelector('mgt-agenda');
agenda.eventQuery = `/me/calendarview?startdatetime=${now.toISOString()}&enddatetime=${midnight.toISOString()}&$orderby=start/dateTime`;
})();
</script>
</body>
</html>