templates/default/events.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  3. {% do pimcore_head_script().appendFile('https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js') %}
  4. {% do pimcore_head_script().appendFile('https://cdn.jsdelivr.net/npm/vuejs-datepicker@1.6.2/dist/vuejs-datepicker.js') %}
  5. {% do pimcore_head_script().appendFile('https://cdn.jsdelivr.net/npm/apollo-client-browser@1.9.0/dist/apollo-client.min.js') %}
  6. {% do pimcore_head_script().appendFile('https://cdn.jsdelivr.net/npm/vue-apollo@2.1.0-rc.7/dist/vue-apollo.min.js') %}
  7. {% do pimcore_head_script().appendFile('https://unpkg.com/leaflet@1.5.1/dist/leaflet.js') %}
  8. {% do pimcore_head_script().appendFile('https://unpkg.com/vue2-leaflet') %}
  9. {% do pimcore_head_link().appendStylesheet(asset('https://unpkg.com/leaflet/dist/leaflet.css')) %}
  10. {% do pimcore_head_script().appendFile(asset('static/js/vue-app.js')) %}
  12. {% block content %}
  13.     {{ pimcore_areablock('content', {
  14.         'allowed': ['blockquote', 'embed', 'featurette', 'gallery-carousel', 'gallery-folder',
  15.             'gallery-single-images', 'headlines', 'horizontal-line', 'icon-teaser-row', 'image',
  16.             'image-hotspot-marker', 'pdf', 'product-grid', 'product-teaser', 'standard-teaser', 'text-accordion',
  17.             'time-slider-featurette', 'video', 'wysiwyg', 'wysiwyg-with-images']
  18.     }) }}
  19.     <div  id="vueapp" class="row">
  20.         <div class="col-md-12">
  21.             <section v-if="activePanel === 1"  v-cloak >
  22.                 <div class="header row mb-4">
  23.                     <div class="col-md-3 mb-2">
  24.                         <vuejs-datepicker id="fromDate" input-class="form-control" typeable v-model="filters.fromDate" @input="filterListing"  placeholder="From Date"></vuejs-datepicker>
  25.                     </div>
  26.                     <div class="col-md-3 mb-2">
  27.                         <vuejs-datepicker id="fromDate" input-class="form-control" typeable  v-model="filters.toDate" @input="filterListing" placeholder="To Date"></vuejs-datepicker>
  28.                     </div>
  30.                     <div class="col-md-3 mb-2 float-right">
  31.                         <select id="fromDate" class="form-control"  v-model="filters.tag">
  32.                             <option value="All" >Filter By Tag</option>
  33.                             <option value="Trade Show" >Trade Show</option>
  34.                             <option value="Retro" > Retro</option>
  35.                             <option value="International" > International</option>
  36.                             <option  value="1950" > 1950</option>
  37.                             <option value="1960" > 1960</option>
  38.                             <option value="1970" > 1970</option>
  39.                             <option value="Salzburg" >Salzburg</option>
  40.                             <option value="Vienna" >Vienna</option>
  41.                             <option value="Wels" >Wels</option>
  42.                         </select>
  43.                     </div>
  45.                     <div class="col-md-3 mb-2">
  46.                         <button @click="clearFilters" class="btn btn-outline-primary btn-sm d-block form-control">CLEAR FILTERS</button>
  47.                     </div>
  48.                 </div>
  49.                 <div class="row mb-3 text-center">
  50.                     <div class="col-sm-12" v-if="loading">
  51.                         <div class="d-flex justify-content-center">
  52.                             <div class="spinner-border" role="status">
  53.                                 <span class="sr-only">Loading...</span>
  54.                             </div>
  55.                         </div>
  56.                     </div>
  57.                     <div v-if="errored" class="col-md-12 text-center">
  58.                         <h5>Sorry, something went wrong. Please try back later!</h5>
  59.                     </div>
  60.                     <div v-else v-for="(event, index) in filterResult" class="col-sm-4">
  61.                         <div class="teaser card custom-standard-card mb-4 shadow-sm">
  62.                             <img v-if="event.details.mainImage" contain width="350" height="235" class="img-fluid w-100" alt="" title="" :src="event.details.mainImage.fullpath">
  63.                             <div class="card-body text-center">
  64.                                 <h4 class="card-title pricing-card-title text-uppercase" v-text="event.details.title"></h4>
  65.                                 <p><b>Location:</b> [[ event.details.locationAddress ]]</p>
  66.                                 <p class="mb-0"><span>[[ event.details.fromDate ]]</span><span v-if="compareDates(event.details.fromDate, event.details.toDate)"> - [[ event.details.toDate ]]</span>
  67.                                     <span class="d-block mb-4"><b>Timings:</b> [[ event.details.fromTime ]] - [[ event.details.toTime ]]</span>
  69.                                     <a href="javascript:void(0);" class="btn btn-secondary btn-sm" id="show-modal" @click="openDetailPanel(event.details.id)">More Details</a>
  70.                             </div>
  71.                             <div class="card-footer">
  72.                                 <!--Event Tags Footer-->
  73.                                 <span v-for="tag in event.details.tags" class="badge badge-secondary mr-1">[[ tag ]]</span>
  74.                             </div>
  75.                         </div>
  76.                     </div>
  77.                 </div>
  78.             </section>
  79.             <section v-if="activePanel === 2" v-cloak >
  80.                 <div class="row header">
  81.                     <a href="javascript:void(0);" @click="changePanel(1)" class="btn btn-secondary form-control back-button" >Back to Events</a>
  82.                     <div class="col-md-12 text-center">
  83.                         <h3 class="">[[ eventDetails.title ]]</h3>
  84.                     </div>
  86.                 </div>
  87.                 <div class="row mb-3 bg-white p-2">
  88.                     <div id="header" class="col-md-12 text-center">
  90.                     </div>
  91.                     <div id="gallery" class="col-md-8 mx-auto">
  92.                         <div class="iframe-container mx-auto" v-if="eventDetails.video" id="video-gallery">
  93.                             <iframe id="ytplayer" type="text/html"
  94.                                     :src="'https://www.youtube.com/embed/' + eventDetails.video.data.id"
  95.                                     frameborder="0" class="iframe-responsive"></iframe>
  96.                         </div>
  97.                         <div v-else id="image">
  98.                             <img class="d-block mx-auto" v-if="eventDetails.mainImage" :src="eventDetails.mainImage.fullpath">
  99.                         </div>
  100.                         <div id="image-gallery" v-for="image in eventDetails.images" class="col-sm-6 col-md-4">
  101.                             <img contain width="350" height="235" class="img-fluid w-100 img-thumbnail" alt="" title="" :src="image.image.fullpath">
  102.                         </div>
  103.                     </div>
  104.                     <div id="info" class="col-md-12 p-5">
  105.                         <p v-html="eventDetails.description"></p>
  106.                         <div class="row">
  107.                             <div class="col-sm-6">
  108.                                 <p><span class="font-weight-bold">Location: </span> [[ eventDetails.locationAddress ]]</p>
  110.                                 <p>
  111.                                     <span class="font-weight-bold">Date: </span>
  112.                                     [[ eventDetails.fromDate ]] <span v-if="compareDates(eventDetails.fromDate, eventDetails.toDate)">- [[ eventDetails.toDate ]]</span>
  113.                                 </p>
  114.                                 <p>
  115.                                     <span class="font-weight-bold">Timings: </span>
  116.                                     [[ eventDetails.fromTime ]] - [[ eventDetails.toTime ]]
  117.                                 </p>
  118.                                 <p v-if="eventDetails.cars" >
  119.                                     <span class="font-weight-bold">Showcasing Cars: </span>
  120.                                 <ul>
  121.                                     <li v-for="car in eventDetails.cars">
  122.                                         <span v-if="car.manufacturer">[[ car.manufacturer.name ]]</span> [[ car.carName ]], [[ car.productionYear ]]
  123.                                     </li>
  124.                                 </ul>
  125.                                 </p>
  126.                             </div>
  127.                             <div class="col-sm-6">
  128.                                 <div v-if="eventDetails.locationMap" class="col-md-12 mb-4" style="height: 250px">
  129.                                     <v-map :zoom=15 :center="mapCoordinates">
  130.                                         <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
  131.                                         <v-marker :lat-lng="mapCoordinates"></v-marker>
  132.                                     </v-map>
  133.                                 </div>
  134.                             </div>
  135.                         </div>
  137.                         <div v-if="eventDetails.contactName" class="card">
  138.                             <div class="card-header">Organizer:</div>
  139.                             <div class="card-body">
  140.                                 <p v-if="eventDetails.contactName" ><span class="font-weight-bold">Name: </span> [[ eventDetails.contactName ]]</p>
  141.                                 <p v-if="eventDetails.contactPhone" ><span class="font-weight-bold">Phone: </span> [[ eventDetails.contactPhone ]]</p>
  142.                                 <p v-if="eventDetails.contactEmail" ><span class="font-weight-bold">Email: </span> [[ eventDetails.contactEmail ]]</p>
  143.                                 <p v-if="eventDetails.contactAddress" ><span class="font-weight-bold">Address: </span> [[ eventDetails.contactAddress ]]</p>
  144.                             </div>
  145.                         </div>
  146.                     </div>
  147.                 </div>
  148.             </section>
  149.         </div>
  150.     </div>
  151. {% endblock %}