corrade-http-templates – Diff between revs 19 and 21
?pathlinks?
Rev 19 | Rev 21 | |||
---|---|---|---|---|
1 | <!DOCTYPE html> |
1 | <!DOCTYPE html> |
|
2 | <html> |
2 | <html> |
|
3 | |
3 | |
|
4 | <head> |
4 | <head> |
|
5 | <meta charset="utf-8"> |
5 | <meta charset="utf-8"> |
|
6 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
6 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
|
7 | <title>Corrade Inventory Browser</title> |
7 | <title>Corrade Inventory Browser</title> |
|
8 | <link rel="stylesheet" href="css/jquery-ui.css" /> |
8 | <link rel="stylesheet" href="css/jquery-ui.css" /> |
|
9 | <link rel="stylesheet" href="js/jstree/themes/default/style.min.css" /> |
9 | <link rel="stylesheet" href="js/jstree/themes/default/style.min.css" /> |
|
10 | |
10 | |
|
11 | <script src="js/jquery-1.12.4.js"></script> |
11 | <script src="js/jquery-1.12.4.js"></script> |
|
12 | <script src="js/jquery-ui.js"></script> |
12 | <script src="js/jquery-ui.js"></script> |
|
13 | <script src="js/jstree/jstree.min.js"></script> |
13 | <script src="js/jstree/jstree.min.js"></script> |
|
14 | <script src="js/json-to-table.js"></script> |
14 | <script src="js/json-to-table.js"></script> |
|
15 | <script src="js/jquery.base64.js"></script> |
15 | <script src="js/jquery.base64.js"></script> |
|
16 | </head> |
16 | </head> |
|
17 | |
17 | |
|
18 | <body> |
18 | <body> |
|
19 | |
19 | |
|
20 | <!-- Will hold the inventory tree (completed dynamically). --> |
20 | <!-- Will hold the inventory tree (completed dynamically). --> |
|
21 | <div id="tree"> |
21 | <div id="tree"> |
|
22 | </div> |
22 | </div> |
|
23 | |
23 | |
|
24 | <!-- Used for various pup-up controls and information (completed dynamically). --> |
24 | <!-- Used for various pup-up controls and information (completed dynamically). --> |
|
25 | <div id="popup"> |
25 | <div id="popup"> |
|
26 | <div id="content"> |
26 | <div id="content"> |
|
27 | </div> |
27 | </div> |
|
28 | </div> |
28 | </div> |
|
29 | |
29 | |
|
30 | <!-- Main script --> |
30 | <!-- Main script --> |
|
31 | <script type="text/javascript"> |
31 | <script type="text/javascript"> |
|
32 | $(function() { |
32 | $(function() { |
|
33 | function customMenu(node) { |
33 | function customMenu(node) { |
|
34 | // The default set of menu items for all types |
34 | // The default set of menu items for all types |
|
35 | var items = { |
35 | var items = { |
|
36 | // Grab information about the item. |
36 | // Grab information about the item. |
|
37 | infoItem: { |
37 | infoItem: { |
|
38 | label: "Get Info", |
38 | label: "Get Info", |
|
39 | action: function(obj) { |
39 | action: function(obj) { |
|
40 | $('#popup').dialog({ |
40 | $('#popup').dialog({ |
|
41 | width: 800, |
41 | width: 800, |
|
42 | height: 600, |
42 | height: 600, |
|
43 | modal: true, |
43 | modal: true, |
|
44 | resizable: false, |
44 | resizable: false, |
|
45 | dialogClass: 'no-close texture-dialog' |
45 | dialogClass: 'no-close texture-dialog' |
|
46 | }).on('dialogclose', function(event) { |
46 | }).on('dialogclose', function(event) { |
|
47 | $('#content').html(''); |
47 | $('#content').html(''); |
|
48 | }); |
48 | }); |
|
49 | $.ajax({ |
49 | $.ajax({ |
|
50 | type: 'POST', |
50 | type: 'POST', |
|
51 | url: "getInventoryData.php?t=" + Math.random(), |
51 | url: "getInventoryData.php?t=" + Math.random(), |
|
52 | dataType: 'json', |
52 | dataType: 'json', |
|
53 | data: { |
53 | data: { |
|
54 | uuid: node.id.split(/[\/]+/).pop(), |
54 | uuid: node.id.split(/[\/]+/).pop(), |
|
55 | data: [ |
55 | data: [ |
|
56 | 'AssetUUID', |
56 | 'AssetUUID', |
|
57 | 'CreationDate', |
57 | 'CreationDate', |
|
58 | 'Description', |
58 | 'Description', |
|
59 | 'Permissions', |
59 | 'Permissions', |
|
60 | 'UUID' // part of InventoryBase |
60 | 'UUID' // part of InventoryBase |
|
61 | ] |
61 | ] |
|
62 | } |
62 | } |
|
63 | }).done(function(data) { |
63 | }).done(function(data) { |
|
64 | $('#content').html(ConvertJsonToTable(data, null, null, null)); |
64 | $('#content').html(ConvertJsonToTable(data, null, null, null)); |
|
65 | }); |
65 | }); |
|
66 | } |
66 | } |
|
67 | } |
67 | } |
|
68 | }; |
68 | }; |
|
69 | |
69 | |
|
70 | // Give inventory items menu for anything but folders. |
70 | // Give inventory items menu for anything but folders. |
|
71 | // They could be supported too but would require first |
71 | // They could be supported too but would require first |
|
72 | // counting the number of items inside the folder and |
72 | // counting the number of items inside the folder and |
|
73 | // only accepting to send if the number is below max. |
73 | // only accepting to send if the number is below max. |
|
74 | if (node.data.type != "folder") { |
74 | if (node.data.type != "folder") { |
|
75 | $.extend(items, { |
75 | $.extend(items, { |
|
76 | giveItem: { |
76 | giveItem: { |
|
77 | label: "Give", |
77 | label: "Give", |
|
78 | action: function(obj) { |
78 | action: function(obj) { |
|
79 | $("#content").html('<form><fieldset class="ui-helper-reset"><label for="firstname">Firstname</label><input type="text" name="firstname" id="firstname" value="" class="ui-widget-content ui-corner-all"><br/><label for="lastname">Lastname</label><input type="text" name="lastname" id="lastname" value="" class="ui-widget-content ui-corner-all"></fieldset></form>'); |
79 | $("#content").html('<form><fieldset class="ui-helper-reset"><label for="firstname">Firstname</label><input type="text" name="firstname" id="firstname" value="" class="ui-widget-content ui-corner-all"><br/><label for="lastname">Lastname</label><input type="text" name="lastname" id="lastname" value="" class="ui-widget-content ui-corner-all"></fieldset></form>'); |
|
80 | $("#popup").dialog({ |
80 | $("#popup").dialog({ |
|
81 | width: 320, |
81 | width: 320, |
|
82 | height: 180, |
82 | height: 180, |
|
83 | modal: true, |
83 | modal: true, |
|
84 | resizable: false, |
84 | resizable: false, |
|
85 | buttons: { |
85 | buttons: { |
|
86 | Select: function() { |
86 | Select: function() { |
|
87 | if ($.trim($("#firstname").val()) == '' || |
87 | if ($.trim($("#firstname").val()) == '' || |
|
88 | $.trim($("#lastname").val()) == '') |
88 | $.trim($("#lastname").val()) == '') |
|
89 | return; |
89 | return; |
|
90 | var firstName = $("#firstname").val(); |
90 | var firstName = $("#firstname").val(); |
|
91 | var lastName = $("#lastname").val(); |
91 | var lastName = $("#lastname").val(); |
|
92 | $.ajax({ |
92 | $.ajax({ |
|
93 | type: 'POST', |
93 | type: 'POST', |
|
94 | url: "giveInventoryItem.php?t=" + Math.random(), |
94 | url: "giveInventoryItem.php?t=" + Math.random(), |
|
95 | data: { |
95 | data: { |
|
96 | uuid: node.id.split(/[\/]+/).pop(), |
96 | uuid: node.id.split(/[\/]+/).pop(), |
|
97 | firstname: firstName, |
97 | firstname: firstName, |
|
98 | lastname: lastName |
98 | lastname: lastName |
|
99 | } |
99 | } |
|
100 | }).done(function(data) { |
100 | }).done(function(data) { |
|
101 | $("#popup").dialog("close"); |
101 | $("#popup").dialog("close"); |
|
102 | if ($.trim(data) != '') |
102 | if ($.trim(data) != '') |
|
103 | alert(data); |
103 | alert(data); |
|
104 | }); |
104 | }); |
|
105 | }, |
105 | }, |
|
106 | Cancel: function() { |
106 | Cancel: function() { |
|
107 | $("#popup").dialog("close"); |
107 | $("#popup").dialog("close"); |
|
108 | } |
108 | } |
|
109 | } |
109 | } |
|
110 | }).on('dialogclose', function(event) { |
110 | }).on('dialogclose', function(event) { |
|
111 | $('#content').html(''); |
111 | $('#content').html(''); |
|
112 | $('#popup').dialog('option', 'buttons', {}); |
112 | $('#popup').dialog('option', 'buttons', {}); |
|
113 | }); |
113 | }); |
|
114 | } |
114 | } |
|
115 | } |
115 | } |
|
116 | }); |
116 | }); |
|
117 | } |
117 | } |
|
118 | |
118 | |
|
119 | // The "download" menu item for textures. |
119 | // The "download" menu item for textures. |
|
120 | if (node.data.type == "texture") { |
120 | if (node.data.type == "texture" || node.data.type == "snapshot") { |
|
121 | $.extend(items, { |
121 | $.extend(items, { |
|
122 | downloadItem: { |
122 | downloadItem: { |
|
123 | label: "Download", |
123 | label: "Download", |
|
124 | "action": function(obj) { |
124 | "action": function(obj) { |
|
125 | $('#texture').attr('src', 'images/loader.gif'); |
125 | $('#texture').attr('src', 'images/loader.gif'); |
|
126 | $('#popup').dialog({ |
126 | $('#popup').dialog({ |
|
127 | width: 800, |
127 | width: 800, |
|
128 | height: 600, |
128 | height: 600, |
|
129 | modal: true, |
129 | modal: true, |
|
130 | resizable: false, |
130 | resizable: false, |
|
131 | dialogClass: 'no-close texture-dialog' |
131 | dialogClass: 'no-close texture-dialog' |
|
132 | }).on('dialogclose', function(event) { |
132 | }).on('dialogclose', function(event) { |
|
133 | $('#content').html(''); |
133 | $('#content').html(''); |
|
134 | }); |
134 | }); |
|
135 | $.ajax({ |
135 | $.ajax({ |
|
136 | type: 'POST', |
136 | type: 'POST', |
|
137 | url: "downloadTexture.php?t=" + Math.random(), |
137 | url: "downloadTexture.php?t=" + Math.random(), |
|
138 | data: { |
138 | data: { |
|
139 | uuid: node.id.split(/[\/]+/).pop() |
139 | uuid: node.id.split(/[\/]+/).pop() |
|
140 | } |
140 | } |
|
141 | }).done(function(data) { |
141 | }).done(function(data) { |
|
142 | $('#content').html('<img src="" align="middle" id="texture">'); |
142 | $('#content').html('<img src="" align="middle" id="texture">'); |
|
143 | $('#texture').attr('src', "data:image/png;base64," + data); |
143 | $('#texture').attr('src', "data:image/png;base64," + data); |
|
144 | }); |
144 | }); |
|
145 | } |
145 | } |
|
146 | } |
146 | } |
|
147 | }); |
147 | }); |
|
148 | } |
148 | } |
|
149 | |
149 | |
|
150 | // The "download" menu item for notecards. |
150 | // The "download" menu item for notecards. |
|
151 | if (node.data.type == "notecard") { |
151 | if (node.data.type == "notecard") { |
|
152 | $.extend(items, { |
152 | $.extend(items, { |
|
153 | downloadItem: { |
153 | downloadItem: { |
|
154 | label: "Download", |
154 | label: "Download", |
|
155 | "action": function(obj) { |
155 | "action": function(obj) { |
|
156 | $('#texture').attr('src', 'images/loader.gif'); |
156 | $('#texture').attr('src', 'images/loader.gif'); |
|
157 | $('#popup').dialog({ |
157 | $('#popup').dialog({ |
|
158 | width: 800, |
158 | width: 800, |
|
159 | height: 600, |
159 | height: 600, |
|
160 | modal: true, |
160 | modal: true, |
|
161 | resizable: false, |
161 | resizable: false, |
|
162 | dialogClass: 'no-close texture-dialog' |
162 | dialogClass: 'no-close texture-dialog' |
|
163 | }).on('dialogclose', function(event) { |
163 | }).on('dialogclose', function(event) { |
|
164 | $('#content').html(''); |
164 | $('#content').html(''); |
|
165 | }); |
165 | }); |
|
166 | $.ajax({ |
166 | $.ajax({ |
|
167 | type: 'POST', |
167 | type: 'POST', |
|
168 | url: "downloadNotecard.php?t=" + Math.random(), |
168 | url: "downloadNotecard.php?t=" + Math.random(), |
|
169 | data: { |
169 | data: { |
|
170 | uuid: node.id.split(/[\/]+/).pop() |
170 | uuid: node.id.split(/[\/]+/).pop() |
|
171 | } |
171 | } |
|
172 | }).done(function(data) { |
172 | }).done(function(data) { |
|
173 | $.base64.utf8decode = true; |
173 | $.base64.utf8decode = true; |
|
174 | $('#content').html('<pre>' + $.base64.atob(data) + '</pre>'); |
174 | $('#content').html('<pre>' + $.base64.atob(data) + '</pre>'); |
|
175 | }); |
175 | }); |
|
176 | } |
176 | } |
|
177 | } |
177 | } |
|
178 | }); |
178 | }); |
|
179 | } |
179 | } |
|
180 | |
180 | |
|
181 | // The "download" menu item for sounds. |
181 | // The "download" menu item for sounds. |
|
182 | if (node.data.type == "sound") { |
182 | if (node.data.type == "sound") { |
|
183 | $.extend(items, { |
183 | $.extend(items, { |
|
184 | downloadItem: { |
184 | downloadItem: { |
|
185 | label: "Download", |
185 | label: "Download", |
|
186 | "action": function(obj) { |
186 | "action": function(obj) { |
|
187 | $('#texture').attr('src', 'images/loader.gif'); |
187 | $('#texture').attr('src', 'images/loader.gif'); |
|
188 | $('#popup').dialog({ |
188 | $('#popup').dialog({ |
|
189 | width: 800, |
189 | width: 800, |
|
190 | height: 600, |
190 | height: 600, |
|
191 | modal: true, |
191 | modal: true, |
|
192 | resizable: false, |
192 | resizable: false, |
|
193 | dialogClass: 'no-close texture-dialog' |
193 | dialogClass: 'no-close texture-dialog' |
|
194 | }).on('dialogclose', function(event) { |
194 | }).on('dialogclose', function(event) { |
|
195 | $('#content').html(''); |
195 | $('#content').html(''); |
|
196 | }); |
196 | }); |
|
197 | $.ajax({ |
197 | $.ajax({ |
|
198 | type: 'POST', |
198 | type: 'POST', |
|
199 | url: "downloadSound.php?t=" + Math.random(), |
199 | url: "downloadSound.php?t=" + Math.random(), |
|
200 | data: { |
200 | data: { |
|
201 | uuid: node.id.split(/[\/]+/).pop() |
201 | uuid: node.id.split(/[\/]+/).pop() |
|
202 | } |
202 | } |
|
203 | }).done(function(data) { |
203 | }).done(function(data) { |
|
204 | $('#content').html('<audio controls="controls"><source id="source" src="" type="audio/mp3"></source></audio>'); |
204 | $('#content').html('<audio controls="controls"><source id="source" src="" type="audio/mp3"></source></audio>'); |
|
205 | $('#source').attr('src', "data:audio/mp3;base64," + data); |
205 | $('#source').attr('src', "data:audio/mp3;base64," + data); |
|
206 | }); |
206 | }); |
|
207 | } |
207 | } |
|
208 | } |
208 | } |
|
209 | }); |
209 | }); |
|
210 | } |
210 | } |
|
211 | |
211 | |
|
212 | return items; |
212 | return items; |
|
213 | } |
213 | } |
|
214 | |
214 | |
|
215 | $("#tree").jstree({ |
215 | $("#tree").jstree({ |
|
216 | // - sort will sort items by date |
216 | // - sort will sort items by date |
|
217 | // - state will store the open / closed state of the jstree |
217 | // - state will store the open / closed state of the jstree |
|
218 | 'plugins': ["themes", "json_data", "ui", "contextmenu", "sort", "dnd", "state"], |
218 | 'plugins': ["themes", "json_data", "ui", "contextmenu", "sort", "dnd", "state"], |
|
219 | 'contextmenu': { |
219 | 'contextmenu': { |
|
220 | "items": function(node) { |
220 | "items": function(node) { |
|
221 | return customMenu(node); |
221 | return customMenu(node); |
|
222 | } |
222 | } |
|
223 | }, |
223 | }, |
|
224 | 'dnd': { |
224 | 'dnd': { |
|
225 | // Do not copy items. |
225 | // Do not copy items. |
|
226 | 'copy': false, |
226 | 'copy': false, |
|
227 | // Do not execute the check callback whilst dragging. |
227 | // Do not execute the check callback whilst dragging. |
|
228 | 'check_while_dragging': false |
228 | 'check_while_dragging': false |
|
229 | }, |
229 | }, |
|
230 | 'sort': function(a, b) { |
230 | 'sort': function(a, b) { |
|
231 | return Date.parse(this.get_node(a).data.time) < Date.parse(this.get_node(b).data.time) ? 1 : -1; |
231 | return Date.parse(this.get_node(a).data.time) < Date.parse(this.get_node(b).data.time) ? 1 : -1; |
|
232 | }, |
232 | }, |
|
233 | 'core': { |
233 | 'core': { |
|
234 | 'check_callback': function(operation, node, parent, position, more) { |
234 | 'check_callback': function(operation, node, parent, position, more) { |
|
235 | // Do not allow moves above the root node. |
235 | // Do not allow moves above the root node. |
|
236 | if (parent.id == "#") |
236 | if (parent.id == "#") |
|
237 | return false; |
237 | return false; |
|
238 | |
238 | |
|
239 | var moved = false; |
239 | var moved = false; |
|
240 | $.ajax({ |
240 | $.ajax({ |
|
241 | // A synchronous reply is needed so we know what to tell the tree. |
241 | // A synchronous reply is needed so we know what to tell the tree. |
|
242 | async: false, |
242 | async: false, |
|
243 | type: 'POST', |
243 | type: 'POST', |
|
244 | url: "moveInventoryItem.php?t=" + Math.random(), |
244 | url: "moveInventoryItem.php?t=" + Math.random(), |
|
245 | data: { |
245 | data: { |
|
246 | source: node.id, |
246 | source: node.id, |
|
247 | target: parent.id |
247 | target: parent.id |
|
248 | } |
248 | } |
|
249 | }).done(function(data) { |
249 | }).done(function(data) { |
|
250 | if ($.trim(data) != 'success') { |
250 | if ($.trim(data) != 'success') { |
|
251 | if ($.trim(data) != '') |
251 | if ($.trim(data) != '') |
|
252 | alert(data); |
252 | alert(data); |
|
253 | return; |
253 | return; |
|
254 | } |
254 | } |
|
255 | moved = true; |
255 | moved = true; |
|
256 | }); |
256 | }); |
|
257 | return moved; |
257 | return moved; |
|
258 | }, |
258 | }, |
|
259 | 'data': { |
259 | 'data': { |
|
260 | "url": "getInventoryNode.php", |
260 | "url": "getInventoryNode.php", |
|
261 | "type": "POST", |
261 | "type": "POST", |
|
262 | "dataType": "JSON", |
262 | "dataType": "JSON", |
|
263 | "data": function(node) { |
263 | "data": function(node) { |
|
264 | return node.id == "#" ? "folder=init" : "folder=" + node.id; |
264 | return node.id == "#" ? "folder=init" : "folder=" + node.id; |
|
265 | } |
265 | } |
|
266 | } |
266 | } |
|
267 | } |
267 | } |
|
268 | }).bind('move_node.jstree', function(e, data) { |
268 | }).bind('move_node.jstree', function(e, data) { |
|
269 | // Once the node is moved, update the node ID to reflect the path change. |
269 | // Once the node is moved, update the node ID to reflect the path change. |
|
270 | var parentPath = data.parent != '/' ? data.parent : ""; |
270 | var parentPath = data.parent != '/' ? data.parent : ""; |
|
271 | var item = data.node.id.split(/[\/]+/).pop(); |
271 | var item = data.node.id.split(/[\/]+/).pop(); |
|
272 | data.instance.set_id(data.node, parentPath + '/' + item); |
272 | data.instance.set_id(data.node, parentPath + '/' + item); |
|
273 | }); |
273 | }); |
|
274 | }); |
274 | }); |
|
275 | </script> |
275 | </script> |
|
276 | </body> |
276 | </body> |
|
277 | |
277 | |
|
278 | </html> |
278 | </html> |
|
279 | |
279 | |
|
280 |
|
280 |
|
|
281 | |
281 | |
|
282 | |
282 | |
|
283 | |
283 | |