-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (128 loc) · 6.54 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="//www.gstatic.com/external_hosted/material_design_lite/mdl_css-blue_grey-light_blue-bundle.css">
<script src="//www.gstatic.com/external_hosted/material_design_lite/mdl_all_js_compiled.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://apis.google.com/js/api.js"></script>
<style>
#chart_div {
height: 8000px;
width: 100%;
background-color: #efe;
}
</style>
<title>Colabo.Manager Gantt</title>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<img alt="logo" src="https://colabo.space/data/images/logos/colabo-logo-with-url.png"/ width="50px">
<div class="mdl-layout-spacer"></div>
<span class="mdl-layout-title" id="pageTitle">Colabo.Manager Gantt</span>
<span id="pageBrand">@ <a href="https://manager.colabo.space/">Colabo.Manager</a></span>
<div class="mdl-layout-spacer"></div>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
<a id="sheet" class="mdl-navigation__link" target="_blank" href="">Edit</a>
</div>
</header>
<main class="mdl-layout__content">
<div class="page-content">
<div id="chart_div"></div>
</div>
</main>
</div>
<dialog id="instructions-dialog">
<img alt="logo" src="https://colabo.space/data/images/logos/colabo-logo-with-url.png"/ width="250px">
<p>View <a target="_blank" href="/#1zYmWtZh0gNxhtFMC0YVwBwzfH9Iy_7viTFGo2Ot5B8s">working demo and starter spreadsheet</a>.</p>
<p>To make your own:</p>
<ol>
<li>Copy the <a target="_blank" href="https://docs.google.com/spreadsheets/d/1zYmWtZh0gNxhtFMC0YVwBwzfH9Iy_7viTFGo2Ot5B8s/edit#gid=0">spreadsheet</a>, be sure NOT to share it with me!</li>
<li>Edit it, following the rules in the notes - especially the date and dependency rules!
<ol>
<li>Every Task needs <strong>exactly two</strong> of these fields: a 'Start Date', 'End Date', 'Duration', 'Dependencies'</li>
<li>Add a "#" in your TaskName if you want to add rows to your worksheet with "comments" that don't affect the Gantt Chart </li>
<li>You MUST keep the word 'gantt' in the worksheet name! Feel free to add more worksheet tabs, but the 'gantt' tab will be used for the Gantt Chart.</li>
</ol>
</li>
<li>View your Gantt Chart with the "ezGantt" menu in the spreadsheet (or at https://ezgantt.appspot.com/<strong>#</strong>YOUR_SPREADSHEET_KEY <i>(where the key is https://docs.google.com/spreadsheets/d/<strong>[this part is the key]</strong>/edit -- Don't forget the "#" hash!)</i> </li>
</ol>
</dialog>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
// ga('create', 'UA-68216614-5', 'auto');
// ga('send', 'pageview');
</script>
<!-- <script type="module" src="dist/lib/auth.js"></script>
<script type="module" src="dist/lib/index.js"></script> -->
<script type="module" src="dist/lib/auth.js"></script>
<script type="module" src="dist/lib/index.js"></script> -->
<script type="module" >
import {gapiLoaded, gisLoaded, handleAuthClick } from "./dist/lib/auth.js";
import {startWork} from "./dist/lib/index.js";
// https://stackoverflow.com/questions/73280065/referenceerror-exported-function-is-not-defined-at-onload
// https://stackoverflow.com/questions/49338193/how-to-use-code-from-script-with-type-module
console.log(`[auth.js] Registering globally "gapiLoaded": ${typeof gapiLoaded} and "gisLoaded": ${typeof gisLoaded}`)
window.gapiLoaded = gapiLoaded;
window.gisLoaded = gisLoaded;
window.handleAuthClick = handleAuthClick;
window.startWork = startWork;
// https://technotrampoline.com/articles/how-to-programmatically-add-script-tags-to-your-react-application/
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
const api_script = document.createElement('script');
api_script.setAttribute('src','https://apis.google.com/js/api.js');
api_script.defer = true;
api_script.async = true;
api_script.onload = () => {
console.log(`[api_script.onload]`);
gapiLoaded();
}
document.body.appendChild(api_script);
const client_script = document.createElement('script');
client_script.setAttribute('src','https://accounts.google.com/gsi/client');
client_script.defer = true;
client_script.async = true;
client_script.onload = () => {
console.log(`[client_script.onload]`);
gisLoaded();
}
document.body.appendChild(client_script);
const charts_script = document.createElement('script');
charts_script.setAttribute('src','https://www.gstatic.com/charts/loader.js');
charts_script.defer = true;
charts_script.async = true;
charts_script.onload = () => {
console.log(`[charts_script.onload]`);
console.log(`[charts_script.onload] google.charts: ${google.charts}`);
console.log(`[charts_script.onload] google.visualization: ${google.visualization}`);
// https://stackoverflow.com/a/23495572/257561
// https://developers.google.com/chart/interactive/docs/gallery/ganttchart
google.charts.load('current', {'packages':['gantt']});
// gisLoaded();
}
document.body.appendChild(charts_script);
</script>
<script>
function test() {
console.log(`[test]`)
console.log(`[test] window.gapiLoaded: ${typeof window.gapiLoaded}`)
console.log(`[test] window.gisLoaded: ${typeof window.gisLoaded}`)
}
</script>
<!-- <script async defer src="https://apis.google.com/js/api.js" onload="test()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="test()"></script> -->
<!-- <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script> -->
<!-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> -->
</body>
</html>