- Timestamp:
- Dec 18, 2020, 2:13:22 PM (4 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/zoo-project/zoo-services/utils/open-api/templates/index.html
r965 r967 269 269 #set $cid="JOBSOCKET-"+$conf["lenv"]["usid"] 270 270 <form class="needs-validation" data-id="$cid" novalidate> 271 <h3>Inputs</h3> 272 <div class="accordion" id="accordionInputExample"> 273 #for i in range(len(values["inputs"])) 274 #set cInput=$values["inputs"][$i] 275 #set cName=$cInput["id"].replace(".","_") 276 $printCard({"id": $cName, "title": $cInput["id"],"content":'<p>'+$cInput["description"]+'</p>'+$printInputContent($cInput)}) 277 #end for 278 </div> 271 <input type="hidden" name="oapi_ioAsArray" value="#if "io_as_array" in $openapi["openapi"]#$openapi["openapi"]["io_as_array"]#else#false#end if#" /> 272 <input type="hidden" name="oapi_wsUrl" value="$openapi["openapi"]["wsurl"]" /> 273 <input type="hidden" name="oapi_jobUrl" value="$openapi["openapi"]["rootUrl"]$(currentUrl)/jobs" /> 274 <input type="hidden" name="oapi_reqID" value="$cid" /> 275 <h3>Inputs</h3> 276 <div class="accordion" id="accordionInputExample"> 277 #for i in range(len(values["inputs"])) 278 #set cInput=$values["inputs"][$i] 279 #set cName=$cInput["id"].replace(".","_") 280 $printCard({"id": $cName, "title": $cInput["id"],"content":'<p>'+$cInput["description"]+'</p>'+$printInputContent($cInput)}) 281 #end for 282 </div> 279 283 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 284 <h3>Outputs</h3> 285 <div class="accordion" id="accordionOutputExample"> 286 #for i in range(len(values["outputs"])) 287 #set cOutput=$values["outputs"][$i] 288 #set cName=$cOutput["id"].replace(".","_") 289 #set cFormats=[] 290 #if "formats" in $cOutput["output"] 291 #for j in range(len($cOutput["output"]["formats"])) 292 #set cFormats+=[$cOutput["output"]["formats"][$j]["mimeType"]] 293 #end for 294 #end if 295 #set cTransmissions=[] 296 #for j in range(len($values["outputTransmission"])) 297 #set cTransmissions+=[$values["outputTransmission"][$j]] 298 #end for 299 #set cContent="<p>"+$cOutput["description"]+"</p>" 300 #if len(cFormats)>0 301 #set $cContent+=$printControl({"id": $cOutput["id"], "title": "format","type": "format","name": $cName,"options":$cFormats}) 302 #end if 303 #if len(cTransmissions)>0 304 #set $cContent+=$printControl({"id": $cOutput["id"], "title": "transmission","type": "transmission","name": $cName,"options":$cTransmissions}) 305 #end if 306 $printCard({"id": $cName+"_"+str($i),"title": $cOutput["id"],"content": $cContent}) 307 #end for 308 </div> 305 309 306 <h3>Execution options</h3> 307 <div class="accordion" id="accordionExampleExecutionMode"> 308 #set cContent="" 309 #set cUrl=$openapi["openapi"]["publisherurl"]+cid+"&type=" 310 #for a in ["successUri","inProgressUri","failedUri"] 311 #set $cContent+=$printControl({"title": $a,"type": "main_value","name": $a,"ph":"URL","value":$cUrl+$a.replace("Uri","")}) 312 #end for 313 $printCard({"id":"ModeOne","title":"Subscribers","content": $cContent}) 314 $printCard({"id":"ModeTwo","title":"Response","content": $printControl({"title":"format","type": "main_value","name": "format","options":["document","raw"]})}) 315 $printCard({"id":"ModeThree","title":"Mode","content": $printControl({"title":"mode","type": "main_value","name": "mode","options":["async","sync"]})}) 316 </div> 317 <button type="submit" class="btn btn-primary" >Submit</button> 318 </form> 310 <h3>Execution options</h3> 311 <div class="accordion" id="accordionExampleExecutionMode"> 312 #set cContent="" 313 #set cUrl=$openapi["openapi"]["publisherurl"]+cid+"&type=" 314 #for a in ["successUri","inProgressUri","failedUri"] 315 #set $cContent+=$printControl({"title": $a,"type": "main_value","name": $a,"ph":"URL","value":$cUrl+$a.replace("Uri","")}) 316 #end for 317 $printCard({"id":"ModeOne","title":"Subscribers","content": $cContent}) 318 $printCard({"id":"ModeTwo","title":"Response","content": $printControl({"title":"format","type": "main_value","name": "format","options":["document","raw"]})}) 319 $printCard({"id":"ModeThree","title":"Mode","content": $printControl({"title":"mode","type": "main_value","name": "mode","options":["async","sync"]})}) 320 </div> 321 322 <button type="submit" class="btn btn-primary" >Submit</button> 323 </form> 319 324 <div class="modal" tabindex="-1" id="exampleModal"> 320 325 <div class="modal-dialog modal-xl"> … … 343 348 </div> 344 349 </div> 345 <script> 346 var socket; 347 function addElementToList(){ 348 var lClosure=arguments[0]; 349 var isOver=false; 350 var cnt=0; 351 lClosure.parent().parent().find("div").each(function(){ 352 if(isOver) return; 353 if(\$(this).hasClass("btn-group")) isOver=true; 354 if(\$(this).hasClass("input-group")){ 355 lClosure.parent().parent().append(\$(this)[0].outerHTML); 356 cnt++; 357 } 358 }); 359 if(lClosure.parent().parent().find(".input-group").length>cnt) 360 lClosure.next().attr("disabled",false); 361 else 362 lClosure.next().attr("disabled",true); 363 } 364 function delElementToList(){ 365 var lClosure=arguments[0]; 366 var isOver=false; 367 var cnt=0; 368 lClosure.parent().parent().find("div").each(function(){ 369 if(isOver) return; 370 if(\$(this).hasClass("btn-group")) isOver=true; 371 if(\$(this).hasClass("input-group")) cnt++; 372 }); 373 if(lClosure.parent().parent().find(".input-group").length>cnt) 374 for(var i=0;i<cnt;i++) 375 lClosure.parent().parent().find(".input-group").last().remove(); 376 if(lClosure.parent().parent().find(".input-group").length==cnt) 377 lClosure.attr("disabled",true); 378 else 379 lClosure.attr("disabled",false); 380 } 381 382 function loadRequest(){ 383 var requestObject={ 384 "inputs":[], 385 "outputs":[], 386 "subscriber":{}, 387 "mode": \$("select[name='main_value_mode']").val(), 388 "response": \$("select[name='main_value_format']").val() 389 } 390 for(var i=0;i < System["JSON_STR"]["inputs"].length;i++){ 391 var cName=System["JSON_STR"]["inputs"][i]["id"].replace(".","_"); 392 var selector="input[name='input_value_"+cName+"'],"+ 393 "select[name='input_value_"+cName+"']"; 394 if(\$(selector).val()!=""){ 395 \$(selector).each(function(){ 396 var cInput={"id": System["JSON_STR"]["inputs"][i]["id"], "input": {}}; 397 if(System["JSON_STR"]["inputs"][i]["input"]["formats"]){ 398 var selector1="input[name='input_format_"+cName+"'],"+ 399 "select[name='input_format_"+cName+"']"; 400 console.log(\$(this).parent().prev().find("select").val()); 401 cInput["input"]["format"]={ 402 "mimeType": \$(this).parent().prev().find("select").val() 403 }; 404 cInput["input"]["value"]={ 405 "href": \$(this).val() 406 }; 407 } 408 else{ 409 if(System["JSON_STR"]["inputs"][i]["input"]["literalDataDomains"]){ 410 console.log(System["JSON_STR"]["inputs"][i]["input"]["literalDataDomains"]); 411 cInput["input"]["dataType"]={ 412 "name": System["JSON_STR"]["inputs"][i]["input"]["literalDataDomains"][0]["dataType"]["name"] 413 }; 414 cInput["input"]["value"]=\$(this).val(); 415 } 416 }console.log(cInput); 417 requestObject["inputs"].push(cInput); 418 }); 419 } 420 } 421 console.log(System["JSON_STR"]["outputs"]); 422 for(var i=0;i < System["JSON_STR"]["outputs"].length;i++){ 423 var cOutput={"id": System["JSON_STR"]["outputs"][i]["id"]}; 424 var cName=System["JSON_STR"]["outputs"][i]["id"].replace(/\./g,"_"); 425 if(System["JSON_STR"]["outputs"][i]["output"]["formats"]){ 426 var selector="select[name='format_"+cName+"']"; 427 cOutput["format"]={ 428 "mimeType": \$(selector).val() 429 }; 430 } 431 else{ 432 if(System["JSON_STR"]["outputs"][i]["output"]["literalDataDomains"]){ 433 cOutput["dataType"]={ 434 "name": System["JSON_STR"]["outputs"][i]["output"]["literalDataDomains"][0]["dataType"]["name"] 435 }; 436 } 437 } 438 var selector1="select[name='transmission_"+cName+"']"; 439 cOutput["transmissionMode"]=\$(selector1).val(); 440 requestObject["outputs"].push(cOutput); 441 } 442 if(\$("input[name='main_value_successUri']").val()!="") 443 requestObject["subscriber"]["successUri"]=\$("input[name='main_value_successUri']").val(); 444 if(\$("input[name='main_value_inProgressUri']").val()!="") 445 requestObject["subscriber"]["inProgressUri"]=\$("input[name='main_value_inProgressUri']").val(); 446 if(\$("input[name='main_value_failedUri']").val()!="") 447 requestObject["subscriber"]["failedUri"]=\$("input[name='main_value_failedUri']").val(); 448 \$(".modal").find("textarea").first().val(js_beautify(JSON.stringify(requestObject))); 449 \$("#exampleModal").modal('toggle'); 450 \$('#result').html(""); 451 \$("#exampleModal").find(".btn-primary").off('click'); 452 \$("#exampleModal").find(".btn-primary").click(function(){ 453 \$('#result').html(""); 454 if(!socket && requestObject["mode"]!="sync") 455 socket = new WebSocket("$openapi["openapi"]["wsurl"]"); 456 else 457 \$.ajax({ 458 contentType: "application/json", 459 data: \$("textarea").val(), 460 type: "POST", 461 url: "$openapi["openapi"]["rootUrl"]$(currentUrl)/jobs", 462 success: function (msg) { 463 console.log(msg); 464 var cObj=msg; 465 \$('#result').html(js_beautify(JSON.stringify(msg["outputs"]))); 466 }, 467 error: function(){ 468 console.log(arguments); 469 }, 470 }); 471 if(requestObject["mode"]=="sync"){ 472 return; 473 } 474 socket.onopen = function () { 475 console.log('Connected!'); 476 socket.send("SUB $cid"); 477 }; 478 socket.onmessage = function(event) { 479 console.log('MESSAGE: ' + event.data); 480 if(event.data=="1") 481 \$.ajax({ 482 contentType: "application/json", 483 data: \$("textarea").val(), 484 type: "POST", 485 url: "$openapi["openapi"]["rootUrl"]$(currentUrl)/jobs", 486 success: function (msg) { 487 console.log(msg); 488 }, 489 error: function(){ 490 console.log(arguments); 491 }, 492 }); 493 else{ 494 //progressBar 495 \$("#progress_details").show(); 496 var cObj=JSON.parse(event.data); 497 if(cObj["jobID"]){ 498 \$("#prgress_description").html(cObj["jobID"]+": "+cObj["message"]); 499 \$(".progress-bar").attr("aria-valuenow",cObj["progress"]); 500 \$(".progress-bar").css("width",cObj["progress"]+"%"); 501 }else{ 502 \$("#progress_details").hide(); 503 if(cObj["outputs"]) 504 \$('#result').html(js_beautify(JSON.stringify(cObj["outputs"]))); 505 else 506 \$('#result').html(cObj["message"]); 507 } 508 } 509 }; 510 }); 511 } 512 </script> 350 <script src="$openapi["openapi"]["rootUrl"]/../static/openapi.js"></script> 513 351 #end if 514 352 … … 687 525 <hr> 688 526 <address>$openapi["openapi"]["rootUrl"]$(currentUrl).html</address> 689 <!-- hhmts start -->Last modified: Fri Oct 23 18:25:03 CEST 2020 <!-- hhmts end -->527 <!-- hhmts start -->Last modified: Wed Dec 16 16:06:56 CET 2020 <!-- hhmts end --> 690 528 </main> 691 529 #if $currentKey=="root"
Note: See TracChangeset
for help on using the changeset viewer.