This commit is contained in:
root 2022-03-29 16:11:12 +02:00
parent 72fbe86aca
commit 92de114d5f
3 changed files with 26 additions and 12 deletions

View File

@ -17,7 +17,19 @@
vertical-align: super;
}
ccp-input-widget *:invalid::after{
.ccp-input-widget *:required:before {
color: red;
content: "*";
font-weight: bold;
}
.ccp-input-widget *:invalid:after{
color: red;
content: "!";
}
font-weight: bold;
}
div.ccp-execution-form form:invalid button{
opacity: 0.3;
pointer-events: none;
}

View File

@ -5,7 +5,7 @@
</style>
<template id="EXECUTION_FORM_TEMPLATE">
<div name="execution_form">
<div class="ccp-execution-form" name="execution_form">
<h3></h3>
<p class="description"></p>
<div name="plexiglass" class="ccp-invisible">
@ -16,6 +16,7 @@
<div class="ccp-inputs">
<div class="form-group"></div>
</div>
<button class="btn btn-info">Execute</button>
</form>
</div>
</template>
@ -25,4 +26,4 @@
</div>
</template>
<div name="execution_form"></div>
</div>
</div>

View File

@ -91,14 +91,14 @@ class SimpleInputRenderer extends Renderer{
render(){
let required = this.required ? 'required="required"' : ""
let readonly = this.readOnly ? 'readOnly="readOnly"' : ""
let readonly = this.readOnly ? 'readonly="readOnly"' : ""
this.#html = `
<div class="ccp-input-widget form-field">
<label>
${this.title}
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
</label>
<input class="ccp-input form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
<input class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
</div>
`
return this.#html
@ -115,7 +115,7 @@ class DateTimeInputRenderer extends Renderer{
render(){
let required = this.required ? 'required="required"' : ""
let readonly = this.schema.readOnly ? 'readOnly="readOnly"' : ""
let readonly = this.schema.readOnly ? 'readonly="readOnly"' : ""
let t = this.schema.format.toLowerCase() === "datetime" ? "datetime-local" : this.schema.format.toLowerCase()
this.#html = `
<div class="ccp-input-widget form-field">
@ -123,7 +123,7 @@ class DateTimeInputRenderer extends Renderer{
${this.title}
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
</label>
<input type="${t}" class="ccp-input form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
<input type="${t}" class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
</div>
`
return this.#html
@ -145,14 +145,14 @@ class EnumInputRenderer extends Renderer{
`<option name="${e}" value="${e}">${e}</option>`
})
let required = this.required ? 'required="required"' : ""
let readonly = this.schema.readOnly ? 'readOnly="readOnly"' : ""
let readonly = this.schema.readOnly ? 'readonly="readOnly"' : ""
this.#html = `
<div class="ccp-input-widget form-field">
<label>
${this.title}
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
</label>
<select class="ccp-input form-control" name="${this.name}" value="${this.schema.default}" ${required}>
<select class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required}>
${options.join("")}
</select>
</div>
@ -187,15 +187,16 @@ class CodeInputRenderer extends Renderer{
render(){
let required = this.required ? 'required="required"' : ""
let readonly = this.schema.readOnly ? 'readonly="readOnly"' : ""
this.#html = `
<div class="ccp-input-widget form-field">
<label>
${this.title}
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
</label>
<textarea class="form-control">${this.schema.default}</textarea>
<textarea class="ccp-input-widget form-control" ${required} ${readonly}>${this.schema.default}</textarea>
</div>
`
return this.#html
}
}
}