first commit
This commit is contained in:
@@ -0,0 +1,285 @@
|
||||
package components
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"tankstopp/internal/currency"
|
||||
"tankstopp/internal/models"
|
||||
)
|
||||
|
||||
templ FormGroup(label, hint string) {
|
||||
<div class="mb-3">
|
||||
if label != "" {
|
||||
<label class="form-label">
|
||||
{ label }
|
||||
</label>
|
||||
}
|
||||
{ children... }
|
||||
if hint != "" {
|
||||
<div class="form-hint">{ hint }</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
templ Input(name, inputType, placeholder, value string, required bool) {
|
||||
<input
|
||||
type={ inputType }
|
||||
class="form-control"
|
||||
name={ name }
|
||||
id={ name }
|
||||
placeholder={ placeholder }
|
||||
value={ value }
|
||||
if required {
|
||||
required
|
||||
}
|
||||
/>
|
||||
}
|
||||
|
||||
templ NumberInput(name, placeholder string, value float64, step string, min float64, required bool) {
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
name={ name }
|
||||
id={ name }
|
||||
placeholder={ placeholder }
|
||||
value={ fmt.Sprintf("%.2f", value) }
|
||||
step={ step }
|
||||
min={ fmt.Sprintf("%.2f", min) }
|
||||
if required {
|
||||
required
|
||||
}
|
||||
/>
|
||||
}
|
||||
|
||||
templ DateInput(name, value string, required bool) {
|
||||
<input
|
||||
type="date"
|
||||
class="form-control"
|
||||
name={ name }
|
||||
id={ name }
|
||||
value={ value }
|
||||
if required {
|
||||
required
|
||||
}
|
||||
/>
|
||||
}
|
||||
|
||||
templ TextArea(name, placeholder, value string, rows int) {
|
||||
<textarea
|
||||
class="form-control"
|
||||
name={ name }
|
||||
id={ name }
|
||||
rows={ fmt.Sprintf("%d", rows) }
|
||||
placeholder={ placeholder }
|
||||
>{ value }</textarea>
|
||||
}
|
||||
|
||||
templ Select(name string, required bool) {
|
||||
<select
|
||||
class="form-select"
|
||||
name={ name }
|
||||
id={ name }
|
||||
if required {
|
||||
required
|
||||
}
|
||||
>
|
||||
{ children... }
|
||||
</select>
|
||||
}
|
||||
|
||||
templ Option(value, text string, selected bool) {
|
||||
<option
|
||||
value={ value }
|
||||
if selected {
|
||||
selected
|
||||
}
|
||||
>{ text }</option>
|
||||
}
|
||||
|
||||
templ CurrencySelect(name, selectedCurrency string, currencies []currency.Currency) {
|
||||
@Select(name, false) {
|
||||
@Option("", "Select currency...", selectedCurrency == "")
|
||||
for _, curr := range currencies {
|
||||
@Option(curr.Code, fmt.Sprintf("%s %s - %s", curr.Symbol, curr.Code, curr.Name), curr.Code == selectedCurrency)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
templ VehicleSelect(name string, selectedVehicleID uint, vehicles []models.Vehicle, required bool) {
|
||||
@Select(name, required) {
|
||||
@Option("", "Select vehicle...", selectedVehicleID == 0)
|
||||
for _, vehicle := range vehicles {
|
||||
if vehicle.LicensePlate != "" {
|
||||
@Option(fmt.Sprintf("%d", vehicle.ID), fmt.Sprintf("%s (%s)", vehicle.Name, vehicle.LicensePlate), vehicle.ID == selectedVehicleID)
|
||||
} else {
|
||||
@Option(fmt.Sprintf("%d", vehicle.ID), vehicle.Name, vehicle.ID == selectedVehicleID)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
templ FuelTypeSelect(name, selectedFuelType string, required bool) {
|
||||
@Select(name, required) {
|
||||
@Option("", "Select fuel type...", selectedFuelType == "")
|
||||
@Option("Super E5", "Super E5", selectedFuelType == "Super E5")
|
||||
@Option("Super E10", "Super E10", selectedFuelType == "Super E10")
|
||||
@Option("Super Plus", "Super Plus", selectedFuelType == "Super Plus")
|
||||
@Option("Diesel", "Diesel", selectedFuelType == "Diesel")
|
||||
@Option("Premium Diesel", "Premium Diesel", selectedFuelType == "Premium Diesel")
|
||||
@Option("LPG", "LPG", selectedFuelType == "LPG")
|
||||
@Option("CNG", "CNG", selectedFuelType == "CNG")
|
||||
@Option("Electric", "Electric", selectedFuelType == "Electric")
|
||||
@Option("Hybrid", "Hybrid (Mixed)", selectedFuelType == "Hybrid")
|
||||
}
|
||||
}
|
||||
|
||||
templ InputGroup(prefix, suffix string) {
|
||||
<div class="input-group">
|
||||
if prefix != "" {
|
||||
<span class="input-group-text" id={ prefix + "-addon" }>{ prefix }</span>
|
||||
}
|
||||
{ children... }
|
||||
if suffix != "" {
|
||||
<span class="input-group-text" id={ suffix + "-addon" }>{ suffix }</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
templ PasswordInput(name, placeholder string, required bool) {
|
||||
<div class="input-group input-group-flat">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
name={ name }
|
||||
placeholder={ placeholder }
|
||||
autocomplete="off"
|
||||
if required {
|
||||
required
|
||||
}
|
||||
/>
|
||||
<span class="input-group-text">
|
||||
<a href="#" class="link-secondary" onclick="togglePassword(this)" title="Show password" data-target={ name }>
|
||||
@Icon("eye", 24)
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ Switch(name, label string, checked bool) {
|
||||
<label class="form-check form-switch">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name={ name }
|
||||
if checked {
|
||||
checked
|
||||
}
|
||||
/>
|
||||
<span class="form-check-label">{ label }</span>
|
||||
</label>
|
||||
}
|
||||
|
||||
templ FormButtons(cancelHref, submitText, submitIcon string) {
|
||||
<div class="card-footer bg-transparent mt-auto">
|
||||
<div class="btn-list justify-content-end">
|
||||
<a href={ templ.SafeURL(cancelHref) } class="btn">
|
||||
@Icon("arrow-left", 24)
|
||||
Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary ms-auto">
|
||||
if submitIcon != "" {
|
||||
@Icon(submitIcon, 24)
|
||||
}
|
||||
{ submitText }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ Form(method, action string) {
|
||||
<form method={ method } action={ action }>
|
||||
{ children... }
|
||||
</form>
|
||||
}
|
||||
|
||||
templ FormRow() {
|
||||
<div class="row">
|
||||
{ children... }
|
||||
</div>
|
||||
}
|
||||
|
||||
templ FormCol(size string) {
|
||||
<div class={ "col-md-" + size }>
|
||||
{ children... }
|
||||
</div>
|
||||
}
|
||||
|
||||
templ DeleteButton(action, itemName string) {
|
||||
<form method="POST" action={ action } style="display: inline;" onsubmit="return confirmDelete(this)" data-item={ itemName }>
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger">
|
||||
@Icon("trash", 24)
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
}
|
||||
|
||||
templ EditButton(href string) {
|
||||
<a href={ templ.SafeURL(href) } class="btn btn-sm btn-outline-primary">
|
||||
@Icon("edit", 24)
|
||||
Edit
|
||||
</a>
|
||||
}
|
||||
|
||||
templ ButtonGroup() {
|
||||
<div class="btn-list">
|
||||
{ children... }
|
||||
</div>
|
||||
}
|
||||
|
||||
templ PrimaryButton(text string, icon string) {
|
||||
<button type="submit" class="btn btn-primary">
|
||||
if icon != "" {
|
||||
@Icon(icon, 24)
|
||||
}
|
||||
{ text }
|
||||
</button>
|
||||
}
|
||||
|
||||
templ SecondaryButton(href, text string, icon string) {
|
||||
<a href={ templ.SafeURL(href) } class="btn">
|
||||
if icon != "" {
|
||||
@Icon(icon, 24)
|
||||
}
|
||||
{ text }
|
||||
</a>
|
||||
}
|
||||
|
||||
templ InputWithIcon(name, inputType, placeholder, value string, icon string, required bool) {
|
||||
@FormGroup("", "") {
|
||||
if icon != "" {
|
||||
@Icon(icon, 24)
|
||||
}
|
||||
@Input(name, inputType, placeholder, value, required)
|
||||
}
|
||||
}
|
||||
|
||||
templ CurrencyInputGroup(name string, value float64, currencySymbol string, step string) {
|
||||
@InputGroup(currencySymbol, "") {
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
name={ name }
|
||||
id={ name }
|
||||
step={ step }
|
||||
min="0"
|
||||
value={ fmt.Sprintf("%.2f", value) }
|
||||
placeholder="0.00"
|
||||
required
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
templ RefreshButton() {
|
||||
<button class="btn btn-outline-secondary" type="button">
|
||||
@Icon("refresh", 24)
|
||||
</button>
|
||||
}
|
||||
Reference in New Issue
Block a user