API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 21st, 2019
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.13 KB | None | 0 0
raw download clone embed print report
  1. <template lang="pug">
  2.     section.participants.contest__table-content
  3.         div.participants__inner
  4.             //-div.participants__filters.filters
  5.                 div.btn-group.js-radio-button-group
  6.                   button.btn.btn--filter(:class="{'is-checked': i === chosenDistance }", v-for="(group, i) in groups", :key="i", @click="chooseDistance(i)") {{ group.distance.distanceType.nameRus }}
  7.             //-div.participants__search
  8.                 .search
  9.                   form.search__form
  10.                       fieldset.search__wrap
  11.                           legend.search__legend.screen-reader Поиск спортсменов
  12.                           label.search__label
  13.                               span.search__wrap-field
  14.                                   input.search__field(type='text', v-model="search" placeholder='Введите имя, номер спортсмена или название мероприятия...')
  15.                       .search__action
  16.                           button.btn.btn--main.btn--size-lg.search__btn(type='button')
  17.                               span Поиск
  18.             //-div.participants__selects
  19.                 div.filters__group
  20.                     fieldset.filters__group
  21.                         div.filters__table-wrap
  22.                             div.filters__fields
  23.                                 div.filters__field
  24.                                     select.filters__select#gender(name='gender', v-model="chosenGender")
  25.                                       option(:value="0") Пол
  26.                                       option(:value='1') Мужской
  27.                                       option(:value='2') Женский
  28.                                 div.filters__field
  29.                                     select.filters__select#age(name='age', v-model="chosenAgeCategory")
  30.                                       option(:value='0') Возраст
  31.                                       option(v-for="(item, index) in ageCategories", :key="index", :value="item.id") {{ item.from + ' - ' + item.to }}
  32.                                 div.filters__field
  33.                                     select.filters__select#city(name='city', v-model="chosenCity")
  34.                                       option(:value="0") Город
  35.                                       option(v-for="(city, i) in cities", :value='city.id', :key="i") {{ city.nameRus }}
  36.                                 div.filters__field
  37.                                     select.filters__select#club(name='club', v-model="chosenSportClub")
  38.                                       option(:value='0') Клуб
  39.                                       option(v-for="(sportClub, i) in sportClubs", :value="sportClub.id", :key="i") {{ sportClub.nameRus }}
  40.  
  41.                             div.filters__amount-row
  42.                               div.filters__amount-name Количество строк
  43.                               div.filters__field
  44.                                 select.filters__select(name='amount-row', v-model="rows")
  45.                                   option(:value='1') 1
  46.                                   option(:value='2') 2
  47.                                   option(:value='3') 3
  48.                                   option(:value='4') 4
  49.                                   option(:value='5') 5
  50.             table.table-responsive
  51.               thead
  52.                   tr
  53.                       th Фамилия Имя
  54.                       th Номер
  55.                       th Дистанция
  56.                       th Категория
  57.                       th Абсолютное время
  58.                       th Чистое время
  59.                       th Место абс.
  60.                       th Место М/Ж
  61.                       th Место кат.
  62.                       th Город
  63.                       th Клуб
  64.                       th Сертификат
  65.                       th
  66.                       th
  67.               tbody
  68.                   tr(v-for="prop in props")
  69.                       td(data-label='Фамилия Имя') {{ prop.FirstName }} {{ prop.LastName }}
  70.                       td(data-label='Номер') {{ prop.StartNumber }}
  71.                       td(data-label ='Дистанция') {{ prop.Distance }}
  72.                       td(data-label='Категория') {{ prop.Category != null ? prop.Category : ''}}
  73.                       td(data-label='Абсолютное время') {{ msToTime(prop.AbsoluteTimeResult) }}
  74.                       td(data-label='Чистое время') {{msToTime(prop.IndividualTimeResult)}}
  75.                       td(data-label='Место абс.') {{ prop.Position }}
  76.                       td(data-label='Место М/Ж') {{ prop.GenderNominationPosition }}
  77.                       td(data-label="Место кат.") {{ prop.GenderAgeNominationPosition }}
  78.                       //-td(data-label='Город') {{ part.participant.city !== null ? part.participant.city.nameRus : '' }}
  79.                       //-td(data-label='Клуб') {{ part.participant.sportClub != null ? part.participant.sportClub.nameRus : '' }}
  80.                       //-td(data-label='Медиа')
  81.                       //-  a.table__link.isDisabled 0 Фото
  82.                       //-td(data-label='')
  83.                       //-  a.table__link(:href="part.video", target="_blank", :class="{ 'isDisabled' : part.video === null }")
  84.                       //-    i.material-icons.table__icon video_library
  85.                       //-td(data-label='')
  86.                       //-  a.table__link(:href="part.protocol", target="_blank", :class="{ 'isDisabled' : part.protocol === null }")
  87.                       //-    icon-diploma
  88.  
  89.  
  90.             div.participants__pagination(v-show="pages !== 0")
  91.                 div.pagination
  92.                     a.pagination__nav.pagination__prev
  93.                         arrow-left(@click="prevPage")
  94.                     .pagination__items
  95.                       a.link.pagination__item.cursor(v-for="(page,i) in pages", :key="page", @click="setPage(i)") {{ i + 1 }}
  96.                     a.pagination__nav.pagination__next
  97.                         arrow-right(@click="nextPage")
  98.             //-results-table
  99.             //-triathlon-results
  100.            
  101.             div.participants__pagination
  102.                 div.pagination
  103.                     a.pagination__nav.pagination__prev(href="#")
  104.                         arrow-left
  105.                     div.pagination__items
  106.                         a.link.pagination__item(href="#") 1
  107.                         a.link.pagination__item(href="#") 2
  108.                         a.link.pagination__item(href="#") 3
  109.                     a.pagination__nav.pagination__next(href="#")
  110.                         arrow-right
  111.            
  112.              
  113.  
  114. </template>
  115.  
  116. <script>
  117. import axios from "axios";
  118. import ArrowLeft from "../blocks/arrow-left";
  119. import ArrowRight from "../blocks/arrow-right";
  120. import IconDiploma from "../blocks/icon-diploma";
  121. import ResultsTable from "./tables/results-table";
  122. import TriathlonResults from "./tables/triathlon-results";
  123. import ageCategories from "@/data/age-categories";
  124. import { baseURLForFiles } from '@/config/baseURL';
  125. import { idFilter, filterByAgeCategory, stringFilter } from "@/filters";
  126. export default {
  127.   name: "event-results",
  128.   components: { TriathlonResults, ArrowRight, ArrowLeft, IconDiploma,ResultsTable },
  129.   data() {
  130.     return {
  131.       listings: [],
  132.       chosenDistance: null,
  133.       rows: 5,
  134.       currentPage: 0,
  135.       chosenSportClub: 0,
  136.       chosenCity: 0,
  137.       chosenGender: 0,
  138.       chosenAgeCategory: 0,
  139.       ageCategories,
  140.       search: "",
  141.       weather: null,
  142.       count: 0,
  143.       props: [],
  144.       event: '',
  145.       testRow: [],
  146.       POST: '',
  147.     };
  148.  
  149.   },
  150.   computed: {
  151.      item() {
  152.         return this.$store.getters.event
  153.       },
  154.     cities() {
  155.       return this.$store.getters.cities;
  156.     },
  157.     sportClubs() {
  158.       return this.$store.getters["part/sportClubs"];
  159.     },
  160.     sports() {
  161.       return this.$store.getters["sports"];
  162.     },
  163.     groups() {
  164.       return this.$store.getters.participantsResultsOnEvent;
  165.     },
  166.     chosenParticipants() {
  167.       if (this.chosenDistance === null) {
  168.         return [];
  169.       }
  170.       return this.groups[this.chosenDistance].result;
  171.     },
  172.     length() {
  173.       return this.chosenParticipants.length;
  174.     },
  175.     pages() {
  176.       return Math.floor(this.length / this.rows);
  177.     },
  178.     paginatedData() {
  179.       const start = this.currentPage * this.rows,
  180.         end = start + this.rows;
  181.       return this.chosenParticipants.slice(start, end);
  182.     },
  183.     filtered() {
  184.       return this.paginatedData.filter(element => {
  185.         return (
  186.           (stringFilter(this.search, element.participant.firstNameRus) ||
  187.             stringFilter(this.search, element.participant.lastNameRus) ||
  188.             stringFilter(this.search, element.participant.middleNameRus) ||
  189.             stringFilter(this.search, element.startingNumber)) &&
  190.          (this.chosenCity === 0
  191.            ? true
  192.            : !!element.participant.city
  193.            ? idFilter(this.chosenCity, element.participant.city.id)
  194.            : false) &&
  195.          (this.chosenSportClub === 0
  196.            ? true
  197.            : !!element.participant.sportClub
  198.            ? idFilter(this.chosenSportClub, element.participant.sportClub.id)
  199.            : false) &&
  200.          (this.chosenGender === 0 || this.chosenAgeCategory === 0
  201.            ? true
  202.            : !!element.participant.ageCategory
  203.            ? filterByAgeCategory(
  204.                this.chosenGender,
  205.                this.chosenAgeCategory,
  206.                element.participant.ageCategory.id
  207.              )
  208.            : false)
  209.        );
  210.       });
  211.     }
  212.   },
  213.   watch: {
  214.     groups() {
  215.       if (this.groups.length > 0) {
  216.         this.chosenDistance = 0;
  217.       }
  218.     }
  219.   },
  220.   methods: {
  221.     chooseDistance(val) {
  222.       this.chosenDistance = val;
  223.      
  224.     },
  225.     msToTime(duration) {
  226.       var milliseconds = parseInt((duration % 1000) / 100),
  227.       seconds = Math.floor((duration / 1000) % 60),
  228.       minutes = Math.floor((duration / (1000 * 60)) % 60),
  229.       hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
  230.  
  231.       hours = (hours < 10) ? "0" + hours : hours;
  232.      minutes = (minutes < 10) ? "0" + minutes : minutes;
  233.      seconds = (seconds < 10) ? "0" + seconds : seconds;
  234.  
  235.     return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
  236.    },
  237.    nextPage() {
  238.      if (this.currentPage === this.pages) return;
  239.      this.currentPage++;
  240.    },
  241.    prevPage() {
  242.      if (this.currentPage === 0) return;
  243.      this.currentPage--;
  244.    },
  245.    setPage(val) {
  246.      this.currentPage = val;
  247.    },
  248.  },
  249.  mounted() {
  250.    axios
  251.     .get(`/api/v1/eventResults/${this.$store.getters.event.id}`)
  252.     //.get('http://localhost:4382/api/v1/eventResults/184')
  253.     .then(response => (this.props = JSON.parse(response.data)));
  254.     if (this.groups.length > 0) {
  255.       this.chosenDistance = 0;
  256.     }
  257.   }
  258. };
  259.  
  260. </script>
  261.  
  262. <style scoped>
  263. .isDisabled {
  264.   color: currentColor;
  265.   cursor: not-allowed;
  266.   opacity: 0.5;
  267.   text-decoration: none;
  268. }
  269. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!