gCubeSystem
/
web-components
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Merge pull request 'master' (#9) from master into prod 

Reviewed-on: #9
This commit is contained in:
Marco Lettere 2024-02-02 19:10:46 +01:00
parent cafb395cfc d4cae32fe2
commit c4c6c2bb15
2 changed files with 61 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ccp/js/executionformcontroller.js
View File

@ -15,8 +15,19 @@ class CCPExecutionForm extends HTMLElement{
this.#rootdoc = this.attachShadow({ "mode" : "open"})
this.connectNewExecutionRequest()
this.render()
this.showMethod()
const params = new URLSearchParams(window.location.search)
if(params.get('execution')){
const execution = { id : params.get('execution') }
this.prepareFromExecution(execution)
} else if(params.get('method')){
this.#method = params.get('method')
this.loadMethod()
} else {
this.showMethod()
}
}
static get observedAttributes() {
@ -81,20 +92,26 @@ class CCPExecutionForm extends HTMLElement{
<button id="execute_method_button" class="btn btn-info">Execute</button>
</div>
<div class="col-6">
<div class="">
<div class="mb-3">
<label>Generate code for:</label>
<div class="d-flex">
<select name="language-selector" class="form-control" style="padding:2px">
<option value="text/python" data-ext="py" title="Generate plain Python3">Python 3</option>
<option value="text/plain+r" data-ext="r" title="Generate plain R">R</option>
<option value="application/vnd.jupyter+python" data-ext="ipynb" title="Generate Jupyter notebook with Python 3 cells">Jupyter Python3</option>
<option value="text/julia" data-ext="jl" title="Generate Julia 1.9.0 code (HTTP 1.10.0, JSON3 1.13.2)">Julia 1.9.0</option>
</select>
<button name="codegen" title="Generate code" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
<svg viewBox="0 96 960 960">
<path d="M320 814 80 574l242-242 43 43-199 199 197 197-43 43Zm318 2-43-43 199-199-197-197 43-43 240 240-242 242Z"></path>
</svg>
</button>
<select name="language-selector" class="form-control" style="padding:2px">
<option value="text/python" data-ext="py" title="Generate plain Python3">Python 3</option>
<option value="text/plain+r" data-ext="r" title="Generate plain R">R</option>
<option value="application/vnd.jupyter+python" data-ext="ipynb" title="Generate Jupyter notebook with Python 3 cells">Jupyter Python3</option>
<option value="text/julia" data-ext="jl" title="Generate Julia 1.9.0 code (HTTP 1.10.0, JSON3 1.13.2)">Julia 1.9.0</option>
</select>
<button name="codegen" title="Generate code" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
<svg viewBox="0 96 960 960">
<path d="M320 814 80 574l242-242 43 43-199 199 197 197-43 43Zm318 2-43-43 199-199-197-197 43-43 240 240-242 242Z"></path>
</svg>
</button>
</div>
</div>
<div>
<label>Direct link</label>
<div class="d-flex">
<a name="direct_link_method" href="${window.location.href}">${window.location.href}</a>
</div>
</div>
</div>
@ -387,6 +404,10 @@ class CCPExecutionForm extends HTMLElement{
return false
}
},
{
target: "a[name=direct_link_method]",
apply : (e,d)=>e.href = e.textContent = window.location.origin + window.location.pathname + "?method=" + d.id
}
]
}

42
ccp/js/executionhistorycontroller.js
View File

@ -119,19 +119,26 @@ class CCPExecutionHistory extends HTMLElement {
<ul>
<li></li>
</ul>
<div class="d-flex justify-content-end" style="gap: 3px;">
<label>Generate code for:</label>
<select name="language-selector" class="form-control" style="max-width:10rem;height:inherit;padding:2px">
<option value="text/python" data-ext="py" title="Generate plain Python3">Python 3</option>
<option value="text/plain+r" data-ext="r" title="Generate plain R">R</option>
<option value="application/vnd.jupyter+python" data-ext="ipynb" title="Generate Jupyter notebook with Python 3 cells">Jupyter Python3</option>
<option value="text/julia" data-ext="jl" title="Generate Julia 1.9.0 code (HTTP 1.10.0, JSON3 1.13.2)">Julia 1.9.0</option>
</select>
<button data-index="0" name="codegen" title="Generate code" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
<svg viewBox="0 96 960 960">
<path d="m384 721 43-43-101-102 101-101-43-43-144 144.5L384 721Zm192 0 145-145-144-144-43 43 101 101-102 102 43 43ZM180 936q-24.75 0-42.375-17.625T120 876V276q0-24.75 17.625-42.375T180 216h205q5-35 32-57.5t63-22.5q36 0 63 22.5t32 57.5h205q24.75 0 42.375 17.625T840 276v600q0 24.75-17.625 42.375T780 936H180Zm0-60h600V276H180v600Zm300-617q14 0 24.5-10.5T515 224q0-14-10.5-24.5T480 189q-14 0-24.5 10.5T445 224q0 14 10.5 24.5T480 259ZM180 876V276v600Z"/>
</svg>
</button>
<div class="d-flex flex-column align-items-end" style="gap: 3px;">
<div class="d-flex align-items-center" style="gap:5px">
<label style="text-wrap:nowrap">Generate code for:</label>
<select name="language-selector" class="form-control">
<option value="text/python" data-ext="py" title="Generate plain Python3">Python 3</option>
<option value="text/plain+r" data-ext="r" title="Generate plain R">R</option>
<option value="application/vnd.jupyter+python" data-ext="ipynb" title="Generate Jupyter notebook with Python 3 cells">Jupyter Python3</option>
<option value="text/julia" data-ext="jl" title="Generate Julia 1.9.0 code (HTTP 1.10.0, JSON3 1.13.2)">Julia 1.9.0</option>
</select>
<button data-index="0" name="codegen" title="Generate code" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
<svg viewBox="0 96 960 960">
<path d="m384 721 43-43-101-102 101-101-43-43-144 144.5L384 721Zm192 0 145-145-144-144-43 43 101 101-102 102 43 43ZM180 936q-24.75 0-42.375-17.625T120 876V276q0-24.75 17.625-42.375T180 216h205q5-35 32-57.5t63-22.5q36 0 63 22.5t32 57.5h205q24.75 0 42.375 17.625T840 276v600q0 24.75-17.625 42.375T780 936H180Zm0-60h600V276H180v600Zm300-617q14 0 24.5-10.5T515 224q0-14-10.5-24.5T480 189q-14 0-24.5 10.5T445 224q0 14 10.5 24.5T480 259ZM180 876V276v600Z"/>
</svg>
</button>
</div>
<div class="d-flex align-items-middle" style="gap:5px">
<div class="d-flex">
<a name="direct_link_execution" href="${window.location.href}">${window.location.href}</a>
</div>
</div>
</div>
</details>
</li>
@ -158,8 +165,9 @@ class CCPExecutionHistory extends HTMLElement {
<div class="d-flex" style="gap:2px">
<input type="text" class="form-control" placeholder="Paste link here"/>
<button name="archive" class="btn btn-primary ccp-toolbar-button m-0" title="Upload from link">
<svg viewBox="0 96 960 960"><path d="M450 776H280q-83 0-141.5-58.5T80 576q0-83 58.5-141.5T280 376h170v60H280q-58.333 0-99.167 40.765-40.833 40.764-40.833 99Q140 634 180.833 675q40.834 41 99.167 41h170v60ZM324 606v-60h310v60H324Zm556-30h-60q0-58-40.833-99-40.834-41-99.167-41H510v-60h170q83 0 141.5 58.5T880 576ZM699 896V776H579v-60h120V596h60v120h120v60H759v120h-60Z"/></svg>
<svg viewBox="0 96 960 960">
<path d="M450 776H280q-83 0-141.5-58.5T80 576q0-83 58.5-141.5T280 376h170v60H280q-58.333 0-99.167 40.765-40.833 40.764-40.833 99Q140 634 180.833 675q40.834 41 99.167 41h170v60ZM324 606v-60h310v60H324Zm556-30h-60q0-58-40.833-99-40.834-41-99.167-41H510v-60h170q83 0 141.5 58.5T880 576ZM699 896V776H579v-60h120V596h60v120h120v60H759v120h-60Z"/>
</svg>
</button>
</div>
</div>
@ -657,6 +665,10 @@ class CCPExecutionHistory extends HTMLElement {
this.generateCode(id, lang, `${id}.${ext}`)
}
},
{
target : "a[name=direct_link_execution]",
apply : (e,d)=>e.href = e.textContent = window.location.origin + window.location.pathname + "?execution=" + d.id
},
{
target : "div[name=logterminalcontainer]",
apply : (e,d)=>{