github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/shared/fields/BusParticipant.vue (about)

     1  <template>
     2    <b-form-group label="Trajet en navette">
     3      <b-form-select
     4        :options="optionsBus"
     5        :value="bus"
     6        @change="$emit('change', $event)"
     7        :disabled="disabled"
     8      >
     9      </b-form-select>
    10      <template v-slot:description>
    11        <div class="text-muted" v-html="description"></div>
    12      </template>
    13    </b-form-group>
    14  </template>
    15  
    16  <script lang="ts">
    17  import Vue from "vue";
    18  import Component from "vue-class-component";
    19  import { TrajetBus, BusCamp } from "@/shared/logic/types";
    20  
    21  const BusParticipantProps = Vue.extend({
    22    props: {
    23      bus: String,
    24      infoBus: Object as () => BusCamp,
    25      disabled: {
    26        type: Boolean,
    27        default: false
    28      }
    29    },
    30    model: {
    31      prop: "bus",
    32      event: "change"
    33    }
    34  });
    35  
    36  function formatTrajet(trajet: TrajetBus) {
    37    let str = `${trajet.rendez_vous}`;
    38    if (trajet.prix) {
    39      str += ` - ${trajet.prix}€`;
    40    }
    41    return str;
    42  }
    43  
    44  @Component({})
    45  export default class BusParticipant extends BusParticipantProps {
    46    get description() {
    47      return (this.infoBus.commentaire || "").replace("\n", "<br/>");
    48    }
    49  
    50    get optionsBus() {
    51      const allerInfo = "Aller - " + formatTrajet(this.infoBus.aller);
    52      const retourInfo = "Retour - " + formatTrajet(this.infoBus.retour);
    53      const allerRetourInfo =
    54        "Aller / Retour - " +
    55        formatTrajet({
    56          rendez_vous: `${this.infoBus.aller.rendez_vous} / ${this.infoBus.retour.rendez_vous}`,
    57          prix: this.infoBus.aller.prix + this.infoBus.retour.prix
    58        });
    59      return [
    60        { value: "", text: "Aucun" },
    61        { value: "aller", text: allerInfo },
    62        { value: "retour", text: retourInfo },
    63        { value: "aller_retour", text: allerRetourInfo }
    64      ];
    65    }
    66  }
    67  </script>
    68  
    69  <style scoped></style>