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

     1  <template>
     2    <div>
     3      <label>Matériel de ski</label>
     4      <b-form-group
     5        label="En l'absence de matériel, nous vous proposons des solutions de mise à disposition."
     6        label-class="font-italic"
     7      >
     8        <b-form-radio-group
     9          :options="options"
    10          v-model="materielSki.need"
    11          :disabled="disabled"
    12        ></b-form-radio-group>
    13      </b-form-group>
    14      <transition mode="out-in" name="fade">
    15        <div v-show="materielSki.need">
    16          <b-form-row>
    17            <b-col>
    18              <b-form-group label="Catégorie">
    19                <b-form-select
    20                  :options="[
    21                    { text: 'Ski', value: 'ski' },
    22                    { text: 'Surf', value: 'surf' }
    23                  ]"
    24                  v-model="materielSki.mode"
    25                  :disabled="disabled"
    26                >
    27                </b-form-select>
    28              </b-form-group>
    29            </b-col>
    30            <b-col>
    31              <b-form-group>
    32                <b-form-group label="Avec un casque">
    33                  <b-form-select
    34                    :options="[
    35                      { text: 'Oui', value: true },
    36                      { text: 'Non', value: false }
    37                    ]"
    38                    v-model="materielSki.casque"
    39                    :disabled="disabled"
    40                  >
    41                  </b-form-select>
    42                </b-form-group>
    43              </b-form-group>
    44            </b-col>
    45          </b-form-row>
    46          <b-form-row>
    47            <b-col>
    48              <b-form-group label="Taille (cm)">
    49                <b-form-input
    50                  placeholder="Taille (cm)"
    51                  type="number"
    52                  min="0"
    53                  max="300"
    54                  v-model.number="materielSki.taille"
    55                  :disabled="disabled"
    56                ></b-form-input>
    57              </b-form-group>
    58            </b-col>
    59            <b-col>
    60              <b-form-group label="Poids (kg)">
    61                <b-form-input
    62                  placeholder="Poids (kg)"
    63                  type="number"
    64                  min="0"
    65                  max="300"
    66                  v-model.number="materielSki.poids"
    67                  :disabled="disabled"
    68                ></b-form-input>
    69              </b-form-group>
    70            </b-col>
    71            <b-col>
    72              <b-form-group label="Pointure">
    73                <b-form-input
    74                  placeholder="Pointure"
    75                  type="number"
    76                  min="0"
    77                  max="70"
    78                  v-model.number="materielSki.pointure"
    79                  :disabled="disabled"
    80                ></b-form-input>
    81              </b-form-group>
    82            </b-col>
    83          </b-form-row>
    84        </div>
    85      </transition>
    86    </div>
    87  </template>
    88  
    89  <script lang="ts">
    90  import Vue from "vue";
    91  import Component from "vue-class-component";
    92  import { MaterielSkiCamp, MaterielSki } from "@/shared/logic/types";
    93  
    94  const MaterielSkiParticipantProps = Vue.extend({
    95    props: {
    96      materielSki: Object as () => MaterielSki,
    97      infoMaterielSki: Object as () => MaterielSkiCamp,
    98      disabled: Boolean
    99    },
   100    model: {
   101      prop: "materielSki",
   102      event: "change"
   103    }
   104  });
   105  
   106  @Component({})
   107  export default class MaterielSkiParticipant extends MaterielSkiParticipantProps {
   108    get options() {
   109      const textLoueur = `Je souhaite me procurer du matériel chez un <b>loueur</b>. Prévoir
   110                              <b>${this.infoMaterielSki.prix_loueur ||
   111                                "-"} €</b> à
   112                              régler à l'arrivée.`;
   113  
   114      const textAcve = `Pour les séjours à la Maison du Rocher, du matériel de ski est en
   115                          dépôt
   116                          sur site. Si les tailles correspondent, celui-ci peut être mis à
   117                          disposition sur place et <i>sous responsabilité des parents.</i>
   118                          Dans ce cas, une participation aux frais d'entretion de 
   119                          <b>${this.infoMaterielSki.prix_acve || "-"} €</b> est
   120                          demandée. Je souhaite <b>bénéficier de ce matériel</b>.`;
   121      return [
   122        { html: "Je viens avec mon propre matériel.", value: "" },
   123        { html: textLoueur, value: "loueur" },
   124        { html: textAcve, value: "acve" }
   125      ];
   126    }
   127  }
   128  </script>
   129  
   130  <style scoped></style>