No Description

Home.vue 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <v-container>
  3. <v-layout row wrap>
  4. <v-flex xs6 offset-xs3 text-xs-center>
  5. <h2>I want to go</h2>
  6. <v-form v-model="valid">
  7. <v-layout row>
  8. <v-flex xs12>
  9. <AddressInput
  10. label="from"
  11. v-model="fromLatLng"
  12. :proximityLat="fromProximity.lat"
  13. :proximityLng="fromProximity.lng"
  14. hint='For example "48.818783, 2.319883".'
  15. />
  16. </v-flex xs12>
  17. </v-layout>
  18. <v-layout row>
  19. <v-flex xs12>
  20. <AddressInput
  21. label="to"
  22. v-model="toLatLng"
  23. :proximityLat="toProximity.lat"
  24. :proximityLng="toProximity.lng"
  25. hint='For example "48.841132, 2.384841".'
  26. />
  27. </v-flex xs12>
  28. </v-layout>
  29. <v-layout row>
  30. <v-flex xs12>
  31. using
  32. <v-btn flat icon :color="bikeIconColor" @click="toggleBike">
  33. <v-icon>directions_bike</v-icon>
  34. </v-btn>
  35. <v-btn flat icon :color="transitIconColor" @click="toggleTransit">
  36. <v-icon>directions_transit</v-icon>
  37. </v-btn>
  38. </v-flex xs12>
  39. </v-layout>
  40. <v-layout row>
  41. <v-flex xs12>
  42. <v-btn
  43. @click="submit"
  44. :disabled="!valid"
  45. >
  46. Go!
  47. </v-btn>
  48. </v-flex xs12>
  49. </v-layout>
  50. </v-form>
  51. </v-flex>
  52. </v-layout>
  53. </v-container>
  54. </template>
  55. <script>
  56. import AddressInput from './AddressInput.vue';
  57. import { splitLatLng } from '../tools';
  58. import { BIKE, TRANSIT } from '../constants';
  59. export default {
  60. components: {
  61. AddressInput,
  62. },
  63. data() {
  64. return {
  65. valid: null,
  66. fromLatLng: null,
  67. toLatLng: null,
  68. search: null,
  69. transport_modes: BIKE + TRANSIT,
  70. };
  71. },
  72. methods: {
  73. submit() {
  74. this.$router.push({
  75. name: 'RouteMap',
  76. params: {
  77. transport_modes: this.transport_modes,
  78. start_point: this.fromLatLng,
  79. end_point: this.toLatLng,
  80. },
  81. });
  82. },
  83. toggleTransportMode(mode) {
  84. if (this.transport_modes & mode) {
  85. this.transport_modes -= mode;
  86. } else {
  87. this.transport_modes += mode;
  88. }
  89. if (this.transport_modes > 0) {
  90. this.valid = false;
  91. } else {
  92. this.valid = true;
  93. }
  94. },
  95. toggleBike() {
  96. this.toggleTransportMode(BIKE);
  97. },
  98. toggleTransit() {
  99. this.toggleTransportMode(TRANSIT);
  100. },
  101. },
  102. computed: {
  103. fromProximity() {
  104. if (this.toLatLng) {
  105. return splitLatLng(this.toLatLng);
  106. }
  107. return {
  108. lat: null,
  109. lng: null,
  110. };
  111. },
  112. toProximity() {
  113. if (this.fromLatLng) {
  114. return splitLatLng(this.fromLatLng);
  115. }
  116. return {
  117. lat: null,
  118. lng: null,
  119. };
  120. },
  121. bikeIconColor() {
  122. if (this.transport_modes & BIKE) {
  123. return 'pink';
  124. }
  125. return null;
  126. },
  127. transitIconColor() {
  128. if (this.transport_modes & TRANSIT) {
  129. return 'pink';
  130. }
  131. return null;
  132. },
  133. },
  134. };
  135. </script>