1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2024-12-05 16:24:21 +01:00
fab-manager/app/frontend/templates/events/_form.html
Sylvain 436db80ccf Increased the width of the input field for the prices of the events
This is especially useful for currencies like FCFA that have large numbers and large currency symbol
2021-05-12 15:16:10 +02:00

281 lines
14 KiB
HTML

<div class="row no-gutter">
<div class=" col-sm-12 col-md-12 col-lg-8 nopadding">
<section class="panel panel-default bg-light m-lg">
<div class="panel-body m-r">
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
<input name="_method" type="hidden" ng-value="method">
<div class="form-group" ng-class="{'has-error': eventForm['event[title]'].$dirty && eventForm['event[title]'].$invalid}">
<label for="event_title" class="col-sm-3 control-label">{{ 'app.shared.event.title' | translate }} *</label>
<div class="col-sm-9">
<input ng-model="event.title" type="text" name="event[title]" class="form-control" id="event_title" placeholder="" required>
<span class="help-block" ng-show="eventForm['event[title]'].$dirty && eventForm['event[title]'].$error.required" translate>{{ 'app.shared.event.title_is_required' }}</span>
</div>
</div>
<div class="form-group">
<label for="event_image" class="col-sm-3 control-label" translate>{{ 'app.shared.event.matching_visual' }}</label>
<div class="col-sm-9">
<div class="fileinput" data-provides="fileinput" ng-class="fileinputClass(event.event_image)">
<div class="fileinput-new thumbnail" style="width: 334px; height: 250px;">
<img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder ng-if="!event.event_image">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" data-trigger="fileinput" style="max-width: 334px;">
<img ng-src="{{ event.event_image }}" alt="" />
</div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">{{ 'app.shared.event.choose_a_picture' | translate }} <i class="fa fa-upload fa-fw"></i></span><span class="fileinput-exists" translate>{{ 'app.shared.buttons.change' }}</span>
<input type="file" name="event[event_image_attributes][attachment]" accept="image/jpeg,image/gif,image/png"></span>
<a class="btn btn-danger fileinput-exists" data-dismiss="fileinput"><i class="fa fa-trash-o"></i></a>
</div>
</div>
</div>
</div>
<div class="form-group" ng-class="{'has-error': eventForm['event[description]'].$dirty && eventForm['event[description]'].$invalid}">
<label for="description" class="col-sm-3 control-label">{{ 'app.shared.event.description' | translate }} *</label>
<div class="col-sm-9">
<input type="hidden"
name="event[description]"
ng-value="event.description" />
<summernote ng-model="event.description"
id="event_description"
placeholder=""
config="summernoteOpts"
name="event[description]"
required>
</summernote>
<span class="help-block" ng-show="eventForm['event[description]'].$dirty && eventForm['event[description]'].$error.required" translate>{{ 'app.shared.event.description_is_required' }}</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" translate>{{ 'app.shared.event.attachments' }}</label>
<div class="col-sm-9">
<div ng-repeat="file in event.event_files_attributes" ng-show="!file._destroy">
<input type="hidden" name="event[event_files_attributes][][id]" ng-value="file.id" />
<input type="hidden" name="event[event_files_attributes][][_destroy]" ng-value="file._destroy" />
<div class="fileinput input-group" data-provides="fileinput" ng-class="fileinputClass(file.attachment)">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">{{file.attachment}}</span>
</div>
<span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new" translate>{{ 'app.shared.buttons.browse' }}</span>
<span class="fileinput-exists" translate>{{ 'app.shared.buttons.change' }}</span><input type="file" name="event[event_files_attributes][][attachment]" accept="application/pdf"></span>
<a class="input-group-addon btn btn-danger fileinput-exists" data-dismiss="fileinput" ng-click="deleteFile(file)"><i class="fa fa-trash-o"></i></a>
</div>
</div>
<a class="btn btn-default" ng-click="addFile()" role="button">{{ 'app.shared.event.add_a_new_file' | translate }} <i class="fa fa-file-o fa-fw"></i></a>
</div>
</div>
</div> <!-- ./panel-body -->
<input ng-model="editMode" type="hidden" name="edit_mode">
<div class="panel-footer no-padder">
<input type="submit"
ng-value="submitName"
class="r-b btn-valid btn btn-warning btn-block p-lg btn-lg text-u-c"
ng-disabled="eventForm.$invalid || event.category_id === null"
ng-click="editRecurrent($event)"/>
</div>
</section>
</div>
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="widget panel b-a m m-t-lg">
<div class="panel-heading b-b small">
<h3 translate>{{ 'app.shared.event.event_type' }} *</h3>
</div>
<div class="widget-content no-bg wrapper">
<ui-select ng-model="event.category_id" name="event[category_id][]">
<ui-select-match>
<span ng-bind="$select.selected.name"></span>
<input type="hidden" name="event[category_id]" value="{{$select.selected.id}}" />
</ui-select-match>
<ui-select-choices repeat="c.id as c in (categories | filter: $select.search)">
<span ng-bind-html="c.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
</div>
<event-themes event="event" on-change="handleEventChange"></event-themes>
<input type="hidden" name="event[event_theme_ids][]" ng-repeat="id in event_themes" value="{{id}}" />
<input type="hidden" name="event[event_theme_ids][]" value="" ng-if="event_themes.length === 0" />
<div class="widget panel b-a m m-t-lg" ng-show="ageRanges.length > 0">
<div class="panel-heading b-b small">
<h3 translate>{{ 'app.shared.event.age_range' }}</h3>
</div>
<div class="widget-content no-bg wrapper">
<ui-select ng-model="event.age_range_id" name="event[age_range_id][]">
<ui-select-match>
<span ng-bind="$select.selected.name"></span>
<input type="hidden" name="event[age_range_id]" value="{{$select.selected.id}}" />
</ui-select-match>
<ui-select-choices repeat="a.id as a in (ageRanges | filter: $select.search)">
<span ng-bind-html="a.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="widget panel b-a m m-t-lg">
<div class="panel-heading b-b small">
<h3 translate>{{ 'app.shared.event.dates_and_opening_hours' }}</h3>
</div>
<div class="widget-content no-bg wrapper">
<div class="m-b">
<label class="v-bottom" translate>{{ 'app.shared.event.all_day' }}</label>
<div class="inline v-top">
<label class="checkbox-inline">
<input type="radio" name="event[all_day]" ng-model="event.all_day" value="true" required/> {{ 'app.shared.buttons.yes' | translate }}
</label>
<label class="checkbox-inline">
<input type="radio" name="event[all_day]" ng-model="event.all_day" value="false"/> {{ 'app.shared.buttons.no' | translate }}
</label>
</div>
</div>
<input type="hidden" name="event[availability_id]" ng-value="event.availability_id" ng-if="event.availability_id">
<div class="m-b">
<label translate>{{ 'app.shared.event.start_date' }}</label>
<div class="input-group">
<input type="hidden" name="event[start_date]" ng-value="event.start_date">
<input type="text"
class="form-control"
ng-model="event.start_date"
uib-datepicker-popup="{{datePicker.format}}"
datepicker-options="datePicker.options"
is-open="datePicker.startOpened"
ng-click="toggleStartDatePicker($event)"
required/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggleStartDatePicker($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
<div class="m-b">
<label translate>{{ 'app.shared.event.end_date' }}</label>
<div class="input-group">
<input type="hidden" name="event[end_date]" ng-value="event.end_date">
<input type="text"
class="form-control"
ng-model="event.end_date"
uib-datepicker-popup="{{datePicker.format}}"
datepicker-options="datePicker.options"
is-open="datePicker.endOpened"
ng-click="toggleEndDatePicker($event)"
required/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggleEndDatePicker($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
<div class="m-b row" ng-if="event.all_day =='false'">
<div class="col-xs-6">
<label translate>{{ 'app.shared.event.start_time' }}</label>
<div>
<input type="hidden" name="event[start_time]" ng-value="event.start_time">
<uib-timepicker ng-model="event.start_time" mousewheel="false" hour-step="1" minute-step="1" show-meridian="ismeridian"></uib-timepicker>
</div>
</div>
<div class="col-xs-6">
<label translate>{{ 'app.shared.event.end_time' }}</label>
<div>
<input type="hidden" name="event[end_time]" ng-value="event.end_time">
<uib-timepicker ng-model="event.end_time" mousewheel="false" hour-step="1" minute-step="1" show-meridian="ismeridian"></uib-timepicker>
</div>
</div>
</div>
<div ng-if="method == 'post'" class="m-b">
<label translate>{{ 'app.shared.event.recurrence' }}</label>
<select ng-model="event.recurrence" class="form-control" name="event[recurrence]">
<option value="{{t.value}}" ng-repeat="t in recurrenceTypes">{{t.label}}</option>
</select>
<div ng-if="event.recurrence != 'none'">
{{ 'app.shared.event._and_ends_on' | translate }}
<div class="input-group">
<input type="hidden" name="event[recurrence_end_at]" ng-value="event.recurrence_end_at">
<input type="text"
class="form-control"
uib-datepicker-popup="{{datePicker.format}}"
datepicker-options="datePicker.options"
ng-model="event.recurrence_end_at"
is-open="datePicker.recurrenceEndOpened"
ng-required="true"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggleRecurrenceEnd($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="widget panel b-a m m-t-lg">
<div class="panel-heading b-b small">
<h3 translate>{{ 'app.shared.event.prices_and_availabilities' }}</h3>
</div>
<div class="widget-content no-bg wrapper">
<div class="form-group">
<label for="event_amount" class="col-sm-5 control-label" translate>{{ 'app.shared.event.standard_rate' }}</label>
<div class="col-sm-6 p-h-0">
<div class="input-group">
<input ng-model="event.amount" type="number" name="event[amount]" class="form-control" id="event_amount" required>
<div class="input-group-addon">{{currencySymbol}}</div>
</div>
<span class="help-block" translate>{{ 'app.shared.event.0_equal_free' }}</span>
</div>
</div>
<div class="form-group" ng-repeat="price in event.prices" ng-show="!price._destroy">
<div class="col-sm-5">
<input type="hidden" name="event[event_price_categories_attributes][][id]" ng-value="price.id">
<select class="form-control"
ng-model="price.category"
name="event[event_price_categories_attributes][][price_category_id]"
ng-options="cat as cat.name for cat in priceCategories track by cat.id">
</select>
</div>
<div class="col-sm-6 p-h-0">
<div class="input-group">
<input ng-model="price.amount"
type="number"
name="event[event_price_categories_attributes][][amount]"
class="form-control">
<div class="input-group-addon">{{currencySymbol}}</div>
</div>
</div>
<div class="col-sm-1">
<input type="hidden" name="event[event_price_categories_attributes][][_destroy]" ng-value="price._destroy">
<a class="btn p-h-0" ng-click="removePrice(price, $event)" href="#"><i class="fa fa-times text-danger"></i></a>
</div>
</div>
<div class="link-icon m-b" ng-hide="event.prices.length == priceCategories.length">
<div class="col-sm-offset-5">
<i class="fa fa-plus"></i> <span ng-click="addPrice()" translate>{{ 'app.shared.event.add_price' }}</span>
</div>
</div>
<div class="form-group">
<label for="event_nb_total_places" class="col-sm-5 control-label" translate>{{ 'app.shared.event.tickets_available' }}</label>
<div class="col-sm-6 p-h-0">
<div class="input-group">
<input ng-model="event.nb_total_places" type="number" name="event[nb_total_places]" class="form-control" id="event_nb_total_places">
<div class="input-group-addon"><i class="fa fa-ticket"></i> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>