forked from jonathonwolfe/chance-the-gardener
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path3d-garden-demo.html
179 lines (177 loc) · 7.78 KB
/
3d-garden-demo.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
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chance the Gardener - 3D Garden Demo</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./script.js"></script>
<script src="./3d-garden-demo.js"></script>
</head>
<body>
<div class="container-fluid">
<button class="btn btn-back mt-2" onclick="changePage('login.html')">Back</button>
<header class="text-center mb-5">
<h1><img src="img/Chance-the-Gardener_logo_icon.png" class="app-logo col-1 me-4">Chance the Gardener</h1>
</header>
<div class="d-grid gap-2 col-sm-10 col-md-8 mx-auto mt-3">
<div class="d-flex mx-auto">
<i class="bi bi-info-circle-fill col-1 align-self-center ms-2" style="font-size: 2rem;"></i>
<div class="d-flex flex-column ms-2">
<p>You can only import, delete, and view 3D gardens on this demo screen.</p>
<p>If importing a 3D garden for a user that has not logged in before, it will automatically be saved under "<b>demo_user</b>".</p>
</div>
</div>
</div>
<div class="d-grid gap-2 col-sm-10 col-md-8 col-lg-6 col-xl-4 mx-auto mt-3">
<div class="row">
<div class="col-4 me-auto">
<label class="col-form-label col-4 w-fit-content fw-bold" for="user-picker" >User:</label>
</div>
<div class=" col-8">
<select class="form-select" name="user-picker" id="user-select" onchange="reloadDateTimeSelect('renders')">
</select>
</div>
</div>
<div class="row">
<div class="col-4 me-auto">
<label class="col-form-label w-fit-content fw-bold" for="date-time-picker" >Scan date & time:</label>
</div>
<div class="col-8">
<select class="form-select" name="date-time-picker" id="date-time-select">
</select>
</div>
</div>
</div>
<div class="d-grid gap-2 col-sm-4 col-md-3 col-xl-2 mx-auto mt-5">
<button id="delete-render-btn" class="btn btn-danger mt-5" onclick="getDeleteRenderInfo()"><i class="bi bi-trash-fill"></i> Delete 3D garden</button>
<button id="import-btn" class="btn btn-run mt-5" data-bs-toggle="modal" data-bs-target="#import-modal"><i class="bi bi-box-arrow-in-down"></i> Import 3D garden</button>
</div>
<div class="d-grid col-sm-5 col-md-4 col-lg-3 col-xl-3 mx-auto mt-5">
<div class="d-flex">
<button id="launch-viewer-btn" class="btn col-11 ms-2" onclick="launchGardenViewer()"><i class="bi bi-play-fill"></i> Launch 3D garden viewer</button>
<i class="bi bi-question-circle-fill col-1 align-self-center ms-2" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="The 3D garden viewer will launch in a new window."></i>
</div>
</div>
<div id="progress-spinner" class="d-flex justify-content-center mt-4 d-none">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div id="viewer-launch-msg" class="row mt-3 d-none">
<p class="text-center">Garden viewer launched, please wait...</p>
</div>
</div>
<div id="delete-render-modal" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete 3D Garden</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>The following 3D garden will be deleted:</p>
<div class="d-grid">
<div class="row">
<p class="col-3 w-fit-content fw-bold mb-0">User:</p>
<p id="chosen-garden-user" class="col-sm-8 w-fit-content mb-0"></p>
</div>
<div class="row">
<p class="col-3 w-fit-content fw-bold">Scan date & time:</p>
<p id="chosen-garden-datetime" class="col-sm-8 w-fit-content"></p>
</div>
</div>
<p>This action cannot be undone.</p>
<p>Are you sure you wish to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="deleteRender()">Delete 3D Garden</button>
</div>
</div>
</div>
</div>
<div id="import-modal" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Import 3D Garden</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="import-file-input" class="form-label">Please select the 3d garden you wish to import:</label>
<input id="import-file-input" class="form-control" type="file" accept=".zip">
<div class="invalid-feedback">
You must select a file to import.
</div>
<p class="mt-4">Please note that if the imported garden already exists, the files will be overwritten with the imported ones.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-run" onclick="importRender()">Import</button>
</div>
</div>
</div>
</div>
<div class="bottom-0" aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute bottom-0 end-0 p-3">
<div id="del-success-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Success</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
3D garden deleted.
</div>
</div>
<div id="del-fail-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Failure</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
There was an issue when trying to delete the 3D garden.<br>
Please ensure the files are not open in any programs, and try again.
</div>
</div>
<div id="import-success-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Success</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
3D garden imported.
</div>
</div>
<div id="import-fail-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Failure</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
There was an issue when trying to import the 3D garden.
</div>
</div>
<div id="import-scan-unallowed-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Error</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Scans cannot be imported in the demo screen.
</div>
</div>
<div id="render-no-choice-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Error</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
No 3D garden has been selected.
</div>
</div>
</div>
</div>
</body>
</html>