build form from yaml

2019-12-29 22:23:39 +01:00
parent a1b8f5a1a1
commit faa41feaf6
12 changed files with 575 additions and 56 deletions
@@ -0,0 +1,67 @@
+{% macro text(field) %}
+<label for="field-{{field.key}}">
+	{{field.label}}
+</label>
+<input id="field-{{field.key}}"
+	   name="{{field.key}}"
+	   type="text"
+	   value="{{field.value}}">
+{% endmacro %}
+
+{% macro longtext(field) %}
+<label for="field-{{field.key}}">
+	{{field.label}}
+</label>
+<textarea id="field-{{field.key}}" name="{{field.key}}">{{field.value}}</textarea>
+{% endmacro %}
+
+{% macro free_select(field) %}
+<label for="field-{{field.key}}">
+	{{field.label}}
+</label>
+<input id="field-{{field.key}}"
+	   name="{{field.key}}"
+	   type="text"
+	   list="suggestions-{{field.key}}"
+	   value="{{field.value}}">
+
+<datalist id="suggestions-{{field.key}}">
+{% for option in field.options %}
+	<option value="{{option}}">
+{% endfor %}
+</datalist>
+{% endmacro %}
+
+{% macro number(field) %}
+<label for="field-{{field.key}}">
+	{{field.label}}
+</label>
+<input id="field-{{field.key}}"
+	   name="{{field.key}}"
+	   type="number"
+	   value="{{field.value}}"
+	   step="{{field.step}}"
+	   min="{{field.min}}"
+	   max="{{field.max}}">
+{% endmacro %}
+
+{% macro checkbox(field) %}
+<label for="field-{{field.key}}">
+	{{field.label}}
+</label>
+<input id="field-{{field.key}}"
+	   name="{{field.key}}"
+	   type="checkbox"
+	   {% if field.checked %}checked{% endif %}>
+{% endmacro %}
+
+{% macro select(field) %}
+<label for="field-{{field.key}}">
+	{{field.label}}
+</label>
+<select id="field-{{field.key}}" name="{{field.key}}">
+{% for option in field.options %}
+	<option value="{{option}}">{{option}}</option>
+{% endfor %}
+</select>
+{% endmacro %}
@@ -1,16 +1,47 @@
-<!DOCTYPE html>
+{% extends "layout" %}
+{% import "form_macros" as form %}
+
+{% block title -%}
+	Form
+{%- endblock title %}
+
+{% block content %}

 <form action="/add" method="POST">
-	Name: <input type="text" name="name"><br>
-	Qty: <input type="number" step="1" min="0" name="quantity"><br>
-	Location: <input type="text" name="location"><br>
+	{% for field in fields %}
+	<div class="Row">
+		{% if field.kind == "string" %}
+
+			{{ form::text(field=field) }}
+
+		{% elif field.kind == "text" %}
+
+			{{ form::longtext(field=field) }}
+
+		{% elif field.kind == "number" %}
+
+			{{ form::number(field=field) }}
+
+		{% elif field.kind == "bool" %}
+
+			{{ form::checkbox(field=field) }}
+
+		{% elif field.kind == "select" %}
+
+			{{ form::select(field=field) }}
+
+		{% elif field.kind == "free_select" %}
+
+			{{ form::free_select(field=field) }}
+
+		{% else %}
+
+			{{ field.key }}
+
+		{% endif %}
+	</div>
+	{% endfor %}
+
 	<button type="submit">Add</button>
 </form>
-
-<ul>
-{% for record in records %}
-	<li>
-		{{ record.name }} x {{ record.quantity }} in {{ record.location }}
-	</li>
-{% endfor %}
-</ul>
+{% endblock content %}
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>{% block title %}{% endblock title %}</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+{% block content %}{% endblock content %}
+</body>
+</html>
@@ -0,0 +1,27 @@
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+form .Row {
+	display: flex;
+	padding: .25rem;
+}
+
+form .Row label {
+	flex-shrink: 0;
+	width: 10rem;
+	text-align: right;
+	display: inline-block;
+	padding-right: .5rem;
+}
+
+form .Row input,
+form .Row select {
+	height: 2.1rem;
+}
+
+form .Row textarea {
+	flex-shrink: 1;
+	width: 30rem;
+	height: 6rem;
+}