[Archived]
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Schedule.vue 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <div style="background-color: #EFEFEF; padding: 10px;">
  3. <Card shadow class="main-card" v-for="trip in trips" :key="trip.id">
  4. <div slot="title">
  5. <Row>
  6. <Col span="10" style="text-align: start;">
  7. <div>
  8. <h1 >{{trip.id}}</h1>
  9. <span class="header">{{trip.driverName}}</span>
  10. </div>
  11. </Col>
  12. <Col span="8">
  13. <skycon :condition="trip.weather" :width="35" :height="35"/>
  14. </Col>
  15. <Col span="6">
  16. <Tag :color="colorMap[trip.status]"> {{trip.status}} </Tag>
  17. </Col>
  18. </Row>
  19. </div>
  20. <Row>
  21. <Col span="6">
  22. <Row class="header">
  23. Time
  24. </Row>
  25. <Row>
  26. {{trip.time}}
  27. </Row>
  28. </Col>
  29. <Col span="6">
  30. <Row class="header">
  31. ETA
  32. </Row>
  33. <Row>
  34. {{trip.eta}}
  35. </Row>
  36. </Col>
  37. <Col span="6">
  38. <Row class="header">
  39. Load
  40. </Row>
  41. <Row>
  42. {{trip.load}}
  43. </Row>
  44. </Col>
  45. <Col span="6">
  46. <Row class="header">
  47. Traffic
  48. </Row>
  49. <Row>
  50. {{trip.traffic}}
  51. </Row>
  52. </Col>
  53. </Row>
  54. </Card>
  55. </div>
  56. </template>
  57. <script>
  58. export default {
  59. data () {
  60. return {
  61. source: '',
  62. destination: '',
  63. loading: true,
  64. trips: [],
  65. // {
  66. // id: '#2170984',
  67. // driverName: 'Mahmoud Husni',
  68. // status: 'Departed',
  69. // time: '05:05 PM',
  70. // eta: '45 minutes',
  71. // demand: 4,
  72. // load: 5,
  73. // weather: 'clear-day',
  74. // traffic: 'Heavey traffic'
  75. // },
  76. // {
  77. // id: '#542940',
  78. // driverName: 'Abu Melhim',
  79. // status: 'Boarding',
  80. // time: '05:10 PM',
  81. // eta: '45 minutes',
  82. // demand: 37,
  83. // load: 7,
  84. // weather: 'partly-cloudy-night',
  85. // traffic: 'Heavey traffic'
  86. // },
  87. // {
  88. // id: '#8923984',
  89. // driverName: 'Abu Mohammad',
  90. // status: 'Available',
  91. // time: '05:30 PM',
  92. // eta: '45 minutes',
  93. // demand: 106,
  94. // load: 0,
  95. // weather: 'rain',
  96. // traffic: 'Heavey traffic'
  97. // },
  98. // {
  99. // id: '#2343490',
  100. // driverName: 'Ameer Bamieh',
  101. // status: 'Available',
  102. // time: '06:05 PM',
  103. // eta: '30 minutes',
  104. // demand: 99,
  105. // load: 0,
  106. // weather: 'fog',
  107. // traffic: 'Slight traffic'
  108. // },
  109. // {
  110. // id: '#9734932',
  111. // driverName: 'Abd Al-Hadi',
  112. // status: 'Arriving',
  113. // time: '07:30 PM',
  114. // eta: '66 minutes',
  115. // demand: 87,
  116. // load: 0,
  117. // weather: 'snow',
  118. // traffic: 'Heavey traffic'
  119. // }
  120. // ],
  121. colorMap: {
  122. 'Departed': 'default',
  123. 'Boarding': 'primary',
  124. 'Available': 'success',
  125. 'Arriving': 'warning'
  126. }
  127. }
  128. },
  129. methods: {
  130. getSchedule () {
  131. this.$Loading.start()
  132. // this.loading = true
  133. // this.axios.get('http://www.mocky.io/v2/5b6ca8693300007800a36ad5?mocky-delay=1500ms')
  134. this.axios.get('http://demo7048081.mockable.io/trips', {
  135. params: {
  136. source: this.source,
  137. destination: this.destination
  138. }
  139. })
  140. .then((response) => {
  141. this.$Loading.finish()
  142. // console.log(response.data)
  143. this.trips = response.data
  144. // this.loading = false
  145. // setTimeout(this.getSchedule, 5000)
  146. })
  147. .catch(err => {
  148. console.log(err)
  149. this.$Loading.error()
  150. this.$Message.error('Something went wrong')
  151. // this.loading = false
  152. // setTimeout(this.getSchedule, 5000)
  153. })
  154. }
  155. },
  156. mounted () {
  157. this.source = this.$route.query.source
  158. this.destination = this.$route.query.dest
  159. this.getSchedule()
  160. }
  161. }
  162. </script>
  163. <!-- Add "scoped" attribute to limit CSS to this component only -->
  164. <style scoped>
  165. .main-card {
  166. margin-top: 5px;
  167. margin-bottom: 15px;
  168. }
  169. .header {
  170. color: #ABABAB;
  171. }
  172. </style>