d7cfa7f0b2
* Ignore volumes and exe * Export form meta-data * use dynamic metaform for connectors * fix populating form
95 lines
3.3 KiB
HTML
95 lines
3.3 KiB
HTML
{{/*
|
|
Metaform Partial Template
|
|
This template renders a form based on a Form struct from the metaform package.
|
|
|
|
Usage:
|
|
{{template "partials/metaform.html" .}}
|
|
|
|
Where . contains Form and Type fields
|
|
*/}}
|
|
|
|
<div class="metaform" data-connector-type="{{.Type}}">
|
|
{{range .Form.Fields}}
|
|
<div class="mb-4">
|
|
<label for="connector_{{.Name}}">{{.Label}}{{if .Required}} <span class="required">*</span>{{end}}</label>
|
|
|
|
{{if eq .Kind "string"}}
|
|
<input type="text"
|
|
name="connector_field_{{.Name}}"
|
|
id="connector_{{.Name}}"
|
|
class="connector-field"
|
|
data-field-name="{{.Name}}"
|
|
data-field-type="string"
|
|
{{if .Placeholder}}placeholder="{{.Placeholder}}"{{end}}
|
|
{{if .Required}}required{{end}}>
|
|
|
|
{{else if eq .Kind "number"}}
|
|
<input type="number"
|
|
name="connector_field_{{.Name}}"
|
|
id="connector_{{.Name}}"
|
|
class="connector-field"
|
|
data-field-name="{{.Name}}"
|
|
data-field-type="number"
|
|
{{if .Placeholder}}placeholder="{{.Placeholder}}"{{end}}
|
|
{{if .Required}}required{{end}}>
|
|
|
|
{{else if eq .Kind "options"}}
|
|
<select name="connector_field_{{.Name}}"
|
|
id="connector_{{.Name}}"
|
|
class="connector-field"
|
|
data-field-name="{{.Name}}"
|
|
data-field-type="options"
|
|
{{if .Required}}required{{end}}>
|
|
<option value="">Select an option</option>
|
|
{{range .Options}}
|
|
<option value="{{.Value}}">{{.Label}}</option>
|
|
{{end}}
|
|
</select>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
<style>
|
|
.metaform .required {
|
|
color: #ff5555;
|
|
}
|
|
|
|
.metaform input[type="text"],
|
|
.metaform input[type="number"],
|
|
.metaform select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: #1a1a1a;
|
|
border: 1px solid #333;
|
|
color: #f0f0f0;
|
|
border-radius: 4px;
|
|
margin-top: 5px;
|
|
transition: border-color 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.metaform input[type="text"]:focus,
|
|
.metaform input[type="number"]:focus,
|
|
.metaform select:focus {
|
|
border-color: #00b3ff;
|
|
box-shadow: 0 0 5px rgba(0, 179, 255, 0.5);
|
|
outline: none;
|
|
}
|
|
|
|
.metaform select {
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
background-size: 16px;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
.metaform label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: #f0f0f0;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|