From Admin, 9 Months ago, written in JavaScript.
Embed
  1. <template>
  2.   <b-container fluid>
  3.     <b-form id="needs-validation" @submit.prevent="validateBeforeSubmit">
  4.     <b-row>
  5.       <b-col cols="12" md="6" order="1" class="pt-5 mt-4">
  6.         <Logoheader></Logoheader>
  7.         <b-row>
  8.           <b-col>
  9.             <h2 class="text-left mt-4 pl-lg-3 pr-lg-3 ml-lg-3 mr-lg-3">
  10.               <span class="red">Formularz rejestracyjny</span>
  11.             </h2>
  12.           </b-col>
  13.         </b-row>
  14.         <b-row>
  15.           <b-col>
  16.             <div class="text-left mt-4 mb-5 pl-lg-3 pr-lg-3 ml-lg-3 mr-lg-3">
  17.               <h5>
  18.                 Przed przystąpieniem do akcji prosimy o&nbsp;zapoznanie się z&nbsp;<router-link :to="{ name: 'Regulations' }"><span class="red">warunkami uczestnictwa.</span></router-link>
  19.               </h5>
  20.               <p>
  21.                 Uwaga! Prosimy o zadeklarowanie godzin bezpłatnych przyjęć pacjentów w ramach akcji "Polscy okuliści kontra jaskry".
  22.               </p>
  23.             </div>
  24.           </b-col>
  25.         </b-row>
  26.         <!-- Declarant's section -->
  27.        <b-jumbotron bg-variant="white" border-variant="grey" class="mx-0 mx-lg-4">
  28.            <b-row>
  29.              <b-col sm="12">
  30.                <p><i class="zmdi zmdi-account"></i> Dane osoby zgłaszającej</p>
  31.              </b-col>
  32.            </b-row>
  33.  
  34.           <b-row class="my-1">
  35.              <b-col sm="2">
  36.                <label class="f-12 font-weight-bold" for="declarant.first_name">Imię*</label>
  37.              </b-col>
  38.              <b-col sm="10">
  39.                <b-form-input v-model="declarant.first_name"
  40.                id="declarant.first_name"
  41.                type="text"
  42.                name="declarant.first_name"
  43.                v-validate="'required'"
  44.                data-vv-as="imię"
  45.                :class="{'input': true, 'is-danger': errors.has('declarant.first_name') }" placeholder=""></b-form-input>
  46.                <i v-show="errors.has('declarant.first_name')" class="fa fa-warning"></i>
  47.                <span v-show="errors.has('declarant.first_name')" class="help is-danger red">{{ errors.first('declarant.first_name') }}</span>
  48.              </b-col>
  49.            </b-row>
  50.  
  51.            <b-row class="my-1">
  52.              <b-col sm="2">
  53.                <label class="f-12 font-weight-bold" for="declarant.last_name">Nazwisko*</label>
  54.              </b-col>
  55.              <b-col sm="10">
  56.                <b-form-input v-model="declarant.last_name"
  57.                id="declarant.last_name"
  58.                type="text"
  59.                name="declarant.last_name"
  60.                v-validate="'required'"
  61.                data-vv-as="nazwisko"
  62.                :class="{'input': true, 'is-danger': errors.has('declarant.last_name') }" placeholder=""></b-form-input>
  63.                <i v-show="errors.has('declarant.last_name')" class="fa fa-warning"></i>
  64.                <span v-show="errors.has('declarant.last_name')" class="help is-danger red">{{ errors.first('declarant.last_name') }}</span>
  65.              </b-col>
  66.            </b-row>
  67.  
  68.            <b-row class="my-1">
  69.              <b-col sm="2">
  70.                <label class="f-12 font-weight-bold" for="declarant.phone">Telefon*</label>
  71.              </b-col>
  72.              <b-col sm="10">
  73.                <masked-input mask="111-111-111"
  74.                v-model="declarant.phone"
  75.                id="declarant.phone"
  76.                type="text"
  77.                name="declarant.phone"
  78.                v-validate="'required'"
  79.                data-vv-as="telefon"
  80.                :class="{'form-control input': true, 'is-danger': errors.has('declarant.phone') }" placeholder="" />
  81.  
  82.                <i v-show="errors.has('declarant.phone')" class="fa fa-warning"></i>
  83.                <span v-show="errors.has('declarant.phone')" class="help is-danger red">{{ errors.first('declarant.phone') }}</span>
  84.              </b-col>
  85.            </b-row>
  86.  
  87.            <b-row class="my-1">
  88.              <b-col sm="2">
  89.                <label class="f-12 font-weight-bold" for="declarant.email">Email*</label>
  90.              </b-col>
  91.              <b-col sm="10">
  92.                <b-form-input v-model="declarant.email"
  93.                id="declarant.email"
  94.                type="text"
  95.                name="declarant.email"
  96.                v-validate="'required|email'"
  97.                data-vv-as="email"
  98.                :class="{'input': true, 'is-danger': errors.has('declarant.email') }" placeholder=""></b-form-input>
  99.                <i v-show="errors.has('declarant.email')" class="fa fa-warning"></i>
  100.                <span v-show="errors.has('declarant.email')" class="help is-danger red">{{ errors.first('declarant.email') }}</span>
  101.              </b-col>
  102.            </b-row>
  103.  
  104.            <!-- End Declarant's section -->
  105.  
  106.             <!-- Place's section -->
  107.            <b-row class="my-1">
  108.              <b-col sm="12">
  109.                <p><i class="zmdi zmdi-home"></i> Dane placówki</p>
  110.              </b-col>
  111.            </b-row>
  112.            <b-row class="my-1">
  113.              <b-col sm="2">
  114.                <label class="f-12 font-weight-bold" for="institution.name">Nazwa placówki*</label>
  115.              </b-col>
  116.              <b-col sm="10">
  117.                <b-form-input v-model="institution.name" id="institution.name" type="text" name="institution.name"
  118.                v-validate="'required'"
  119.                data-vv-as="nazwa instytucji"
  120.                :class="{'input': true, 'is-danger': errors.has('institution.name') }" placeholder=""></b-form-input>
  121.                <i v-show="errors.has('institution.name')" class="fa fa-warning"></i>
  122.                <span v-show="errors.has('institution.name')" class="help is-danger red">{{ errors.first('institution.name') }}</span>
  123.              </b-col>
  124.            </b-row>
  125.  
  126.            <b-row class="my-1">
  127.              <b-col sm="2">
  128.                <label class="f-12 font-weight-bold" for="institution.post_code">Kod pocztowy*</label>
  129.              </b-col>
  130.              <b-col sm="10">
  131.                <masked-input mask="11-111" v-model="institution.post_code" id="institution.post_code" type="text" name="institution.post_code"
  132.                v-validate="'required'"
  133.                data-vv-as="kod pocztowy"
  134.                :class="{'form-control input': true, 'is-danger': errors.has('institution.post_code') }" placeholder="" />
  135.                <i v-show="errors.has('institution.post_code')" class="fa fa-warning"></i>
  136.                <span v-show="errors.has('institution.post_code')" class="help is-danger red">{{ errors.first('institution.post_code') }}</span>
  137.              </b-col>
  138.            </b-row>
  139.  
  140.             <b-row class="my-1">
  141.              <b-col sm="2">
  142.                <label class="f-12 font-weight-bold" for="institution.city">Miasto*</label>
  143.              </b-col>
  144.              <b-col sm="10">
  145.                <b-form-input v-model="institution.city" id="institution.city" type="text" name="institution.city"
  146.                v-validate="'required'"
  147.                data-vv-as="miasto"
  148.                :class="{'input': true, 'is-danger': errors.has('institution.city') }" placeholder=""></b-form-input>
  149.                <i v-show="errors.has('institution.city')" class="fa fa-warning"></i>
  150.                <span v-show="errors.has('institution.city')" class="help is-danger red">{{ errors.first('institution.city') }}</span>
  151.              </b-col>
  152.            </b-row>
  153.  
  154.            <b-row class="my-1">
  155.              <b-col sm="2">
  156.                <label class="f-12 font-weight-bold" for="institution.state">Województwo*</label>
  157.              </b-col>
  158.              <b-col sm="10">
  159.                <b-form-select v-model="institution.state" :options="options" id="institution.state" type="text"
  160.                name="institution.state"
  161.                v-validate
  162.                data-vv-rules="required"
  163.                data-vv-as="województwo"
  164.                :class="{'input': true, 'is-danger': errors.has('institution.state') }"
  165.                placeholder=""></b-form-select>
  166.                <i v-show="errors.has('institution.state')" class="fa fa-warning"></i>
  167.                <span v-show="errors.has('institution.state')" class="help is-danger red">{{ errors.first('institution.state') }}</span>
  168.              </b-col>
  169.            </b-row>
  170.  
  171.             <b-row class="my-1">
  172.              <b-col sm="2">
  173.                <label class="f-12 font-weight-bold" for="institution.address">Ulica numer*</label>
  174.              </b-col>
  175.              <b-col sm="10">
  176.                <b-form-input v-model="institution.address" id="institution.address" type="text" name="institution.address"
  177.                v-validate="'required'"
  178.                data-vv-as="ulica, numer"
  179.                :class="{'input': true, 'is-danger': errors.has('institution.address') }" placeholder=""></b-form-input>
  180.                <i v-show="errors.has('institution.address')" class="fa fa-warning"></i>
  181.                <span v-show="errors.has('institution.address')" class="help is-danger red">{{ errors.first('institution.address') }}</span>
  182.              </b-col>
  183.            </b-row>
  184.  
  185.             <b-row class="my-1">
  186.              <b-col sm="2">
  187.                <label class="f-12 font-weight-bold" for="institution.institution_phone">Telefon placówki*</label>
  188.              </b-col>
  189.              <b-col sm="10">
  190.                <masked-input mask="111-111-111" v-model="institution.institution_phone" id="institution.institution_phone" type="text" name="institution.institution_phone"
  191.                v-validate="'required'"
  192.                data-vv-as="telefon placówki"
  193.                :class="{'form-control input': true, 'is-danger': errors.has('institution.institution_phone') }" placeholder="" />
  194.                <i v-show="errors.has('institution.institution_phone')" class="fa fa-warning"></i>
  195.                <span v-show="errors.has('institution.institution_phone')" class="help is-danger red">{{ errors.first('institution.institution_phone') }}</span>
  196.              </b-col>
  197.            </b-row>
  198.  
  199.             <b-row class="my-1" v-for="(phone, index) in phones" :key="index">
  200.              <b-col sm="2">
  201.                <label class="f-12 font-weight-bold" for="phone.number">Dodatkowy telefon</label>
  202.              </b-col>
  203.              <b-col sm="8">
  204.                <masked-input mask="111-111-111" v-model="phone.number" :id="index" type="text" name="phone.number"
  205.                v-validate="''"
  206.                data-vv-as="dodatkowy telefon"
  207.                :class="{'form-control input': true, 'is-danger': errors.has('phone.number') }" placeholder="" />
  208.                <i v-show="errors.has('phone.number')" class="fa fa-warning"></i>
  209.                <span v-show="errors.has('phone.number')" class="help is-danger red">{{ errors.first('phone.number') }}</span>
  210.              </b-col>
  211.              <b-col sm="2">
  212.                <button @click="deleteRow(index)" class="btn btn-danger">Usuń</button>
  213.              </b-col>
  214.            </b-row>
  215.  
  216.            <b-row class="my-1">
  217.              <b-col sm="12">
  218.                <button @click="addRow" class="btn btn-dark btn-block">Dodaj telefon</button>
  219.              </b-col>
  220.            </b-row>
  221.  
  222.            <b-row class="my-1">
  223.              <b-col sm="2">
  224.                <label class="f-12 font-weight-bold" for="institution.patients_number">Deklarowana liczba&nbsp;pacjentów*</label>
  225.              </b-col>
  226.              <b-col sm="10">
  227.                <b-form-input v-model="institution.patients_number" id="institution.patients_number" type="text" name="institution.patients_number"
  228.                v-validate="'required|numeric'"
  229.                data-vv-as="deklarowana liczba pacjentów"
  230.                :class="{'input': true, 'is-danger': errors.has('institution.patients_number') }" placeholder=""></b-form-input>
  231.                <i v-show="errors.has('institution.patients_number')" class="fa fa-warning"></i>
  232.                <span v-show="errors.has('institution.patients_number')" class="help is-danger red">{{ errors.first('institution.patients_number') }}</span>
  233.              </b-col>
  234.            </b-row>
  235.  
  236.            <b-row class="pt-2">
  237.              <b-col sm="12">
  238.                <p class="f-12">*pola wymagane</p>
  239.              </b-col>
  240.            </b-row>
  241.            <!-- End Place's section -->
  242.         </b-jumbotron>
  243.       </b-col>
  244.       <b-col cols="12" md="6" order="2" class="bg pt-5 mt-4">
  245.         <!-- Avalibility's section -->
  246.        <b-jumbotron class="mx-0 mx-lg-5" bg-variant="white" border-variant="grey">
  247.          <b-row>
  248.            <b-col sm="12">
  249.              <p><i class="zmdi zmdi-time"></i> Godziny bezpłatnych przyjęć pacjentów w ramach akcji "Polscy okuliści kontra jaskry"</p>
  250.              <hr>
  251.            </b-col>
  252.          </b-row>
  253.          <b-row class="my-1">
  254.            <b-col sm="2" class="d-none d-md-inline"></b-col>
  255.            <b-col sm="4" class="d-none d-md-inline">
  256.              <h6 class="f-13 font-weight-bold">Od</h6>
  257.            </b-col>
  258.            <b-col sm="4" class="d-none d-md-inline">
  259.              <h6 class="f-13 font-weight-bold">Do</h6>
  260.            </b-col>
  261.          </b-row>
  262.          <b-row class="my-1" v-for="period in availibility" :key="period.date">
  263.            <b-col sm="2">
  264.              <label class="f-12 font-weight-bold" :for="period.for">{{period.day}}</label>
  265.            </b-col>
  266.            <b-col sm="4">
  267.              <b-form-input v-model="period.start_at" :id="period.id_start_at" type="time"></b-form-input>
  268.            </b-col>
  269.            <b-col sm="4">
  270.              <b-form-input v-model="period.finish_at" :id="period.id_finish_at" type="time"></b-form-input>
  271.            </b-col>
  272.          </b-row>
  273.          <b-row>
  274.            <b-col sm="12">
  275.              <hr>
  276.            </b-col>
  277.          </b-row>
  278.          <b-row class="my-1">
  279.              <b-col sm="2">
  280.                <label class="f-12 font-weight-bold" for="declarant.comment">Uwagi</label>
  281.              </b-col>
  282.              <b-col sm="10">
  283.                <b-form-input v-model="declarant.comment"
  284.                id="declarant.comment"
  285.                type="text"
  286.                name="declarant.comment"
  287.                v-validate="''"
  288.                data-vv-as="komentarz"
  289.                :class="{'input': true, 'is-danger': errors.has('declarant.comment') }" placeholder=""></b-form-input>
  290.                <i v-show="errors.has('declarant.comment')" class="fa fa-warning"></i>
  291.                <span v-show="errors.has('declarant.comment')" class="help is-danger red">{{ errors.first('declarant.comment') }}</span>
  292.              </b-col>
  293.            </b-row>
  294.             <b-row class="my-1">
  295.               <b-col sm="2">
  296.                 <input
  297.                    id="declarant.accepted"
  298.                    v-model="declarant.accepted"
  299.                    value="accepted"
  300.                    v-validate
  301.                    data-vv-rules="required"
  302.                    data-vv-as="akceptacja"
  303.                    type='checkbox'
  304.                    name="declarant.accepted">
  305.               </b-col>
  306.              <b-col sm="10">
  307.                <span class="f-11 font-weight-bold">Wyrażam zgodę na przetwarzanie moich danych osobowych podanych w&nbsp;formularzu zgłoszeniowym przez Polskie Towarzystwo Okulistyczne z&nbsp;siedzibą w&nbsp;Warszawie przy ul. Lindleya&nbsp;4 dla potrzeb niezbędnych do organizacji akcji "Polscy okuliści kontra jaskra", zgodnie z&nbsp;ustawą z&nbsp;dnia 29&nbsp;sierpnia 1997&nbsp;roku o&nbsp;ochronie danych osobowych (Dz.&nbsp;U. z&nbsp;2002&nbsp;r. Nr&nbsp;101, poz. 926 ze&nbsp;zm.).</span>
  308.                <p>
  309.                  <span class="help red is-danger" v-show="errors.has('declarant.accepted')">{{ errors.first('declarant.accepted') }}</span>
  310.                </p>
  311.              </b-col>
  312.            </b-row>
  313.        </b-jumbotron>
  314.        <!-- End Avalibility's section -->
  315.         <b-row class="mt-4 mx-4 mx-xs-4">
  316.           <b-col cols="12">
  317.             <b-button :disabled="isDisabled" type="submit" class="btn btn-black white btn-round-lg btn-lg">
  318.               <span v-show="!isDisabled">ZAREJESTRUJ PLACÓWKĘ</span>
  319.               <span v-show="isDisabled">REJESTRUJĘ <i class="zmdi zmdi-spinner"></i></span>
  320.             </b-button>
  321.           </b-col>
  322.         </b-row>
  323.         <b-row align-v="center" class="pt-4 mx-4 mx-xs-5">
  324.           <b-col cols="12" md="12" lg="1" class="mr-5">
  325.             <img src="../assets/img/printer.png" alt="Wydrukuj potwierdzenie" width="78">
  326.           </b-col>
  327.           <b-col cols="12" md="12" lg="6" class="text-left">
  328.             <h6 class="white pt-2">WYDRUKUJ FORMULARZ, KTÓRY PRZESŁALIŚMY NA&nbsp;ADRES MAILOWY PODANY PODCZAS REJESTRACJI.</h6>
  329.           </b-col>
  330.         </b-row>
  331.           <b-col cols="12" md="12" lg="3" class="pt-4 text-left pl-4">
  332.             <b-img align-v="center" blank width="15" height="15" class="arrows-grey rotate90" style="margin-left: 35px;"/>
  333.           </b-col>
  334.         <b-row align-v="center" class="pb-2 pt-4 mx-4 mx-xs-5">
  335.           <b-col cols="12" md="12" lg="1" class="mr-5">
  336.             <img src="../assets/img/sendMail.png" alt="Wyślij potwierdzenie mailem" width="78">
  337.           </b-col>
  338.           <b-col cols="12" md="12" lg="8" class="text-left">
  339.             <h6 class="white pt-2">ODEŚLIJ SKAN DOKUMENTU OPATRZONY PIECZĄTKĄ GABINETU NA&nbsp;ADRES.</h6>
  340.             <a href="mailto:tydzienjaskry@pto.com.pl" target="_blank">
  341.               <h4 class="white">tydzienjaskry@pto.com.pl</h4>
  342.             </a>
  343.           </b-col>
  344.         </b-row>
  345.       </b-col>
  346.     </b-row>
  347.     </b-form>
  348.   </b-container>
  349. </template>
  350.  
  351. <script>
  352. import MaskedInput from 'vue-masked-input'
  353. import Logoheader from './partials/Logoheader'
  354. export default {
  355.   computed: {
  356.     nameState () {
  357.       return this.declarant.length > 2 ? true : false
  358.     }
  359.   },
  360.   data () {
  361.     return {
  362.       isDisabled: false,
  363.       monday: '',
  364.       tuesday: '',
  365.       wednesday: '',
  366.       thursday: '',
  367.       friday: '',
  368.       saturday: '',
  369.       sunday: '',
  370.       dates: [],
  371.       phones: [],
  372.  
  373.       declarant: [
  374.         { id: 'first_name', model: 'first_name', type: 'text', name: 'first_name' },
  375.         { id: 'last_name', model: 'last_name', type: 'text', name: 'last_name' },
  376.         { id: 'phone', model: 'phone', type: 'text', name: 'phone' },
  377.         { id: 'email', model: 'email', type: 'text', name: 'email' },
  378.         { id: 'comment', model: 'comment', type: 'text', name: 'comment' }
  379.       ],
  380.       institution: [
  381.         { label: 'Nazwa placówki*', for: 'name', id: 'name', model: 'name', type: 'text' },
  382.         { label: 'Kod pocztowy*', for: 'post_code', id: 'post_code', model: 'post_code', type: 'text' },
  383.         { label: 'Miasto*', for: 'city', id: 'city', model: 'city', type: 'text', placeholder: ''},
  384.         { label: 'Województwo*', for: 'state', id: 'state', model: 'selected', type: 'text', placeholder: ''},
  385.         { label: 'Ulica, numer*', for: 'address', id: 'address', model: 'address', type: 'text', placeholder: '' },
  386.         { label: 'Telefon do placówki*', for: 'institution_phone', id: 'institution_phone', model: 'institution_phone', type: 'text' },
  387.         { label: 'Deklarowana liczba pacjentów*', for: 'patients_number', id: 'patients_number', model: 'patients_number', type: 'text' },
  388.       ],
  389.       options: [
  390.         { value: null, text: 'Wybierz województwo' },
  391.         { value: 'dolnośląskie', text: 'dolnośląskie' },
  392.         { value: 'kujawsko-pomorskie', text: 'kujawsko-pomorskie' },
  393.         { value: 'lubelskie', text: 'lubelskie' },
  394.         { value: 'lubuskie', text: 'lubuskie' },
  395.         { value: 'łódzkie', text: 'łódzkie' },
  396.         { value: 'małopolskie', text: 'małopolskie' },
  397.         { value: 'mazowieckie', text: 'mazowieckie' },
  398.         { value: 'opolskie', text: 'opolskie' },
  399.         { value: 'podkarpackie', text: 'podkarpackie' },
  400.         { value: 'podlaskie', text: 'podlaskie' },
  401.         { value: 'pomorskie', text: 'pomorskie' },
  402.         { value: 'śląskie', text: 'śląskie' },
  403.         { value: 'świętokrzyskie', text: 'świętokrzyskie' },
  404.         { value: 'warmińsko-mazurskie', text: 'warmińsko-mazurskie' },
  405.         { value: 'wielkopolskie', text: 'wielkopolskie' },
  406.         { value: 'zachodniopomorskie', text: 'zachodniopomorskie' }
  407.       ],
  408.       availibility: {
  409.         'day1': {
  410.           day: "Niedziela",
  411.           date: "2018-03-12",
  412.           id_start_at: "start_day1",
  413.           id_finish_at: "finish_day1",
  414.           start_at: "",
  415.           finish_at: "",
  416.           model: "day1"
  417.         },
  418.         'day2': {
  419.           day: "Poniedziałek",
  420.           date: "2018-03-13",
  421.           id_start_at: "start_day2",
  422.           id_finish_at: "finish_day2",
  423.           start_at: "",
  424.           finish_at: "",
  425.           model: "day2"
  426.         },
  427.         'day3': {
  428.           day: "Wtorek",
  429.           date: "2018-03-14",
  430.           id_start_at: "start_day3",
  431.           id_finish_at: "finish_day3",
  432.           start_at: "",
  433.           finish_at: "",
  434.           model: "day3"
  435.         },
  436.         'day4': {
  437.           day: "Środa",
  438.           date: "2018-03-15",
  439.           id_start_at: "start_day4",
  440.           id_finish_at: "finish_day4",
  441.           start_at: "",
  442.           finish_at: "",
  443.           model: "day4"
  444.         },
  445.         'day5': {
  446.           day: "Czwartek",
  447.           date: "2018-03-16",
  448.           id_start_at: "start_day5",
  449.           id_finish_at: "finish_day5",
  450.           start_at: "",
  451.           finish_at: "",
  452.           model: "day5"
  453.         },
  454.         'day6': {
  455.           day: "Piątek",
  456.           date: "2018-03-17",
  457.           id_start_at: "start_day6",
  458.           id_finish_at: "finish_day6",
  459.           start_at: "",
  460.           finish_at: "",
  461.           model: "day6"
  462.         },
  463.         'day7': {
  464.           day: "Sobota",
  465.           date: "2018-03-18",
  466.           id_start_at: "start_day7",
  467.           id_finish_at: "finish_day7",
  468.           start_at: "",
  469.           finish_at: "",
  470.           model: "day7"
  471.         }
  472.       }
  473.     }
  474.   },
  475.   components: {
  476.     Logoheader,
  477.     MaskedInput
  478.   },
  479.   mounted() {
  480.     // this.fillDefaultForm()
  481.     this.fetchDate()
  482.   },
  483.   methods: {
  484.     addRow() {
  485.       this.phones.push({
  486.         number: ''
  487.       })
  488.     },
  489.     deleteRow(index) {
  490.       this.phones.splice(index,1)
  491.     },
  492.     fetchDate () {
  493.       this.axios({
  494.         method: 'GET',
  495.         url: `${process.env.APP_URL}/api/sendDate`
  496.       })
  497.       .then(result => {
  498.         this.monday = result.data.monday
  499.         this.tuesday = result.data.tuesday
  500.         this.wednesday = result.data.wednesday
  501.         this.thursday = result.data.thursday
  502.         this.friday = result.data.friday
  503.         this.saturday = result.data.saturday
  504.         this.sunday = result.data.sunday
  505.       })
  506.     },
  507.     showErrors (error) {
  508.       this.$toasted.error(error, {
  509.         theme: "primary",
  510.         position: "bottom-right",
  511.         duration : 5000
  512.       })
  513.     },
  514.     scrollTop () {
  515.       this.$(window).scrollTop(0)
  516.     },
  517.     fillDefaultForm() {
  518.       this.declarant.first_name = 'Julia'
  519.       this.declarant.last_name = 'Jackowska'
  520.       this.declarant.phone = '608456798'
  521.       this.declarant.email = 'michal1311b@gmail.com'
  522.  
  523.       this.institution.name = 'Instytucja 1'
  524.       this.institution.post_code = '90-200'
  525.       this.institution.city = 'Zduńska Wola'
  526.       this.institution.institution_phone = '608456798'
  527.       this.institution.address = 'Zduńska 90/100'
  528.       this.institution.patients_number = '200'
  529.     },
  530.     clearForm() {
  531.       this.declarant.first_name = ''
  532.       this.declarant.last_name = ''
  533.       this.declarant.phone = ''
  534.       this.declarant.email = ''
  535.       this.declarant.comment = ''
  536.  
  537.       this.institution.name = ''
  538.       this.institution.post_code = ''
  539.       this.institution.city = ''
  540.       this.institution.institution_phone = ''
  541.       this.institution.address = ''
  542.       this.institution.patients_number = ''
  543.  
  544.       Object.keys(this.availibility).map((key)=> {
  545.         this.availibility[key].start_at = '',
  546.         this.availibility[key].finish_at =''
  547.       });
  548.  
  549.       this.$validator.pause()
  550.         this.$nextTick(() => {
  551.           this.$validator.errors.clear()
  552.           this.$validator.fields.items.forEach(field => field.reset())
  553.           this.$validator.fields.items.forEach(field => this.errors.remove(field))
  554.           this.$validator.resume()
  555.       })
  556.     },
  557.     validateBeforeSubmit() {
  558.       this.$validator.validateAll().then((result) => {
  559.         if (result) {
  560.           this.submitForm()
  561.         }
  562.       })
  563.     },
  564.     submitForm() {
  565.       this.isDisabled = true;
  566.       const data = {
  567.           "declarant" :
  568.           {
  569.             "first_name": this.declarant.first_name,
  570.             "last_name": this.declarant.last_name,
  571.             "email": this.declarant.email,
  572.             "phone": this.declarant.phone,
  573.             "comment": this.declarant.comment,
  574.             "accepted": this.declarant.accepted
  575.           },
  576.           "institution":
  577.           {
  578.             "name": this.institution.name,
  579.             "address": this.institution.address,
  580.             "city": this.institution.city,
  581.             "state": this.institution.state,
  582.             "post_code": this.institution.post_code,
  583.             "phone": this.institution.institution_phone,
  584.             "patients_number": this.institution.patients_number
  585.           },
  586.           "availabilities":
  587.           [
  588.             {
  589.               "date": this.sunday,
  590.               "start_at": this.availibility.day1.start_at,
  591.               "end_at": this.availibility.day1.finish_at
  592.             },
  593.             {
  594.               "date": this.monday,
  595.               "start_at": this.availibility.day2.start_at,
  596.               "end_at": this.availibility.day2.finish_at
  597.             },
  598.             {
  599.               "date": this.tuesday,
  600.               "start_at": this.availibility.day3.start_at,
  601.               "end_at": this.availibility.day3.finish_at
  602.             },
  603.             {
  604.               "date": this.wednesday,
  605.               "start_at": this.availibility.day4.start_at,
  606.               "end_at": this.availibility.day4.finish_at
  607.             },
  608.             {
  609.               "date": this.thursday,
  610.               "start_at": this.availibility.day5.start_at,
  611.               "end_at": this.availibility.day5.finish_at
  612.             },
  613.             {
  614.               "date": this.friday,
  615.               "start_at": this.availibility.day6.start_at,
  616.               "end_at": this.availibility.day6.finish_at
  617.             },
  618.             {
  619.               "date": this.saturday,
  620.               "start_at": this.availibility.day7.start_at,
  621.               "end_at": this.availibility.day7.finish_at
  622.             }
  623.           ],
  624.           "phones":
  625.           {
  626.             "number": this.phone.number
  627.           }
  628.         }
  629.       this.axios({
  630.         method: "POST",
  631.         url: `${process.env.APP_URL}/api/registrations`,
  632.         data
  633.       })
  634.       .then((response) => {
  635.         this.isDisabled = false;
  636.  
  637.         this.clearForm()
  638.  
  639.         this.$toasted.success('Dziękujemy za rejestrację placówki. Proszę sprawdzić email.', {
  640.         theme: "primary",
  641.         position: "bottom-right",
  642.         duration : 5000
  643.       })
  644.       }, (response) => {
  645.         this.isDisabled = false;
  646.  
  647.         Object.keys(response.response.data.errors).map((key) => response.response.data.errors[key].map((error) => this.showErrors(error)))
  648.       })
  649.     }
  650.   }
  651. }
  652. </script>
  653.  
  654. <!-- Add "scoped" attribute to limit CSS to this component only -->
  655. <style scoped>
  656. </style>
  657.