first code for email notification

This commit is contained in:
dcore94 2023-03-20 11:07:42 +01:00
parent 09d9eaa142
commit 6d9989f352
1 changed files with 40 additions and 7 deletions

View File

@ -45,16 +45,22 @@ class CCPExecutionForm extends HTMLElement{
<link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link> <link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style> <style>
.ccp-execution-form{
position: relative;
}
.plexiglass{
position: absolute;
width:100%;
height:100%;
z-index:1000;
background-color: rgba(0,0,0,.1)
}
</style> </style>
<template id="EXECUTION_FORM_TEMPLATE"> <template id="EXECUTION_FORM_TEMPLATE">
<div class="ccp-execution-form" name="execution_form"> <div class="ccp-execution-form" name="execution_form">
<h5 class="ccp-method-title"></h5> <h5 class="ccp-method-title"></h5>
<p class="description font-italic font-weight-lighter"></p> <p class="description font-italic font-weight-lighter"></p>
<div name="plexiglass" class="ccp-invisible"> <div class="plexiglass d-none"></div>
<span name="status"></span>
<span class="fas fa-spinner fa-spin"></span>
</div>
<form name="execution_form" class="d-flex flex-column gap-3" style="gap:5px"> <form name="execution_form" class="d-flex flex-column gap-3" style="gap:5px">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
@ -76,6 +82,21 @@ class CCPExecutionForm extends HTMLElement{
</div> </div>
</div> </div>
</div> </div>
<div class="card">
<div class="card-header">
<h5>Notifications</h5>
</div>
<div class="card-body">
<div class="form-row">
<div class="col form-group">
<div class="col form-check">
<input class="form-check-input" type="checkbox" name="emailnotification" alt="Request email notification" title="Request email notification"/>
<label class="form-check-label">Email notification</label>
</div>
</div>
</div>
</div>
</div>
<button id="execute_method_button" class="btn btn-info">Execute</button> <button id="execute_method_button" class="btn btn-info">Execute</button>
</form> </form>
</div> </div>
@ -90,7 +111,16 @@ class CCPExecutionForm extends HTMLElement{
` `
} }
lockRender(){
this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
}
unlockRender(){
this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
}
loadMethod(){ loadMethod(){
this.lockRender()
return this.#boot.secureFetch(this.#serviceurl + "/processes/" + this.#method).then( return this.#boot.secureFetch(this.#serviceurl + "/processes/" + this.#method).then(
(resp)=>{ (resp)=>{
if(resp.status === 200){ if(resp.status === 200){
@ -105,9 +135,10 @@ class CCPExecutionForm extends HTMLElement{
}).then(resp=>{ }).then(resp=>{
this.#data.executable = resp.status === 200 this.#data.executable = resp.status === 200
this.unlockRender()
}).then(()=>{ }).then(()=>{
this.showMethod() this.showMethod()
}).catch(err=>alert(err)) }).catch(err=>{alert(err); this.unlockRender()})
} }
showEmpty(resp){ showEmpty(resp){
@ -122,6 +153,7 @@ class CCPExecutionForm extends HTMLElement{
} }
sendExecutionRequest(){ sendExecutionRequest(){
this.lockRender()
const url = this.#serviceurl + "/processes/" + this.#method + "/execution" const url = this.#serviceurl + "/processes/" + this.#method + "/execution"
const req = this.buildRequest() const req = this.buildRequest()
this.#boot.secureFetch( this.#boot.secureFetch(
@ -141,7 +173,8 @@ class CCPExecutionForm extends HTMLElement{
if(this.#executionmonitor){ if(this.#executionmonitor){
this.#executionmonitor.addExecution( { self : data.links[0].href, events : [data], jobID : data.jobID, method : this.#data.title}) this.#executionmonitor.addExecution( { self : data.links[0].href, events : [data], jobID : data.jobID, method : this.#data.title})
} }
}).catch(err => alert("Unable to call execute: " + err)) this.unlockRender()
}).catch(err => {alert("Unable to call execute: " + err); this.unlockRender()})
} }
buildRequest(){ buildRequest(){