Guest User

Untitled

a guest
Jan 14th, 2020
64
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