SHARE
TWEET

Untitled

a guest Oct 23rd, 2019 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <section class="container mainContent">
  3.     <div class="row d-flex flex-column justify-content-center">
  4.       <h1 class="text-center">Locations</h1>
  5.       <h4 class="text-center d-flex flex-column">
  6.         Active Locations: {{filteredLocations.length}}
  7.         <small>Total Available: {{locationList.length}} +</small>
  8.       </h4>
  9.     </div>
  10.     <hr/>
  11.     <div class="row">
  12.       <div class="col-md-4" v-show="locationsAvailable">
  13.         <b-list-group class="list_locations">
  14.           <b-list-group-item v-for="(c, key) in locationsByCountry"
  15.             :key="c[0].metro_id" class="country_header">
  16.             <div class="country_name d-flex align-items-center">
  17.               <no-ssr>
  18.                 <flag :iso="c[0].country_code" :squared="false" />
  19.               </no-ssr>
  20.               <nuxt-link class="country_link"
  21.                 :to="{ name:'country-slug', params: { slug: c[0].country_meta.slug } }">
  22.                 {{key}}
  23.               </nuxt-link>
  24.               <b-badge variant="secondary" size="sm" pill>
  25.                 {{c.length}}
  26.               </b-badge>
  27.               <span
  28.                 class="collapseToggle"
  29.                 @click="showCollapse = showCollapse === key ? null : key"
  30.               >
  31.                 <img src="/img/icons/minus-violet.png" v-if="showCollapse === key">
  32.                 <img src="/img/icons/plus-violet.png" v-else>
  33.               </span>
  34.             </div>
  35.             <b-collapse :id="key" :visible="showCollapse === key">
  36.               <b-list-group class="_cities">
  37.                 <b-list-group-item v-for="city in c"
  38.                   :key="city.metro_id" class="cities_list_item">
  39.                   <nuxt-link
  40.                     :to="{
  41.                       name:'country-metro-slug',
  42.                       params: {
  43.                         metro: city.country_meta.slug,
  44.                         slug: city.slug
  45.                       }
  46.                     }">
  47.                     {{city.city}}
  48.                   </nuxt-link>
  49.                 </b-list-group-item>
  50.               </b-list-group>
  51.             </b-collapse>
  52.           </b-list-group-item>
  53.         </b-list-group>
  54.       </div>
  55.       <div class="col-md-8">
  56.         <locations-map :data="locationsByCountry"/>
  57.       </div>
  58.     </div>
  59.   </section>
  60. </template>
  61.  
  62. <style lang="scss">
  63.   html, body {
  64.      width: 100%;
  65.      height: 100%;
  66.   }
  67.   span.badge {
  68.     font-weight: 700;
  69.     border-radius: 10rem;
  70.     margin-left: auto;
  71.   }
  72.   .collapseToggle {
  73.     margin-left: 5px;
  74.     img {
  75.       width: 15px;
  76.     }
  77.     &:hover {
  78.       cursor: pointer;
  79.     }
  80.   }
  81.   ._cities {
  82.     margin-top: 8px;
  83.     font-size: .8rem;
  84.   }
  85.   .cities_header {
  86.     margin-left: 12px;
  87.     margin-bottom: -8px;
  88.     font-size: .8rem;
  89.   }
  90.   /*.country_link {*/
  91.   /*  font-weight: 600;*/
  92.   /*}*/
  93.   .list-group-item.cities_list_item {
  94.     padding: .15rem 1.25rem;
  95.   }
  96.   .list_locations {
  97.     /*display: block;*/
  98.     max-height: 500px;
  99.     overflow-y: scroll;
  100.   }
  101.   .flag-icon {
  102.     margin-right: 10px;
  103.   }
  104.   .country_header {
  105.     background: #FCFCFC;
  106.     padding: 5px;
  107.     margin-bottom: -5px;
  108.   }
  109.   li.list-group-item.country_header {
  110.     padding-left: 8px;
  111.   }
  112.   .list-group._cities {
  113.     padding-left: 10px;
  114.   }
  115.   .list-group-item {
  116.     padding-left: 25px;
  117.   }
  118. </style>
  119.  
  120. <script>
  121. /* eslint-disable */
  122. import { mapGetters } from 'vuex';
  123. import * as _ from 'lodash';
  124. import LocationsMap from '@/components/atoms/LocationsMap';
  125. export default {
  126.   components: {
  127.     LocationsMap,
  128.   },
  129.   computed: {
  130.     ...mapGetters('location', { locationList: 'list' }),
  131.     locationsAvailable() {
  132.       return this.locationList.length
  133.     },
  134.     filteredLocations() {
  135.       const uniqLocations = _.uniqBy(this.locationList, 'metro_id');
  136.       return uniqLocations.filter(metro => metro.nodes.length);
  137.     },
  138.     locationsByCountry() {
  139.       if (!this.filteredLocations.length) return [];
  140.       const countryData = _.groupBy(this.filteredLocations, 'country');
  141.       const countriesSorted = {};
  142.       // sort the countries
  143.       Object.keys(countryData)
  144.         .sort()
  145.         .forEach(key => (
  146.           countriesSorted[key] = countryData[key]
  147.         ));
  148.       // sort the cities within the countries
  149.       Object.keys(countriesSorted)
  150.         .forEach(key => countriesSorted[key]
  151.           .sort((a, b) => {
  152.             if (a.city < b.city) return -1;
  153.             if (a.city > b.city) return 1;
  154.             return 0;
  155.           }));
  156.       return countriesSorted;
  157.     },
  158.   },
  159.   data() {
  160.     return {
  161.       showCollapse: null,
  162.     };
  163.   },
  164.   head() {
  165.     return {
  166.       title: 'Locations',
  167.     };
  168.   },
  169. };
  170. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top