SHARE
TWEET

Untitled

a guest Jan 14th, 2020 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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="(distan, i) in distances", :key="i", @click="chooseDistance(i)") {{ distan.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__amount-row
  23.                               div.filters__amount-name Количество строк
  24.                               div.filters__field
  25.                                 select.filters__select(name='amount-row', v-model="rows")
  26.                                   option(:value='20') 20
  27.                                   option(:value='30') 30
  28.                                   option(:value='40') 40
  29.                                   option(:value='50') 50
  30.                                   option(:value='100') 100
  31.             //- v-if="distances.participationTypeId == 1"
  32.             table.table-responsive(v-if="distances != [] ? distances[chosenDistance].participationTypeId == 0 : false")
  33.               thead
  34.                   tr
  35.                       th(class="sorted" @click="sortByPosition()") Позиция
  36.                       th Фамилия Имя
  37.                       th Стартовый номер
  38.                       th Абсолютное время
  39.                       th Чистое время
  40.                       th(class="sorted" @click="sortByClear()") Место в категории
  41.                       th(class="sorted" @click="sortByCategory()") Абс. место в категории
  42.                       th Сертификат
  43.               tbody
  44.                   tr(v-for="(part, i) in props ", :key="i")
  45.                       td(data-label='') {{part.Status}}
  46.                       td(data-label='Фамилия Имя') {{ part.LastName }} {{ part.FirstName }}
  47.                       td(data-label='Номер') {{ part.StartingNumber }}
  48.                       td(data-label='') {{part.AbsTime == 'null'? '': part.AbsTime}}                      
  49.                       td(data-label='') {{part.Time == 'null'? '': part.Time}}
  50.                       td(data-label='') {{ part.CategoryPosition}}
  51.                       td(data-label='') {{part.CategoryAbsPosition == 0 ? '' : part.CategoryAbsPosition}}
  52.                      
  53.                       //-td(class="sorted" data-label='' @click="sertif(part.Sertificate)")
  54.                         v-icon icon-diploma
  55.                       //-td(data-label='Медиа')
  56.                         a.table__link.isDisabled 0 Фото
  57.                       //-td(data-label='')
  58.                         a.table__link(:href="part.video", target="_blank", :class="{ 'isDisabled' : part.video === null }")
  59.                           i.material-icons.table__icon video_library
  60.                       td(data-label='')
  61.                         a.table__link(:href="'https://media.russiarunning.com/diploma.preview?raceId='+distances[chosenDistance].raceId+'&participantId='+part.Sertificate", target="_blank", :class="{ 'isDisabled' : part.protocol === null }")
  62.                           icon-diploma
  63.             table.table-responsive( v-if="distances != [] ? distances[chosenDistance].participationTypeId == 0 : false")
  64.               thead
  65.                   tr
  66.                       th(class="sorted"  @click="sortByAbsolute()") Абсолютное место
  67.                       th Название команды
  68.                       th Фамилия Имя
  69.                       th Стартовый номер
  70.                       th Абсолютное групповое время
  71.                       th(class="sorted" @click="sortByCategory()") Чистое время
  72.                       th(class="sorted" @click="sortByAbsolute()") Место в категории
  73.               tbody
  74.                   //-tr(v-for="(part, i) in props ", :key="i")
  75.                       td(data-label='') {{part.Position}}
  76.                       td(data-label='Фамилия Имя') {{ part.LastName }} {{ part.FirstName }}
  77.                       td(data-label='Номер') {{ part.StartNumber }}
  78.                       td(data-label='') {{part.Status == null? msToTime(part.AbsoluteTimeResult) : ''}}                      
  79.                       td(data-label='') {{part.Status == null? msToTime(part.IndividualTimeResult) : ''}}
  80.                       td(data-label="") {{part.Status == null? part.AgeNominationPosition : part.Status }}
  81.  
  82.  
  83.             div.participants__pagination
  84.                 div.pagination
  85.                     a.pagination__nav.pagination__prev(@click="prevPage")
  86.                         arrow-left
  87.                     .pagination__items
  88.                       a.link.pagination__item.cursor(v-if="search == ''") {{ currentPage + 1 }}
  89.                     a.pagination__nav.pagination__next(@click="nextPage")
  90.                         arrow-right
  91. </template>
  92.  
  93. <script>
  94. import Аxios from "axios";
  95. import ArrowLeft from "../blocks/arrow-left";
  96. import ArrowRight from "../blocks/arrow-right";
  97. import IconDiploma from "../blocks/icon-diploma";
  98. //import TriathlonResults from "./tables/triathlon-results";
  99. import ageCategories from "@/data/age-categories";
  100. import { idFilter, filterByAgeCategory, stringFilter } from "@/filters";
  101. export default {
  102.   name: "event-results",
  103.   components: {  ArrowRight, ArrowLeft, IconDiploma },//TriathlonResults,
  104.   data() {
  105.     return {
  106.       poVozr: 0,
  107.       //poVozr: false,
  108.       chosenDistance: 0,
  109.       rows: 20,
  110.       sortType: "pos",
  111.       currentPage: 0,
  112.       chosenSportClub: 0,
  113.       chosenCity: 0,
  114.       chosenGender: 0,
  115.       chosenAgeCategory: 0,
  116.       ageCategories,
  117.       search: "",
  118.       props: [],
  119.       distances: [],
  120.       dist: []
  121.     };
  122.   },
  123.   computed: {
  124.     cities() {
  125.       return this.$store.getters.cities;
  126.     },
  127.     sportClubs() {
  128.       return this.$store.getters["part/sportClubs"];
  129.     },
  130.     sports() {
  131.       return this.$store.getters["sports"];
  132.     },
  133.     //distances() {
  134.     //  return this.$store.getters.event.distances.sort(this.compare);
  135.     //},
  136.     paginatedData(val) {
  137.       this.props = this.getDistanceResults(val);
  138.       return this.props;
  139.     }
  140.   },
  141.   watch: {
  142.     search() {
  143.       if (this.search == "") {
  144.         this.sortType = "pos";
  145.       }
  146.       this.currentPage = 0;
  147.       this.getDistanceResults();
  148.     },
  149.     rows() {
  150.       this.currentPage = 0;
  151.       this.getDistanceResults();
  152.     }
  153.   },
  154.   methods: {
  155.     sertif(val){
  156.       console.log("sdfs")
  157.     },
  158.     sortByClear() {
  159.       if (this.sortType == "cat") {
  160.         this.poVozr = this.poVozr == 1 ? 0 : 1;
  161.         //this.poVozr = !this.poVozr;
  162.       } else {
  163.         this.poVozr = 0;
  164.         //this.poVozr = false;
  165.       }
  166.       this.sortType = "cat";
  167.       this.getDistanceResults();
  168.       this.currentPage = 0;
  169.     },
  170.     sortByPosition() {
  171.       if (this.sortType == "pos") {
  172.         this.poVozr = this.poVozr == 1 ? 0 : 1;
  173.         //this.poVozr = !this.poVozr
  174.       } else {
  175.         this.poVozr = 0;
  176.         //this.poVozr = false
  177.       }
  178.       this.sortType = "pos";
  179.       this.getDistanceResults();
  180.       this.currentPage = 0;
  181.     },
  182.     sortByCategory() {
  183.       if (this.sortType == "catAbs") {
  184.         this.poVozr = this.poVozr == 1 ? 0 : 1;
  185.         //this.poVozr = !this.poVozr
  186.       } else {
  187.         this.poVozr = 0;
  188.         //this.poVozr = false
  189.       }
  190.       this.sortType = "catAbs";
  191.       this.getDistanceResults();
  192.       this.currentPage = 0;
  193.     },
  194.     compare(a, b) {
  195.       return a.distanceType.nameRus > b.distanceType.nameRus ? 1 : -1;
  196.     },
  197.     msToTime(duration) {
  198.       var milliseconds = parseInt((duration % 1000) / 100),
  199.         seconds = Math.floor((duration / 1000) % 60),
  200.         minutes = Math.floor((duration / (1000 * 60)) % 60),
  201.         hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
  202.       hours = hours < 10 ? "0" + hours : hours;
  203.       minutes = minutes < 10 ? "0" + minutes : minutes;
  204.       seconds = seconds < 10 ? "0" + seconds : seconds;
  205.       return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
  206.     },
  207.     chooseDistance(val) {
  208.       this.chosenDistance = val;
  209.       this.getDistanceResults(this.distances[val]);
  210.     },
  211.     nextPage() {
  212.       if (this.props.length == this.rows) {
  213.         this.currentPage++;
  214.         this.getDistanceResults();
  215.       }
  216.     },
  217.     prevPage() {
  218.       if (this.currentPage === 0) return;
  219.       this.currentPage--;
  220.       this.getDistanceResults();
  221.     },
  222.     setPage(val) {
  223.       this.currentPage = val;
  224.     },
  225.     setFilteredPage(val) {
  226.       this.currentPage = val;
  227.     },
  228.     async getDistanceResults(val) {
  229.       if (val == null) {
  230.         val = this.distances[this.chosenDistance];
  231.       }
  232.       if (this.search != "") {
  233.         this.sortType = "search";
  234.       }
  235.       let body = {
  236.         eventId: this.$store.getters.event.id,
  237.         distanceId: this.distances[this.chosenDistance].id,
  238.         page: this.currentPage,
  239.         rows: this.rows,
  240.         sortType: this.sortType,
  241.         isDescending: this.poVozr,
  242.         word: this.search
  243.       };
  244.  
  245.       Аxios
  246.         .post("/api/v1/distances/result", body)
  247.         .then(response => (this.props = response.data));
  248.       //props = JSON.parse(response.data)));
  249.     }
  250.   },
  251.   mounted() {
  252.     this.distances = this.$store.getters.event.distances.sort(this.compare);
  253.     this.getDistanceResults(this.distances[this.chosenDistance].id);
  254.   }
  255. };
  256. </script>
  257.  
  258. <style scoped>
  259. .isDisabled {
  260.   color: currentColor;
  261.   cursor: not-allowed;
  262.   opacity: 0.5;
  263.   text-decoration: none;
  264. }
  265. .sorted {
  266.   cursor: pointer;
  267. }
  268. </style>
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