gCubeSystem
/
cdn-experiments
16
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

fixes

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ccp/css/common.css
View File

@ -17,7 +17,19 @@
vertical-align: super; 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; color: red;
content: "!"; content: "!";
} font-weight: bold;
}
div.ccp-execution-form form:invalid button{
opacity: 0.3;
pointer-events: none;
}

5
ccp/executionformfragment.html
View File

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

17
ccp/js/inputwidgetcontroller.js
View File

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