<section class="heading b-b"> <div class="row no-gutter"> <div class="col-xs-2 col-sm-2 col-md-1"> <section class="heading-btn"> <a href="#" ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a> </section> </div> <div class="col-md-8 b-l b-r-md"> <section class="heading-title"> <h1 translate>{{ 'app.admin.calendar.calendar_management' }}</h1> </section> </div> <div class="col-md-3"> <section class="heading-actions wrapper"> <a role="button" ui-sref="app.admin.calendar.icalendar" class="btn btn-lg btn-default rounded m-t-sm text-sm import-ics-button"> <i class="fa fa-exchange m-r" aria-hidden="true"></i><span translate>{{ 'app.admin.calendar.external_sync' }}</span> </a> </section> </div> </div> </section> <section class="row no-gutter admin-calendar" ui-tour="calendar" ui-tour-backdrop="true" ui-tour-template-url="'/shared/tour-step-template.html'" ui-tour-use-hotkeys="true" ui-tour-scroll-parent-id="content-main" post-render="setupCalendarTour"> <div class="col-sm-12 col-md-12 col-lg-9"> <div ui-calendar="calendarConfig" ng-model="eventSources" calendar="calendar" class="wrapper-lg"></div> <div class="calendar-legend-block"> <h4 translate>{{ 'app.admin.calendar.legend' }}</h4> <div class="legends"> <span class="calendar-legend text-sm border-formation" translate>{{ 'app.admin.calendar.trainings' }}</span><br> <span class="calendar-legend text-sm border-machine" translate>{{ 'app.admin.calendar.machines' }}</span><br> <span class="calendar-legend text-sm border-space" ng-show="$root.modules.spaces" translate>{{ 'app.admin.calendar.spaces' }}</span> <span class="calendar-legend text-sm border-event" ng-show="eventsInCalendar" translate>{{ 'app.admin.calendar.events' }}</span> </div> </div> </div> <div class="col-sm-12 col-md-12 col-lg-3"> <div class="m text-center" ng-show="isAuthorized('admin')"> <a class="btn btn-default export-xls-button" ng-href="api/availabilities/export_index.xlsx" target="export-frame" ng-click="alertExport('index')" uib-popover="{{ 'app.admin.calendar.availabilities_notice' | translate}}" popover-trigger="mouseenter" popover-placement="bottom"> <i class="fa fa-file-excel-o"></i> {{ 'app.admin.calendar.availabilities' | translate }} </a> <iframe name="export-frame" height="0" width="0" class="none"></iframe> </div> <div class="widget panel b-a m m-t-lg" ng-if="availability" ng-hide="availability.available_type == 'event'"> <div class="panel-heading b-b small"> <h3><i class="fa fa-info-circle m-r" aria-hidden="true"></i><span translate>{{ 'app.admin.calendar.info' }}</span></h3> </div> <div class="widget-content no-bg auto wrapper"> <div translate translate-values="{DURATION: availability.slot_duration}">{{ 'app.admin.calendar.slot_duration' }}</div> <div class="m-t-sm" ng-show="availability.tags.length > 0"> <span translate>{{ 'app.admin.calendar.tags' }}</span> <ul> <li ng-repeat="tag in availability.tags">{{tag.name}}</li> </ul> </div> </div> </div> <div class="widget panel b-a m m-t-lg" ng-if="availability" ng-hide="availability.available_type == 'event'"> <div class="panel-heading b-b small"> <h3 translate>{{ 'app.admin.calendar.ongoing_reservations' }}</h3> </div> <div class="widget-content no-bg auto wrapper" ng-class="{'reservations-locked': availability.lock}"> <ul class="list-unstyled" ng-if="reservations.length > 0"> <li ng-repeat="r in reservations" class="m-b-xs" ng-class="{'reservation-canceled':r.canceled_at}"> {{r.user.name}} - <span class="label reservation-time">{{ r.start_at | amDateFormat:'LLL' }} - {{ r.end_at | amDateFormat:'LT' }}</span> - <span class="label label-success text-white">{{r.reservable.name}}</span> <span class="btn btn-warning btn-xs" ng-click="cancelBooking(r)" ng-if="!r.canceled_at"><i class="fa fa-times red"></i></span> </li> </ul> <div ng-show="reservations.length == 0" translate>{{ 'app.admin.calendar.without_reservation' }}</div> <div class="m-t" ng-show="availability.lock"><i class="fa fa-ban"></i> <span class="m-l-xs" translate>{{ 'app.admin.calendar.reservations_locked' }}</span></div> </div> </div> <div class="widget panel b-a m m-t-lg" ng-if="availability.machine_ids.length > 0"> <div class="panel-heading b-b small"> <h3 translate>{{ 'app.admin.calendar.machines' }}</h3> </div> <div class="widget-content no-bg auto wrapper"> <ul class="list-unstyled"> <li ng-repeat="m in machines" class="m-b-xs" ng-show="availability.machine_ids.indexOf(m.id) > -1"> {{m.name}} <span class="btn btn-warning btn-xs" ng-click="removeMachine(m)" ng-if="availability.machine_ids.length > 1"><i class="fa fa-times red"></i></span> </li> </ul> </div> </div> <div class="widget panel b-a m m-t-lg" ng-if="availability.plan_ids.length > 0"> <div class="panel-heading b-b small"> <h3 translate>{{ 'app.admin.calendar.plans' }}</h3> </div> <div class="widget-content no-bg auto wrapper"> <ul class="list-unstyled"> <li ng-repeat="g in availability.plans" class="m-b-xs"> <div class="font-sbold">{{::g.name}}</div> <ul class="m-n" ng-repeat="plan in g.plans"> <li> {{::plan.name}} <span class="btn btn-warning btn-xs" ng-click="removePlan(plan)" ><i class="fa fa-times red"></i></span> </li> </ul> </li> </ul> </div> </div> <div class="widget panel b-a m m-t-lg" ng-if="availability" > <div class="panel-heading b-b small"> <h3 translate>{{ 'app.admin.calendar.actions' }}</h3> </div> <div class="widget-content no-bg auto wrapper" ng-hide="availability.available_type == 'event'"> <button class="btn btn-default" ng-click="toggleLockReservations()"> <span ng-hide="availability.lock"> <i class="fa fa-stop"></i> <span class="m-l-xs" translate>{{ 'app.admin.calendar.block_reservations' }}</span> </span> <span ng-show="availability.lock"> <i class="fa fa-play"></i> <span class="m-l-xs" translate>{{ 'app.admin.calendar.allow_reservations' }}</span> </span> </button> <button class="btn btn-default m-t" ng-click="removeSlot()"> <span> <i class="fa fa-trash"></i> <span class="m-l-xs" translate>{{ 'app.admin.calendar.delete_slot' }}</span> </span> </button> </div> <div class="widget-content no-bg auto wrapper" ng-show="availability.available_type == 'event'"> <a class="btn btn-default pointer" ui-sref="app.admin.events_edit({id: availability.event_id})"> <span> <i class="fa fa-edit"></i> <span class="m-l-xs" translate>{{ 'app.admin.calendar.edit_event' }}</span> </span> </a> <a class="btn btn-default m-t pointer" ui-sref="app.admin.event_reservations({id: availability.event_id})"> <span> <i class="fa fa-bookmark"></i> <span class="m-l-xs" translate>{{ 'app.admin.calendar.view_reservations' }}</span> </span> </a> </div> </div> </div> </section>