IAM21 instance, do not create collab nor modify a team, your changes will be lost


Changes for page ExternalApps

Last modified by bougault on 2019/09/12 12:46
From version 2.208
edited by hbpadmin
on 2019/07/10 08:33
Change comment: There is no comment for this version
To version 2.195
edited by bougault
on 2019/05/17 10:51
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.hbpadmin
1 +XWiki.bougault
Content
... ... @@ -1,462 +1,281 @@
1 -{{include reference="Collaboratory.Apps.Apps.Code.AppsMacros"/}}
1 +{{velocity}}
2 +#set ($discard = $doc.use('InstalledApp.Code.InstalledAppClass'))
3 +#set($query = 'select doc from Document doc, doc.object(ExternalApps.Code.ExternalAppsClass) as app')
4 +#set($applications = $services.query.xwql($query).addFilter('hidden').execute())
5 +#if ($xcontext.action == 'edit')
6 +#set ($discard = $xwiki.ssx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppCss'))
7 +#set ($discardjs = $xwiki.jsx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppJs'))
2 2  
3 -(% class="applications" %)
4 -(((
5 -(% class="application" %)
6 -(((
7 -(% class="application-content" %)
8 -(((
9 -(% class="app-logo" %)
10 -(((
11 -
12 -)))
9 +#macro( applications $applications)
10 +<div class="applications">
11 + #foreach($application in $applications)
12 + #set($selectField = $application.toString().concat('-selected'))
13 + #set($detailsField = $application.toString().concat('-details'))
14 + <div class="application">
15 + ## TODO: if not in edit mode, do not define the input + fieldname
16 + <input type="radio" data-type="select" name="InstalledApp.Code.InstalledAppClass_0_app" id="$selectField" value="$application" />
17 + <input type="checkbox" data-type="details" name="detailedView" id="$detailsField" />
18 + <label for="$detailsField" class="details-overlay"></label>
19 + #application( $application $selectField $detailsField)
20 + </div>
21 + #end
22 +</div>
23 +#end
13 13  
14 -(% class="tags" %)
15 -(((
16 -Brain Simulation Platform
17 -)))
25 +#macro( application $application $selectField $detailsField)
26 + #set($app = $xwiki.getDocument($application))
27 + #set($title = $app.getDisplayTitle())
28 + <div class="application-content">
29 + #if($app.getAttachment('logo.png').isImage())
30 + <img src="$app.getAttachmentURL('logo.png')" width="75" height="75" alt="$app.getValue('title').replace('"', '\"')">
31 + #else
32 + <img
33 + src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN89x8AAuEB74Y0o2cAAAAASUVORK5CYII="
34 + width="75"
35 + height="75"
36 + alt=""
37 + >
38 + #end
39 + <div class="tags"><span>$app.getValue('category')</span></div>
40 + <h3 class="title">$title</h3>
41 + <p class="description">$!app.getValue('description')</p>
42 + <div class="application-buttons">
43 + <label for="$detailsField" class="btn label-more"></label>
44 + <label for="$selectField" class="btn btn-primary choose-app">Choose this App</label>
45 + </div>
46 + <div class="details">
47 + <h4>Maintainers</h4>
48 + [list of maintainers]
49 + <h4>Documentation</h4>
50 + App documentation link
51 + <h4>URL</h4>
52 + $app.getValue('url')
53 + </div>
54 + </div>
55 +#end
18 18  
19 -(% class="title" %)
20 -=== Model Catalog ===
21 -
22 -(% class="description" %)
23 -A catalog of models developed and/or used in HBP
24 -
25 -(% class="application-buttons" %)
57 +{{html wiki="true"}}
58 +(% class="xform" %)
26 26  (((
27 -
60 + ; <label#if ($xcontext.action == 'edit') for="ExternalApps.Code.ExternalAppsClass_0_title"#end>$escapetool.xml($doc.displayPrettyName('title', false, false))</label>##
61 + (% class="xHint" %)$services.localization.render('Required. This is how the item will be displayed in the navigation')
62 + : $doc.display('title')
28 28  )))
64 +{{/html}}
29 29  
30 -(% class="details" %)
31 -(((
32 -==== Maintainers ====
66 +{{html clean="false"}}
33 33  
34 -* [[$user.getValue('first_name') $user.getValue('last_name')>>path:/bin/view/ExternalApps/]]
68 +##{{html clean="false"}}
69 +##set ($displayDocExtra = false)
70 +<style>
71 +#document-title {
72 + visibility: hidden;
73 +}
35 35  
36 -==== Documentation ====
75 +.applications {
76 + display: grid;
77 + grid-gap: 20px;
78 +}
37 37  
38 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
80 +@media screen and (min-width: 640px) {
81 + .applications {
82 + grid-template-columns: 1fr 1fr;
83 + }
84 +}
85 +/*
86 +@media screen and (min-width: 900px) {
87 + .applications {
88 + grid-template-columns: 1fr 1fr 1fr;
89 + }
90 +}
91 +*/
39 39  
40 -==== URL ====
93 +@media screen and (min-width: 1200px) {
94 + .applications {
95 + grid-template-columns: 1fr 1fr 1fr;
96 + }
97 +}
41 41  
42 -[[https:~~/~~/validation-v1.brainsimulation.eu/>>url:https://validation-v1.brainsimulation.eu/]]
43 -)))
44 -)))
45 -)))
99 +@media screen and (min-width: 1800px) {
100 + .applications {
101 + grid-template-columns: 1fr 1fr 1fr 1fr;
102 + }
103 +}
104 +.application {
105 +background: var(--color-support-light);
106 +}
46 46  
47 -(% class="application" %)
48 -(((
49 -(% class="application-content" %)
50 -(((
51 -(% class="app-logo" %)
52 -(((
53 -
54 -)))
108 +.application-content {
109 + border: 1px solid var(--color-support-light);
110 + background: var(--color-white);
111 + padding: 1rem;
112 + height: 100%;
113 + font-weight: normal;
114 + display: block;
115 + position: relative;
116 + padding-bottom: 3rem;
117 +}
55 55  
56 -(% class="tags" %)
57 -(((
58 -Neuromorphic
59 -)))
119 +.application-content .details {
120 + display: none;
121 +}
60 60  
61 -(% class="title" %)
62 -=== PyNN model builder (staging) ===
63 63  
64 -(% class="description" %)
65 -A graphical interface for building and simulating spiking network models
124 +.application .application-buttons {
125 + display: flex;
126 + position: absolute;
127 + bottom: 0px;
128 + left: 0;
129 + right:0;
130 +}
66 66  
67 -(% class="application-buttons" %)
68 -(((
69 -
70 -)))
132 +.application .application-buttons .btn {
133 + width: 50%;
134 + margin: 0;
135 + border-radius: 0 !important;
136 +}
71 71  
72 -(% class="details" %)
73 -(((
74 -==== Maintainers ====
138 +.application img {
139 + display: block;
140 + margin: 0 auto 1.5rem auto;
141 +}
75 75  
76 -* [[$user.getValue('first_name') $user.getValue('last_name')>>path:/bin/view/ExternalApps/]]
143 +.application .title {
144 + text-align: center;
145 + height: 3em;
146 +}
77 77  
78 -==== Documentation ====
148 +.application .tags {
149 + display: flex;
150 + justify-content: space-around;
151 + margin-bottom: 1.5rem;
152 +}
79 79  
80 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
154 +.application .tags span {
155 + font-size: .8rem;
156 + border: 1px solid var(--color-support-dark);
157 + padding: .2rem .3rem;
158 + border-radius: var(--border-radius-default);
159 +}
81 81  
82 -==== URL ====
161 +.application .description {
162 + text-align: center;
163 +}
83 83  
84 -[[https:~~/~~/nmpi-staging.hbpneuromorphic.eu/gui/app.html#!/home>>url:https://nmpi-staging.hbpneuromorphic.eu/gui/app.html#!/home]]
85 -)))
86 -)))
87 -)))
165 +.applications input[type="radio"],
166 +.applications input[type="checkbox"]{
167 +display: none;
168 +}
88 88  
89 -(% class="application" %)
90 -(((
91 -(% class="application-content" %)
92 -(((
93 -(% class="app-logo" %)
94 -(((
95 -
96 -)))
97 97  
98 -(% class="tags" %)
99 -(((
100 -Neuromorphic
101 -)))
171 +.applications input[data-type="select"]:checked ~ div.application-content {
172 + border: 1px solid var(--color-primary);
173 +}
102 102  
103 -(% class="title" %)
104 -=== Neuromorphic Computing Platform Resource Manager ===
105 105  
106 -(% class="description" %)
107 -An application for requesting access to the HBP Neuromorphic Computing Systems and for tracking quota usage once access is granted.
176 +.applications input[data-type="details"]:checked ~ div.application-content {
177 + position: fixed;
178 + top: 50%;
179 + left: 50%;
180 + width: 80vw;
181 + height: 80vh;
182 + margin-left:-40vw;
183 + margin-top: -40vh;
184 + background: #FFF;
185 + z-index: 255;
186 + overflow: auto;
187 +}
108 108  
109 -(% class="application-buttons" %)
110 -(((
111 -
112 -)))
189 +.label-more {
190 + cursor: zoom-in;
191 +}
192 +.label-more::before {
193 + content: "More";
194 +}
195 +.applications input[data-type="details"]:checked ~ .application-content .details {
196 + display: block;
197 +}
113 113  
114 -(% class="details" %)
115 -(((
116 -==== Maintainers ====
199 +.details-overlay {
200 + display: none;
201 + cursor: zoom-out;
202 +}
117 117  
118 -* [[$user.getValue('first_name') $user.getValue('last_name')>>path:/bin/view/ExternalApps/]]
204 +.applications input[data-type="details"]:checked ~ .details-overlay {
205 + width:100vw;
206 + height: 100vh;
207 + background: var(--color-support-dark);
208 + opacity: .7;
209 + content: '';
210 + display: block;
211 + position: fixed;
212 + margin: 0;
213 + top:0;
214 + left:0;
215 + z-index: 254;
216 +}
119 119  
120 -==== Documentation ====
218 +.applications input[data-type="details"]:checked ~ div .label-more {
219 + cursor: zoom-out;
220 +}
221 +.applications input[data-type="details"]:checked ~ div .label-more::before {
222 + content:"Close";
223 +}
224 +</style>
121 121  
122 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
123 123  
124 -==== URL ====
125 125  
126 -[[https:~~/~~/quotas.hbpneuromorphic.eu/app/>>url:https://quotas.hbpneuromorphic.eu/app/]]
127 -)))
128 -)))
129 -)))
228 +<div class="xform">
229 +<dl>
230 +<dt>
231 +<label>Choose an application in the list below</label>
232 +<dt>
233 +</dl>
234 +</div>
130 130  
131 -(% class="application" %)
132 -(((
133 -(% class="application-content" %)
134 -(((
135 -(% class="app-logo" %)
136 -(((
137 -
138 -)))
236 +#applications( $applications )
139 139  
140 -(% class="tags" %)
141 -(((
142 -Neuromorphic
143 -)))
238 +<script>
239 +document.addEventListener('DOMContentLoaded', function() {
240 + let saveAndView = document.querySelector('input[name="action_save"]');
241 + Array.from(document.querySelectorAll('label.choose-app')).forEach(function(button){
242 + button.addEventListener('click', function() { setTimeout(function() { saveAndView.click() }, 250)});
243 + });
244 +});
245 +</script>
144 144  
145 -(% class="title" %)
146 -=== Neuromorphic Computing Platform Job Manager (staging) ===
247 +{{/html}}
248 +#else
249 +##set($discard = $doc.use('InstalledApp.Code.InstalledAppClass'))
250 +#set($appId = $doc.display('app'))
251 +#set($app = $xwiki.getDocument($appId))
252 +#*{{html clean="false"}}
253 +<style>
254 +#external-app {
255 +width: 100%;
256 +height: 100vh;
257 +}
258 +</style>
259 +<iframe id="external-app" src="$app.getValue('url')"></iframe>
260 +{{/html}}
261 +*#
147 147  
148 -(% class="description" %)
149 -Staging version of Job Manager app
263 +{{html clean="false"}}
264 +#set ($discard = $xwiki.ssx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppCss'))
265 +#set ($discardjs = $xwiki.jsx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppJs'))
266 +<style>
267 +#iframeApp-container {
268 +background: #FFF;
269 +}
270 +</style>
150 150  
151 -(% class="application-buttons" %)
152 -(((
153 -
154 -)))
272 +<div id="iframeApp-container">
273 + <div class="app-toolbar">
274 + <button id="iframeApp-fullscreen"><span class="fa fa-arrows-alt"></span></button>
275 + </div>
276 + <iframe id="iframeApp" src="$app.get('url')"></iframe>
277 +</div>
278 +{{/html}}
279 +#end
155 155  
156 -(% class="details" %)
157 -(((
158 -==== Maintainers ====
159 -
160 -* [[$user.getValue('first_name') $user.getValue('last_name')>>path:/bin/view/ExternalApps/]]
161 -
162 -==== Documentation ====
163 -
164 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
165 -
166 -==== URL ====
167 -
168 -[[https:~~/~~/nmpi-staging.hbpneuromorphic.eu/app/#/queue>>url:https://nmpi-staging.hbpneuromorphic.eu/app/#/queue]]
169 -)))
170 -)))
171 -)))
172 -
173 -(% class="application" %)
174 -(((
175 -(% class="application-content" %)
176 -(((
177 -(% class="app-logo" %)
178 -(((
179 -
180 -)))
181 -
182 -(% class="tags" %)
183 -(((
184 -
185 -)))
186 -
187 -(% class="title" %)
188 -=== TestNewApp ===
189 -
190 -
191 -(% class="application-buttons" %)
192 -(((
193 -
194 -)))
195 -
196 -(% class="details" %)
197 -(((
198 -==== Maintainers ====
199 -
200 -* [[$user.getValue('first_name') $user.getValue('last_name')>>path:/bin/view/ExternalApps/]]
201 -
202 -==== Documentation ====
203 -
204 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
205 -
206 -==== URL ====
207 -)))
208 -)))
209 -)))
210 -
211 -(% class="application" %)
212 -(((
213 -(% class="application-content" %)
214 -(((
215 -(% class="app-logo" style="background-image:url('/bin/download/ExternalApps/Unicorn%20App/logo.png')" %)
216 -(((
217 -
218 -)))
219 -
220 -(% class="tags" %)
221 -(((
222 -Tasks
223 -)))
224 -
225 -(% class="title" %)
226 -=== Dragon App ===
227 -
228 -(% class="description" %)
229 -This is a fake app for testing purpose.
230 -
231 -(% class="application-buttons" %)
232 -(((
233 -
234 -)))
235 -
236 -(% class="details" %)
237 -(((
238 -==== Maintainers ====
239 -
240 -* [[François Bougault>>path:/bin/view/XWiki/bougault]]
241 -
242 -==== Documentation ====
243 -
244 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
245 -
246 -==== URL ====
247 -
248 -[[something that should not be display as an iframe>>path:something that should not be display as an iframe]]
249 -)))
250 -)))
251 -)))
252 -
253 -(% class="application" %)
254 -(((
255 -(% class="application-content" %)
256 -(((
257 -(% class="app-logo" %)
258 -(((
259 -
260 -)))
261 -
262 -(% class="tags" %)
263 -(((
264 -
265 -)))
266 -
267 -(% class="title" %)
268 -=== Toto ===
269 -
270 -(% class="description" %)
271 -Lorem ipsim
272 -
273 -(% class="application-buttons" %)
274 -(((
275 -
276 -)))
277 -
278 -(% class="details" %)
279 -(((
280 -==== Maintainers ====
281 -
282 -* [[$user.getValue('first_name') $user.getValue('last_name')>>path:/bin/view/ExternalApps/]]
283 -
284 -==== Documentation ====
285 -
286 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
287 -
288 -==== URL ====
289 -)))
290 -)))
291 -)))
292 -
293 -(% class="application" %)
294 -(((
295 -(% class="application-content" %)
296 -(((
297 -(% class="app-logo" %)
298 -(((
299 -
300 -)))
301 -
302 -(% class="tags" %)
303 -(((
304 -Neuroinformatics
305 -)))
306 -
307 -(% class="title" %)
308 -=== Neural Activity Resource ===
309 -
310 -(% class="description" %)
311 -An app for browsing, viewing and searching neural activity datasets (e.g. electrophysiology, calcium imaging, simulation results, etc.)
312 -
313 -(% class="application-buttons" %)
314 -(((
315 -
316 -)))
317 -
318 -(% class="details" %)
319 -(((
320 -==== Maintainers ====
321 -
322 -* [[$user.getValue('first_name') $user.getValue('last_name')>>path:/bin/view/ExternalApps/]]
323 -
324 -==== Documentation ====
325 -
326 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
327 -
328 -==== URL ====
329 -
330 -[[https:~~/~~/nar-browser-app.brainsimulation.eu/app/>>url:https://nar-browser-app.brainsimulation.eu/app/]]
331 -)))
332 -)))
333 -)))
334 -
335 -(% class="application" %)
336 -(((
337 -(% class="application-content" %)
338 -(((
339 -(% class="app-logo" %)
340 -(((
341 -
342 -)))
343 -
344 -(% class="tags" %)
345 -(((
346 -Neuromorphic
347 -)))
348 -
349 -(% class="title" %)
350 -=== Neuromorphic Computing Platform Job Manager v2 ===
351 -
352 -(% class="description" %)
353 -Neuromorphic Computing Platform Job Manager (version 2)
354 -
355 -(% class="application-buttons" %)
356 -(((
357 -
358 -)))
359 -
360 -(% class="details" %)
361 -(((
362 -==== Maintainers ====
363 -
364 -* [[$user.getValue('first_name') $user.getValue('last_name')>>path:/bin/view/ExternalApps/]]
365 -
366 -==== Documentation ====
367 -
368 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
369 -
370 -==== URL ====
371 -
372 -[[https:~~/~~/nmpi.hbpneuromorphic.eu/app/#/queue>>url:https://nmpi.hbpneuromorphic.eu/app/#/queue]]
373 -)))
374 -)))
375 -)))
376 -
377 -(% class="application" %)
378 -(((
379 -(% class="application-content" %)
380 -(((
381 -(% class="app-logo" %)
382 -(((
383 -
384 -)))
385 -
386 -(% class="tags" %)
387 -(((
388 -Neuromorphic
389 -)))
390 -
391 -(% class="title" %)
392 -=== Neuromorphic Computing Platform Guidebook ===
393 -
394 -(% class="description" %)
395 -A manual for users of the HBP Neuromorphic Computing Platform
396 -
397 -(% class="application-buttons" %)
398 -(((
399 -
400 -)))
401 -
402 -(% class="details" %)
403 -(((
404 -==== Maintainers ====
405 -
406 -* [[$user.getValue('first_name') $user.getValue('last_name')>>path:/bin/view/ExternalApps/]]
407 -
408 -==== Documentation ====
409 -
410 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
411 -
412 -==== URL ====
413 -
414 -[[https:~~/~~/electronicvisions.github.io/hbp-sp9-guidebook/>>url:https://electronicvisions.github.io/hbp-sp9-guidebook/]]
415 -)))
416 -)))
417 -)))
418 -
419 -(% class="application" %)
420 -(((
421 -(% class="application-content" %)
422 -(((
423 -(% class="app-logo" %)
424 -(((
425 -
426 -)))
427 -
428 -(% class="tags" %)
429 -(((
430 -Neuroinformatics
431 -)))
432 -
433 -(% class="title" %)
434 -=== KnowledgeSpace ===
435 -
436 -(% class="description" %)
437 -A community encyclopedia linking brain research concepts to data, models, and literature.
438 -
439 -(% class="application-buttons" %)
440 -(((
441 -
442 -)))
443 -
444 -(% class="details" %)
445 -(((
446 -==== Maintainers ====
447 -
448 -* [[$user.getValue('first_name') $user.getValue('last_name')>>path:/bin/view/ExternalApps/]]
449 -
450 -==== Documentation ====
451 -
452 -[[$app.getValue('documentation')>>path:$app.getValue('documentation')]]
453 -
454 -==== URL ====
455 -
456 -[[https:~~/~~/knowledge-space.org/>>url:https://knowledge-space.org/]]
457 -)))
458 -)))
459 -)))
460 -)))
461 -
462 -
281 +{{/velocity}}