82 lines
2.9 KiB
JavaScript
82 lines
2.9 KiB
JavaScript
|
class CCPOutputWidgetEditorController extends HTMLElement {
|
||
|
|
|
||
|
|
#output = null
|
||
|
|
#index = null
|
||
|
|
#type = null
|
||
|
|
|
||
|
|
#delete_icon = `
|
||
|
|
<svg style="width:24px;height:24px;pointer-events: none;" viewBox="0 0 24 24">
|
||
|
|
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
|
||
|
|
</svg>
|
||
|
|
`
|
||
|
|
|
||
|
|
constructor(){
|
||
|
|
super()
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback(controller){
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
get index(){
|
||
|
|
return this.#index
|
||
|
|
}
|
||
|
|
|
||
|
|
render(output, i){
|
||
|
|
this.#index = i
|
||
|
|
this.#output = output
|
||
|
|
this.#type = output.schema.enum ? "enum" : "string"
|
||
|
|
this.innerHTML = `
|
||
|
|
<details>
|
||
|
|
<summary class="mb-3">
|
||
|
|
<input class="form-control" style="width:auto;display:inline" required="required" name="id" value="${this.#output.id}"/>
|
||
|
|
<button data-index="${this.#index}" name="delete-output" title="Delete" class="btn btn-danger ccp-toolbar-button">
|
||
|
|
${this.#delete_icon}
|
||
|
|
</button>
|
||
|
|
</summary>
|
||
|
|
<div style="padding-left: 1rem;border-left: 1px solid gray;">
|
||
|
|
<div class="row mb-3">
|
||
|
|
<div class="col">
|
||
|
|
<div class="form-field">
|
||
|
|
<input name="title" class="form-control" placeholder="title" value="${this.#output.title}" required="required"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<div class="form-field">
|
||
|
|
<input name="description" class="form-control" placeholder="description" value="${this.#output.description}" required="required"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-3">
|
||
|
|
<div class="col">
|
||
|
|
<div class="form-field">
|
||
|
|
<input value="${this.#output.minOccurs}" type="number" min="0" step="1" name="minOccurs" class="form-control" placeholder="minOccurs"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="form-field">
|
||
|
|
<input value="${this.#output.maxOccurs}" type="number" min="0" step="1" name="maxOccurs" class="form-control" placeholder="maxOccurs"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-3">
|
||
|
|
<div class="col-3">
|
||
|
|
<div class="form-field">
|
||
|
|
<select name="type" class="form-control" placeholder="type">
|
||
|
|
<option value="string">String</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="form-field">
|
||
|
|
<input value="${this.#output.schema.contentMediaType}" name="contentMediaType" class="form-control" placeholder="mime"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.customElements.define('d4s-ccp-output-editor', CCPOutputWidgetEditorController);
|