1
0
mirror of https://github.com/raseels-repos/golang-saas-starter-kit.git synced 2025-06-08 23:56:37 +02:00

348 lines
20 KiB
Plaintext
Raw Permalink Normal View History

{{define "title"}}Update Account{{end}}
{{define "style"}}
{{end}}
{{define "content"}}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/account">Account</a></li>
<li class="breadcrumb-item active" aria-current="page">Update</li>
</ol>
</nav>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Update Account Settings</h1>
</div>
<form class="user" method="post" novalidate>
<div class="row">
<div class="col">
<div class="card shadow mb-4">
<div class="card-body">
<div class="form-group row">
<div class="col-sm-6">
<label for="AccountName">Account Name</label>
<input type="text" id="AccountName"
class="form-control {{ ValidationFieldClass $.validationErrors "Name" }}"
name="Name" value="{{ $.form.Name }}" placeholder="Company Name" required>
{{template "invalid-feedback" dict "fieldName" "Name" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 mb-sm-0">
<label for="AccountAddress1">Address</label>
<input type="text" id="AccountAddress1"
class="form-control {{ ValidationFieldClass $.validationErrors "Address1" }}"
name="Address1" value="{{ $.form.Address1 }}" placeholder="Address Line 1" required>
{{template "invalid-feedback" dict "fieldName" "Address1" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
<div class="col-sm-6">
<label for="AccountAddress2">&nbsp;</label>
<input type="text" id="AccountAddress2"
class="form-control {{ ValidationFieldClass $.validationErrors "Address2" }}"
name="Address2" value="{{ $.form.Address2 }}" placeholder="Address Line 2">
{{template "invalid-feedback" dict "fieldName" "Address2" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="selectAccountCountry">Country</label>
<div class="">
<select class="form-control {{ ValidationFieldClass $.validationErrors "Country" }}"
id="selectAccountCountry" name="Country" required>
{{ range $i := $.countries }}
{{ $hasGeonames := false }}
{{ range $c := $.geonameCountries }}
{{ if eq $c $i.Code }}{{ $hasGeonames = true }}{{ end }}
{{ end }}
<option value="{{ $i.Code }}" data-geonames="{{ if $hasGeonames }}1{{ else }}0{{ end }}" {{ if CmpString $.form.Country $i.Code }}selected="selected"{{ end }}>{{ $i.Name }}</option>
{{ end }}
</select>
{{template "invalid-feedback" dict "fieldName" "Country" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<div id="divAccountZipcode"></div>
{{template "invalid-feedback" dict "fieldName" "Zipcode" "validationDefaults" $.validationDefaults "validationErrors" $.validationError }}
</div>
<div class="col-sm-4">
<div id="divAccountRegion"></div>
{{template "invalid-feedback" dict "fieldName" "Region" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
<div class="col-sm-4">
<label for="inputAccountCity">City</label>
<input type="text" id="inputAccountCity"
class="form-control {{ ValidationFieldClass $.validationErrors "Account.City" }}"
name="City" value="{{ $.form.City }}" placeholder="City" required>
{{template "invalid-feedback" dict "fieldName" "City" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="selectTimezone">Timezone</label>
<select class="form-control {{ ValidationFieldClass $.validationErrors "Timezone" }}"
id="selectTimezone" name="Timezone">
<option value="">Not set</option>
{{ range $idx, $t := .timezones }}
<option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
{{ end }}
</select>
{{template "invalid-feedback" dict "fieldName" "Timezone" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
</div>
</div>
</div>
<div class="card shadow mb-4">
<a href="#collapseCardDateTime" class="d-block card-header py-3 collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseCardDateTime">
<h6 class="m-0 font-weight-bold text-primary">Date & Time Formatting</h6>
</a>
<div class="collapse" id="collapseCardDateTime" style="">
<div class="card-body">
<div class="form-group">
<label for="inputDatetimeFormat">Datetime Format</label>
<select class="form-control" style="display: none;" id="selectDatetimeFormat">
<option>2006-01-02 at 3:04PM MST</option>
<option>Mon Jan _2 15:04:05 2006</option>
<option>Mon Jan _2 15:04:05 MST 2006</option>
<option>Mon Jan 02 15:04:05 -0700 2006</option>
<option>02 Jan 06 15:04 MST</option>
<option>02 Jan 06 15:04 -0700</option>
<option>Monday, 02-Jan-06 15:04:05 MST</option>
<option>Mon, 02 Jan 2006 15:04:05 MST</option>
<option>Mon, 02 Jan 2006 15:04:05 -0700</option>
<option>Jan _2 15:04:05</option>
<option value="custom">Custom</option>
</select>
<input type="text" class="form-control" id="inputDatetimeFormat"
placeholder="enter datetime format" name="PreferenceDatetimeFormat"
value="{{ .form.PreferenceDatetimeFormat }}">
<label class="form-check-label" for="inputDatetimeFormat">
<small>Current Datetime {{ .exampleDisplayTime.Local }}</small></label>
</div>
<div class="form-group">
<label for="inputDateFormat">Date Format</label>
<select class="form-control" style="display: none;" id="selectDateFormat">
<option>2006-01-02</option>
<option>Mon Jan _2 2006</option>
<option>Mon Jan 02 2006</option>
<option>02 Jan 06</option>
<option>02 Jan 06</option>
<option>Monday, 02-Jan-06</option>
<option>Mon, 02 Jan 2006</option>
<option>Mon, 02 Jan 2006</option>
<option>Jan _2</option>
<option value="custom">Custom</option>
</select>
<input type="text" class="form-control" id="inputDateFormat"
placeholder="enter date format" name="PreferenceDateFormat"
value="{{ .form.PreferenceDateFormat }}">
<label class="form-check-label" for="inputDateFormat">
<small>Current Date {{ .exampleDisplayTime.LocalDate }}</small></label>
</div>
<div class="form-group">
<label for="inputTimeFormat">Time Format</label>
<select class="form-control" style="display: none;" id="selectTimeFormat">
<option>3:04PM</option>
<option>3:04PM MST</option>
<option>3:04PM -0700</option>
<option>15:04:05</option>
<option>15:04:05 MST</option>
<option>15:04:05 -0700</option>
<option value="custom">Custom</option>
</select>
<input type="text" class="form-control" id="inputTimeFormat"
placeholder="enter time format" name="PreferenceTimeFormat"
value="{{ .form.PreferenceTimeFormat }}">
<label class="form-check-label" for="inputDatetimeFormat">
<small>Current Time {{ .exampleDisplayTime.LocalTime }}</small></label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
<a href="/account" class="ml-2 btn btn-secondary" >Cancel</a>
</div>
</div>
</form>
{{end}}
{{define "js"}}
<script src="https://cdn.jsdelivr.net/gh/xcash/bootstrap-autocomplete@v2.2.2/dist/latest/bootstrap-autocomplete.min.js"></script>
<script>
$(document).ready(function() {
var selectInit = false;
$('#selectAccountCountry').on('change', function () {
// When a country has data-geonames, then we can perform autocomplete on zipcode and
// populate a list of valid regions.
if ($(this).find('option:selected').attr('data-geonames') == 1) {
// Replace the existing region with an empty dropdown.
$('#divAccountRegion').html('<label for="inputAccountRegion">Region</label><div class=""><select class="form-control {{ ValidationFieldClass $.validationErrors "Region" }}" id="inputAccountRegion" name="Region" placeholder="Region" required></select></div>');
// Query the API for a list of regions for the selected
// country and populate the region dropdown.
$.ajax({
type: 'GET',
contentType: 'application/json',
url: '/geo/regions/autocomplete',
data: {country_code: $(this).val(), select: true},
dataType: 'json'
}).done(function (res) {
if (res !== undefined && res !== null) {
for (var c in res) {
var optSelected = '';
if (res[c].value == '{{ $.form.Region }}') {
optSelected = ' selected="selected"';
}
$('#inputAccountRegion').append('<option value="'+res[c].value+'"'+optSelected+'>'+res[c].text+'</option>');
}
}
});
// Replace the existing zipcode text input with a new one that will supports autocomplete.
$('#divAccountZipcode').html('<label for="inputAccountZipcode">Zipcode</label><input class="form-control {{ ValidationFieldClass $.validationErrors "Account.Zipcode" }}" id="inputAccountZipcode" name="Zipcode" value="{{ $.form.Zipcode }}" placeholder="Zipcode" required>');
$('#inputAccountZipcode').autoComplete({
minLength: 2,
events: {
search: function (qry, callback) {
$.ajax({
type: 'GET',
contentType: 'application/json',
url: '/geo/postal_codes/autocomplete',
data: {query: qry, country_code: $('#selectAccountCountry').val()},
dataType: 'json'
}).done(function (res) {
callback(res)
});
}
}
});
// When the value of zipcode changes, try to find an exact match for the zipcode and
// can therefore set the correct region and city.
$('#inputAccountZipcode').on('change', function() {
$.ajax({
type: 'GET',
contentType: 'application/json',
url: '/geo/geonames/postal_code/'+$(this).val(),
data: {country_code: $('#selectAccountCountry').val()},
dataType: 'json'
}).done(function (res) {
if (res !== undefined && res !== null && res.PostalCode !== undefined) {
$('#inputAccountCity').val(res.PlaceName);
$('#inputAccountRegion').val(res.StateCode);
}
});
});
} else {
// Replace the existing zipcode input with no autocomplete.
$('#divAccountZipcode').html('<label for="inputAccountZipcode">Zipcode</label><input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Zipcode" }}" id="inputAccountZipcode" name="Zipcode" value="{{ $.form.Zipcode }}" placeholder="Zipcode" required>');
// Replace the existing region select with a text input.
$('#divAccountRegion').html('<label for="inputAccountRegion">Region</label><input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Region" }}" id="inputAccountRegion" name="Region" value="{{ $.form.Region }}" placeholder="Region" required>');
}
// Init the form defaults based on the current settings.
if (!selectInit) {
hideDuplicateValidationFieldErrors();
selectInit = true
}
}).change();
var selectedDatetimeFormat = false;
$('#selectDatetimeFormat > option').each(function() {
var curValue = $('#inputDatetimeFormat').val();
if (this.text == curValue || this.value == curValue) {
$(this).attr('selected','selected');
selectedDatetimeFormat = true;
$('#selectDatetimeFormat').show();
$('#inputDatetimeFormat').hide();
}
});
if (!selectedDatetimeFormat) {
$('#selectDatetimeFormat').val('custom');
$('#selectDatetimeFormat').show();
$('#inputDatetimeFormat').show();
}
$('#selectDatetimeFormat').on('change', function() {
if ($(this).val() == 'custom') {
$('#inputDatetimeFormat').show();
} else {
$('#inputDatetimeFormat').hide();
$('#inputDatetimeFormat').val($(this).val());
}
})
var selectedDateFormat = false;
$('#selectDateFormat > option').each(function() {
var curValue = $('#inputDateFormat').val();
if (this.text == curValue || this.value == curValue) {
$(this).attr('selected','selected');
selectedDateFormat = true;
$('#selectDateFormat').show();
$('#inputDateFormat').hide();
}
});
if (!selectedDateFormat) {
$('#selectDateFormat').val('custom');
$('#selectDateFormat').show();
$('#inputDateFormat').show();
}
$('#selectDateFormat').on('change', function() {
if ($(this).val() == 'custom') {
$('#inputDateFormat').show();
} else {
$('#inputDateFormat').hide();
$('#inputDateFormat').val($(this).val());
}
})
var selectedTimeFormat = false;
$('#selectTimeFormat > option').each(function() {
var curValue = $('#inputTimeFormat').val();
if (this.text == curValue || this.value == curValue) {
$(this).attr('selected','selected');
selectedTimeFormat = true;
$('#selectTimeFormat').show();
$('#inputTimeFormat').hide();
}
});
if (!selectedTimeFormat) {
$('#selectTimeFormat').val('custom');
$('#selectTimeFormat').show();
$('#inputTimeFormat').show();
}
$('#selectTimeFormat').on('change', function() {
if ($(this).val() == 'custom') {
$('#inputTimeFormat').show();
} else {
$('#inputTimeFormat').hide();
$('#inputTimeFormat').val($(this).val());
}
})
});
</script>
{{end}}