SHARE
TWEET

ionut1

a guest Aug 22nd, 2019 78 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div id="addDetailsPage">
  3.         <!-- Header !-->
  4.         <section class="hero is-primary">
  5.             <div class="hero-body">
  6.                 <div class="container">
  7.                     <h1 class="title has-text-centered">
  8.                         Add record details
  9.                     </h1>
  10.                 </div>
  11.             </div>
  12.         </section>
  13.                        
  14.         <!-- Add record form !-->
  15.         <div id="add-details" class="columns has-text-centered">
  16.             <div class="column is-6-desktop is-offset-3-desktop is-10-tablet is-offset-1-tablet">
  17.  
  18.                 <div class="record-attribute">
  19.                     <div class="record-attribute__heading">
  20.                         <div class="subtitle is-4"> Invoice Code </div>
  21.                     </div>
  22.  
  23.                     <div id="project-code-field" class="record-attribute__body box">
  24.                         <div class="subtitle is-4">
  25.                             <div> {{ invoice_code }} </div>
  26.  
  27.                             <div>
  28.                                 <a @click="changeCode"> Change </a>
  29.                             </div>
  30.                         </div>
  31.  
  32.                         <div v-if="errors.invoice_code" class="tag is-danger">
  33.                             {{ errors.invoice_code[0] }}
  34.                         </div>
  35.  
  36.                         <div v-if="errors.invoice_code">
  37.                             <a @click="updateCode"> Update code </a>
  38.                         </div>
  39.                     </div>
  40.                 </div>
  41.  
  42.                 <form @submit.prevent="submit()">
  43.  
  44.  
  45.  
  46.                     <div class="record-attribute">
  47.                         <div class="record-attribute__heading">
  48.                             <div class="subtitle is-4"> Vehicle Registration </div>
  49.                         </div>
  50.  
  51.                         <div class="record-attribute__body box">
  52.  
  53.                             <autocomplete-vue
  54.                                         v-model="vehicle_registration"
  55.                                         class="driver-input-box"
  56.                                         inputClass="input is-normal is-fullwidth"
  57.                                         placeholder="Vehicle Registration"
  58.                                         :list="vehicle_registrations"
  59.                                         :threshold="-1"
  60.                             ></autocomplete-vue>
  61.                         </div>
  62.                     </div>
  63.  
  64.                     <div class="record-attribute" id="vehicle_type">
  65.                         <div class="record-attribute__heading">
  66.                             <div class="subtitle is-4"> Vehicle Type </div>
  67.                         </div>
  68.  
  69.                         <div class="record-attribute__body box">
  70.                             <div class="select-box">
  71.                                 <select class="select-option" id="vehicle_type_select" @change="vehicleTypeSelected($event)">
  72.                                     <option class="option" v-for="item in vehicle_types" :value="item">{{item}}</option>
  73.                                 </select>
  74.                             </div>        
  75.                         </div>
  76.  
  77.                         <div class="record-attribute__body box hideit" id="other_vehicle_box">
  78.                             <div v-if="staff"
  79.                                  class="control is-expanded">
  80.                                 <input  v-model="vehicle_type"
  81.                                             type="text" id="other_vehicle_field" placeholder="Vehicle Type" class="input is-normal is-fullwidth">
  82.                             </div>
  83.                         </div>
  84.  
  85.                     </div>
  86.  
  87.  
  88.                     <div class="record-attribute" id="driversFields">
  89.                         <div class="record-attribute__heading">
  90.                             <div class="subtitle is-4"> Drivers </div>
  91.                         </div>
  92.  
  93.                         <div class="record-attribute__body box" id="driver 1">
  94.                             <div v-if="staff"
  95.                                  class="control is-expanded">
  96.                                 <autocomplete-vue
  97.                                         v-model="drivers[1]"
  98.                                         @input="driverFieldInput($event,1)"
  99.                                         id="driver-field 1"
  100.                                         class="driver-input-box"
  101.                                         inputClass="input is-normal is-fullwidth"
  102.                                         placeholder="Driver 1"
  103.                                         :list="staffForInvoiceCode"
  104.                                         :threshold="-1"
  105.                                         :from="'employee'"
  106.                                 ></autocomplete-vue>
  107.                             </div>
  108.  
  109.                             <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
  110.                                 <div class="tag is-info">
  111.                                     You entered a staff member name that is not in the current list.
  112.                                 </div>
  113.                                 <div class="tag is-info">
  114.                                     Continue and when new staff members are loaded this will be validated.
  115.                                 </div>
  116.                             </div>
  117.  
  118.                             <div v-if="errorDrivers[1]" class="tag is-danger">
  119.                                 Person already selected
  120.                             </div>
  121.  
  122.                             <div v-if="errors_staff_name[1]" class="tag is-danger">
  123.                                 You have to select a staff person or enter a name
  124.                             </div>
  125.                         </div>
  126.  
  127.  
  128.  
  129.                         <div class="record-attribute__body box hideit" id="driver 2">
  130.                             <div v-if="staff"
  131.                                  class="control is-expanded">
  132.                                 <autocomplete-vue
  133.                                         v-model="drivers[2]"
  134.                                         @input="driverFieldInput($event,2)"
  135.                                         id="driver-field 2"
  136.                                         class="driver-input-box"
  137.                                         inputClass="input is-normal is-fullwidth"
  138.                                         placeholder="Driver 2"
  139.                                         :list="staffForInvoiceCode"
  140.                                         :threshold="-1"
  141.                                         :from="'employee'"
  142.                                 ></autocomplete-vue>
  143.                             </div>
  144.  
  145.                             <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
  146.                                 <div class="tag is-info">
  147.                                     You entered a staff member name that is not in the current list.
  148.                                 </div>
  149.                                 <div class="tag is-info">
  150.                                     Continue and when new staff members are loaded this will be validated.
  151.                                 </div>
  152.                             </div>
  153.  
  154.                             <div v-if="errorDrivers[2]" class="tag is-danger">
  155.                                 Person already selected
  156.                             </div>
  157.  
  158.                             <div v-if="errors_staff_name[2]" class="tag is-danger">
  159.                                 You have to select a staff person or enter a name
  160.                             </div>
  161.                         </div>
  162.  
  163.  
  164.  
  165.                         <div class="record-attribute__body box hideit" id="driver 3">
  166.                             <div v-if="staff"
  167.                                  class="control is-expanded">
  168.                                 <autocomplete-vue
  169.                                         v-model="drivers[3]"
  170.                                         @input="driverFieldInput($event,3)"
  171.                                         id="driver-field 3"
  172.                                         class="driver-input-box"
  173.                                         inputClass="input is-normal is-fullwidth"
  174.                                         placeholder="Driver 3"
  175.                                         :list="staffForInvoiceCode"
  176.                                         :threshold="-1"
  177.                                         :from="'employee'"
  178.                                 ></autocomplete-vue>
  179.                             </div>
  180.  
  181.                             <div v-if="errorDrivers[3]" class="tag is-danger">
  182.                                 Person already selected
  183.                             </div>
  184.  
  185.                             <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
  186.                                 <div class="tag is-info">
  187.                                     You entered a staff member name that is not in the current list.
  188.                                 </div>
  189.                                 <div class="tag is-info">
  190.                                     Continue and when new staff members are loaded this will be validated.
  191.                                 </div>
  192.                             </div>
  193.  
  194.                             <div v-if="errors_staff_name[3]" class="tag is-danger">
  195.                                 You have to select a staff person or enter a name
  196.                             </div>
  197.                         </div>
  198.  
  199.  
  200.  
  201.                         <div class="record-attribute__body box hideit" id="driver 4">
  202.                             <div v-if="staff"
  203.                                  class="control is-expanded">
  204.                                 <autocomplete-vue
  205.                                         v-model="drivers[4]"
  206.                                         @input="driverFieldInput($event,4)"
  207.                                         id="driver-field 4"
  208.                                         class="driver-input-box"
  209.                                         inputClass="input is-normal is-fullwidth"
  210.                                         placeholder="Driver 4"
  211.                                         :list="staffForInvoiceCode"
  212.                                         :threshold="-1"
  213.                                         :from="'employee'"
  214.                                 ></autocomplete-vue>
  215.                             </div>
  216.  
  217.                             <div v-if="errorDrivers[4]" class="tag is-danger">
  218.                                 Person already selected
  219.                             </div>
  220.  
  221.                             <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
  222.                                 <div class="tag is-info">
  223.                                     You entered a staff member name that is not in the current list.
  224.                                 </div>
  225.                                 <div class="tag is-info">
  226.                                     Continue and when new staff members are loaded this will be validated.
  227.                                 </div>
  228.                             </div>
  229.  
  230.                             <div v-if="errors_staff_name[4]" class="tag is-danger">
  231.                                 You have to select a staff person or enter a name
  232.                             </div>
  233.                         </div>
  234.  
  235.  
  236.  
  237.                         <div class="record-attribute__body box hideit" id="driver 5">
  238.                             <div v-if="staff"
  239.                                  class="control is-expanded">
  240.                                 <autocomplete-vue
  241.                                         v-model="drivers[5]"
  242.                                         @input="driverFieldInput($event,5)"
  243.                                         id="driver-field 5"
  244.                                         class="driver-input-box"
  245.                                         inputClass="input is-normal is-fullwidth"
  246.                                         placeholder="Driver 5"
  247.                                         :list="staffForInvoiceCode"
  248.                                         :threshold="-1"
  249.                                         :from="'employee'"
  250.                                 ></autocomplete-vue>
  251.                             </div>
  252.  
  253.                             <div v-if="errorDrivers[5]" class="tag is-danger">
  254.                                 Person already selected
  255.                             </div>
  256.  
  257.                             <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
  258.                                 <div class="tag is-info">
  259.                                     You entered a staff member name that is not in the current list.
  260.                                 </div>
  261.                                 <div class="tag is-info">
  262.                                     Continue and when new staff members are loaded this will be validated.
  263.                                 </div>
  264.                             </div>
  265.  
  266.                             <div v-if="errors_staff_name[5]" class="tag is-danger">
  267.                                 You have to select a staff person or enter a name
  268.                             </div>
  269.                         </div>
  270.  
  271.  
  272.  
  273.                         <div class="record-attribute__body box hideit" id="driver 6">
  274.                             <div v-if="staff"
  275.                                  class="control is-expanded">
  276.                                 <autocomplete-vue
  277.                                         v-model="drivers[6]"
  278.                                         @input="driverFieldInput($event,6)"
  279.                                         id="driver-field 6"
  280.                                         class="driver-input-box"
  281.                                         inputClass="input is-normal is-fullwidth"
  282.                                         placeholder="Driver 6"
  283.                                         :list="staffForInvoiceCode"
  284.                                         :threshold="-1"
  285.                                         :from="'employee'"
  286.                                 ></autocomplete-vue>
  287.                             </div>
  288.  
  289.                             <div v-if="errorDrivers[6]" class="tag is-danger">
  290.                                 Person already selected
  291.                             </div>
  292.  
  293.                             <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
  294.                                 <div class="tag is-info">
  295.                                     You entered a staff member name that is not in the current list.
  296.                                 </div>
  297.                                 <div class="tag is-info">
  298.                                     Continue and when new staff members are loaded this will be validated.
  299.                                 </div>
  300.                             </div>
  301.  
  302.                             <div v-if="errors_staff_name[6]" class="tag is-danger">
  303.                                 You have to select a staff person or enter a name
  304.                             </div>
  305.                         </div>
  306.  
  307.  
  308.  
  309.                         <div class="record-attribute__body box hideit" id="driver 7">
  310.                             <div v-if="staff"
  311.                                  class="control is-expanded">
  312.                                 <autocomplete-vue
  313.                                         v-model="drivers[7]"
  314.                                         @input="driverFieldInput($event,7)"
  315.                                         id="driver-field 7"
  316.                                         class="driver-input-box"
  317.                                         inputClass="input is-normal is-fullwidth"
  318.                                         placeholder="Driver 7"
  319.                                         :list="staffForInvoiceCode"
  320.                                         :threshold="-1"
  321.                                         :from="'employee'"
  322.                                 ></autocomplete-vue>
  323.                             </div>
  324.  
  325.                             <div v-if="errorDrivers[7]" class="tag is-danger">
  326.                                 Person already selected
  327.                             </div>
  328.  
  329.                             <div v-if="staffNameEnteredMessageShow" id="staff-name-entered-message" class="has-text-centered">
  330.                                 <div class="tag is-info">
  331.                                     You entered a staff member name that is not in the current list.
  332.                                 </div>
  333.                                 <div class="tag is-info">
  334.                                     Continue and when new staff members are loaded this will be validated.
  335.                                 </div>
  336.                             </div>
  337.  
  338.                             <div v-if="errors_staff_name[7]" class="tag is-danger">
  339.                                 You have to select a staff person or enter a name
  340.                             </div>
  341.                         </div>
  342.  
  343.                     </div>
  344.  
  345.                     <div class="record-attribute" id="mileagestart">
  346.                         <div class="record-attribute__heading">
  347.                             <div class="subtitle is-4"> Mileage start </div>
  348.                         </div>
  349.  
  350.                         <div class="record-attribute__body box">
  351.                             <input v-model="mileage_start"
  352.                                    type="number"
  353.                                    placeholder="Mileage start"
  354.                                    class="input is-normal"
  355.                                    required>
  356.                         </div>
  357.                     </div>
  358.                    
  359.                     <div class="record-attribute" id="mileageend">
  360.                         <div class="record-attribute__heading">
  361.                             <div class="subtitle is-4"> Mileage end </div>
  362.                         </div>
  363.  
  364.                         <div class="record-attribute__body box">
  365.                             <input v-model="mileage_end"
  366.                                    type="number"
  367.                                    placeholder="Mileage end"
  368.                                    class="input is-normal"
  369.                                    v-on:focus="handleFocusMileageEnd"
  370.                                    >
  371.  
  372.                             <div v-if="errors.mileage" class="tag is-danger">
  373.                                 Ending mileage must be higher than starting value
  374.                             </div>
  375.                         </div>
  376.                     </div>
  377.  
  378.                     <div class="record-attribute">
  379.                         <div class="record-attribute__heading">
  380.                             <div class="subtitle is-4"> Date </div>
  381.                         </div>
  382.  
  383.                         <div class="record-attribute__body box">
  384.                             <date-picker :date="date" :option="option" :limit="limit"></date-picker>
  385.  
  386.                             <div v-if="errors.week_ending" class="tag is-danger"> You have to select a date from above </div>
  387.                         </div>
  388.                     </div>
  389.  
  390.                     <div class="record-attribute">
  391.                         <div class="record-attribute__heading">
  392.                             <div class="subtitle is-4"> Comments </div>
  393.                         </div>
  394.  
  395.                         <div class="record-attribute__body box">
  396.                             <textarea v-model="comments"
  397.                                       ref="comments"
  398.                                       placeholder="(Optional) Enter description"
  399.                                       class="textarea">
  400.                             </textarea>
  401.                         </div>
  402.                     </div>
  403.  
  404.                     <div class="field-body" id="submit">
  405.                         <button type="submit" class="button is-primary is-outlined">
  406.                             <span class="icon">
  407.                                 <i class="fa fa-check" aria-hidden="true"></i>
  408.                             </span>
  409.  
  410.                             <span>
  411.                                 Add record
  412.                             </span>
  413.                         </button>
  414.                     </div>
  415.                 </form>
  416.             </div>
  417.         </div>
  418.  
  419.         <!-- Invalid record modal !-->
  420.         <div v-if="invalidRecordModalIsVisible" class="modal is-active">
  421.             <div class="modal-background"></div>
  422.  
  423.             <div class="modal-card">
  424.                 <header class="modal-card-head">
  425.                     <p class="modal-card-title">Invalid record</p>
  426.  
  427.                     <button @click="invalidRecordModalIsVisible = false" class="delete"></button>
  428.                 </header>
  429.  
  430.                 <section class="modal-card-body">
  431.                     <div>
  432.                         The project code selected for this record is invalid.
  433.                     </div>
  434.  
  435.                     <div>
  436.                         You may <b>change</b> it or store the record on this device for now and review it later.
  437.                     </div>
  438.                 </section>
  439.  
  440.                 <footer class="modal-card-foot">
  441.                     <a @click="invalidRecordModalIsVisible = false" class="button">Cancel</a>
  442.                     <a @click.prevent="submit()" class="button"> Store </a>
  443.                     <a @click="updateCode" class="button is-success"> Change </a>
  444.                 </footer>
  445.             </div>
  446.         </div>
  447.  
  448.         <!-- Sign in modal !-->
  449.         <div v-if="signInModalIsVisible" class="modal is-active">
  450.             <div class="modal-background"></div>
  451.  
  452.             <div class="modal-card">
  453.                 <header class="modal-card-head">
  454.                     <p class="modal-card-title"> Login </p>
  455.  
  456.                     <button @click="signInModalIsVisible = false" class="delete"></button>
  457.                 </header>
  458.  
  459.                 <section class="modal-card-body">
  460.                     <div class="has-text-centered">
  461.                         <h4 class="subtitle is-4"> You are back online! </h4>
  462.  
  463.                         <div>
  464.                             You can now sign in to store records, or you can continue creating records with the
  465.                             username you set (<strong>{{ storedUsername }}</strong>) and save them in the device.
  466.                         </div>
  467.                     </div>
  468.                 </section>
  469.  
  470.                 <footer class="modal-card-foot">
  471.                     <a @click="signInModalIsVisible = false" class="button">Cancel</a>
  472.  
  473.                     <a @click.prevent="useUsername()" class="button is-primary is-outlined"> Use username </a>
  474.                     <a @click="login" class="button is-primary"> Sign in </a>
  475.                 </footer>
  476.             </div>
  477.         </div>
  478.  
  479.         <!-- Username modal !-->
  480.         <div v-if="usernameModalIsVisible" class="modal is-active">
  481.             <div class="modal-background"></div>
  482.  
  483.             <div class="modal-card">
  484.                 <header class="modal-card-head">
  485.                     <p class="modal-card-title">Auth</p>
  486.  
  487.                     <button @click="usernameModalIsVisible = false" class="delete"></button>
  488.                 </header>
  489.  
  490.                 <section class="modal-card-body">
  491.                     <h5 class="subtitle is-5">
  492.                         In order to store records on this device a username is required.
  493.                     </h5>
  494.  
  495.                     <article class="message is-danger">
  496.                         <div class="message-header">
  497.                             <p><strong>Attention</strong>!</p>
  498.                         </div>
  499.                         <div class="message-body">
  500.                             Make sure that your username is <strong>correct</strong> because if it is not then all
  501.                             the records that you inserted with this username will be <strong>deleted</strong>.
  502.                         </div>
  503.                     </article>
  504.  
  505.                     <article class="media content" v-if="storedUsername">
  506.                         <p class="media-content"> Current username found in the device store is <strong>{{ storedUsername }}</strong></p>
  507.  
  508.                         <div class="media-right">
  509.                             <a @click="username = storedUsername" class="button is-primary is-outlined"> Set </a>
  510.                         </div>
  511.                     </article>
  512.  
  513.                     <article class="media">
  514.                         <input v-model="username"
  515.                                class="input media-content"
  516.                                placeholder="Enter new username">
  517.                     </article>
  518.                 </section>
  519.  
  520.                 <footer class="modal-card-foot">
  521.                     <a @click="usernameModalIsVisible = false" class="button">Cancel</a>
  522.                     <a @click="setUsername"
  523.                        :disabled=" ! username"
  524.                        class="button is-primary is-outlined"> Set username </a>
  525.                 </footer>
  526.             </div>
  527.         </div>
  528.     </div>
  529. </template>
  530.  
  531. <script>
  532.    
  533.  
  534.     import autosize from 'autosize'
  535.     import moment from 'moment';
  536.     import Datepicker from '../components/vendor/vue-datepicker'
  537.  
  538.     import {isAuth} from "../utils/Auth";
  539.     import Cache from "../utils/Cache";
  540.     import {arrayDiff, arrayToObject, copyArray, exists} from "../utils/helpers";
  541.     import {getDatePickerOptions,getCurrentDate,getTommorowsFullDate} from "../utils/Config";
  542.  
  543.     import username from "../mixins/Username"
  544.     import connection from "../mixins/Connection";
  545.     import {mapState, mapMutations} from "vuex";
  546.     import LocalStorage from "../services/LocalStorage";
  547.     import Redirect from "../utils/Redirect";
  548.     import Date from "../utils/Date";
  549.  
  550.     const driverPrefix = "driver ";
  551.  
  552.  
  553.     function deleteSpaces(text){
  554.                 let toReturn = text;
  555.                 while(toReturn.includes(' ')){
  556.                     toReturn = toReturn.replace(' ','');
  557.                 }
  558.                 return toReturn;
  559.             }
  560.  
  561.  
  562.     function showNextDriverFieldFor(field,nextIndex=null){
  563.         let finalID = null;
  564.         if(nextIndex!=null){
  565.             finalID = driverPrefix+String(nextIndex+1);
  566.         }
  567.         else{
  568.             let nextIndexId = String(parseFloat(focusedField.placeholder.substr(focusedField.placeholder.length - 1))+1);
  569.             let prefix = focusedField.placeholder.split(" ")[0].toLowerCase();
  570.             finalID = prefix+" "+nextIndexId;
  571.         }
  572.         showElement(document.getElementById(finalID));
  573.     }
  574.  
  575.  
  576.     function hideOtherVehicleType(){
  577.         let otherVehicleBox=document.getElementById("other_vehicle_box");
  578.         if(otherVehicleBox!=null){
  579.             if(!otherVehicleBox.classList.contains("hideit")){
  580.                 otherVehicleBox.classList.add("hideit");
  581.             }
  582.         }
  583.     }
  584.  
  585.     function showOtherVehicleType(){
  586.         let otherVehicleBox=document.getElementById("other_vehicle_box");
  587.         if(otherVehicleBox!=null){
  588.             if(otherVehicleBox.classList.contains("hideit")){
  589.                 otherVehicleBox.classList.remove("hideit");
  590.             }
  591.         }
  592.     }
  593.  
  594.  
  595.     function setOtherVehicleTypeFieldValue(value){
  596.         let otherVehicleTypeFieldValue = document.getElementById("other_vehicle_field");
  597.         otherVehicleTypeFieldValue.value=value;
  598.     }
  599.  
  600.  
  601.     export default {
  602.         data() {
  603.             return {
  604.                 vehicle_types: ["Hatchback","Sedan","MPV","SUV","Crossover","Coupe","Convertible","Other"],
  605.                 vehicle_type_model: null,
  606.                 mileage_start: '',
  607.                 mileage_end: '',
  608.                 vehicle_type: 'Hatchback',
  609.                 vehicle_registration: '',
  610.                 errorDrivers: [false,false,false,false,false,false,false,false],
  611.                 errors_staff_name: [false,false,false,false,false,false,false,false],
  612.                 drivers: ['','','','','','','',''],
  613.                 week_ending: '',
  614.                 comments: '',
  615.                 created_at: '',
  616.  
  617.                 errors: {
  618.                     invoice_code: false,
  619.                     week_ending: false,
  620.                     mileage: false,
  621.                 },
  622.  
  623.                 // Objects
  624.                 staffForInvoiceCode: [],
  625.                 vehicle_registrations: [],
  626.                 record: {},
  627.  
  628.                 showNotification: true,
  629.  
  630.                 staff_field: '',
  631.                 staffNameEnteredMessageShow: false,
  632.  
  633.                 // Datepicker
  634.                 date: {
  635.                     time: ''
  636.                 },
  637.                 option: getDatePickerOptions(),
  638.                 limit: [{
  639.                     type: 'weekday',
  640.                     available: [1,2,3,4,5]
  641.                 },
  642.                 {
  643.                     type: 'fromto',
  644.                     from: '1970-08-01',
  645.                     to: getTommorowsFullDate()
  646.                 }
  647.                 ],
  648.  
  649.                 signInModalIsVisible: false,
  650.                 invalidRecordModalIsVisible: false,
  651.  
  652.                 useUsernameSet: false,
  653.             }
  654.         },
  655.  
  656.         components: {
  657.             'date-picker': Datepicker,
  658.             'autocomplete-vue': require('../components/vendor/autocomplete-vue.vue')
  659.         },
  660.  
  661.         mixins: [
  662.             username,
  663.             connection
  664.         ],
  665.  
  666.         methods: {
  667.             idOfName(name){
  668.                 for(let i=0;i<this.staffForInvoiceCode.length;i++){
  669.                     if(this.staffForInvoiceCode[i].name===name){
  670.                         return this.staffForInvoiceCode[i].refid;
  671.                     }
  672.                 }
  673.                 return '';
  674.             },
  675.             resetFieldAndHideFieldByIndex(index){
  676.                 this.drivers[index]='';
  677.                 let driverFieldBox = document.getElementById(driverPrefix+String(index));
  678.                 hideElement(driverFieldBox);
  679.             },
  680.             hideAndResetFieldsFromIndex(index){
  681.                 for(let i=index+1;i<this.drivers.length;i++){
  682.                     this.resetFieldAndHideFieldByIndex(i);
  683.                 }
  684.             },
  685.             driverFieldInput(event,index){
  686.                 let value = event;
  687.                 if(value===""){
  688.                     this.hideAndResetFieldsFromIndex(index);
  689.                     this.errorDrivers[index]=false;
  690.                 }
  691.                 else{
  692.                     this.checkStaffNames();
  693.                     if(this.drivers.slice(0,index).includes(value)){
  694.                         this.errorDrivers[index]=true;
  695.                     }
  696.                     else{
  697.                         showNextDriverFieldFor(null,index);
  698.                         this.errorDrivers[index]=false;
  699.                     }
  700.                 }
  701.             },
  702.             handleFocusMileageEnd(){
  703.                 let startMileageBox = document.getElementById("mileagestart");
  704.                 let startMileageField = startMileageBox.childNodes[startMileageBox.childNodes.length-1].firstChild;
  705.  
  706.                 let endMileageBox = document.getElementById("mileageend");
  707.                 let endMileageField = endMileageBox.childNodes[endMileageBox.childNodes.length-1].firstChild;
  708.  
  709.                 if( (this.mileage_start!=""&&this.mileage_end==="")||((parseFloat(endMileageField.value)<parseFloat(startMileageField.value) || endMileageField.value==="")&&(this.mileage_end<this.mileage_start)) ){
  710.                     this.mileage_end=this.mileage_start;
  711.                 }
  712.             },
  713.             toggleDropdown (event) {
  714.                 event.currentTarget.classList.toggle('is-active')
  715.             },
  716.             vehicleTypeSelected(event){
  717.                 if(event!=null){
  718.                     if(event.target.value!="Other"){
  719.                         this.vehicle_type = event.target.value;
  720.                         hideOtherVehicleType();
  721.                     }
  722.                     else{
  723.                         setOtherVehicleTypeFieldValue("");
  724.                         showOtherVehicleType();
  725.                         this.vehicle_type="";
  726.                     }
  727.                 }
  728.             },
  729.             bindListeners() {  
  730.                 Event.$on('closeModal', () => {
  731.                     this.signInModalIsVisible = false;
  732.                     this.invalidRecordModalIsVisible = false;
  733.                 });
  734.  
  735.                 Event.$on('submitModal', () => {
  736.                     if ( ! this.invalidRecordModalIsVisible) {
  737.                         return;
  738.                     }
  739.  
  740.                     this.updateCode();
  741.                 });
  742.                
  743.  
  744.                 Event.$on('vehicle-registration-select', function (selectedRegistration) {
  745.                     this.vehicle_type = selectedRegistration.vehicle_type;
  746.                     this.mileage_start = selectedRegistration.last_mileage_end;
  747.                 });
  748.  
  749.             },
  750.             translateNamesToIds(){
  751.                 for(let i=0;i<this.drivers.length;i++){
  752.                     this.drivers[i] = this.idOfName(this.drivers[i]);
  753.                 }
  754.             },
  755.             updateCode() {
  756.                 let record = {
  757.                     mileage_start:          this.mileage_start,
  758.                     mileage_end:            this.mileage_end,
  759.                     vehicle_type:           this.vehicle_type,
  760.                     vehicle_registration:   this.vehicle_registration,
  761.                     drivers:                this.drivers,
  762.                     comments:               this.comments,
  763.                     week_ending:            this.date.time,
  764.                     created_at:   moment().format('YYYY-MM-DD HH:mm:ss'),
  765.                 };
  766.                 this.$store.dispatch('setRecordBeforeChangingProjectCode', record);
  767.  
  768.                 Redirect.toAddRecord(this.$router);
  769.             },
  770.  
  771.             changeCode() {
  772.                 this.clearStartWithData();
  773.  
  774.                 Redirect.toAddRecord(this.$router);
  775.             },
  776.  
  777.             submit() {
  778.                 this.translateNamesToIds();
  779.  
  780.                 if ( ! this.validInputFields()) {
  781.                     return;
  782.                 }
  783.                 let data = {
  784.                     invoice_code:           this.invoice_code,
  785.                     mileage_start:          this.mileage_start,
  786.                     mileage_end:            this.mileage_end,
  787.                     vehicle_type:           this.vehicle_type,
  788.                     vehicle_registration:   this.vehicle_registration,
  789.                     drivers:                JSON.stringify(this.drivers),
  790.                     comments:               this.comments,
  791.                     week_ending:            this.date.time,
  792.                     created_at:   moment().format('YYYY-MM-DD HH:mm:ss'),
  793.                 };
  794.  
  795.                 if (this.projectCodeSetIsNew()) {
  796.                     this.showInvalidModal();
  797.  
  798.                     return;
  799.                 }
  800.  
  801.                 this.invalidRecordModalIsVisible = false;
  802.  
  803.                 if (this.recordReadyToBePosted()) {
  804.                     data.creator_id = this.auth_user_id;
  805.  
  806.                     this.sendToServer(data);
  807.                     return;
  808.                 }
  809.  
  810.                 if (this.showSignInModal()) {
  811.                     this.checkConnection()
  812.                         .then(() => {
  813.                             this.signInModalIsVisible = true;
  814.                         })
  815.                         .catch(() => {
  816.                             this.storeLocally(data);
  817.                         });
  818.  
  819.                     return;
  820.                 }
  821.  
  822.                 this.storeLocally(data);
  823.             },
  824.             isStaffMember(member){
  825.                 let found=false;
  826.                 this.staffForInvoiceCode.forEach(function(staffMember){
  827.                         if(member===staffMember['name']){
  828.                             found = true;
  829.                             return true;
  830.                         }
  831.                 });
  832.                 return found;
  833.             },
  834.             checkStaffNames(){
  835.                 for(let i=0;i<this.drivers.length;i++){
  836.                     if(this.drivers[i]!=""){
  837.                         this.errors_staff_name[i]=!this.isStaffMember(this.drivers[i]);
  838.                     }
  839.                 }
  840.             },
  841.             validInputFields() {
  842.                 if ( ! this.date.time) {
  843.                     this.errors.week_ending = true;
  844.  
  845.                     return false;
  846.                 }
  847.  
  848.                 if(this.mileage_end===""||this.mileage_end==="0"||this.mileage_end===0){
  849.                     this.mileage_end=0;
  850.                     this.errors.mileage = false;
  851.                 }
  852.                 else{  
  853.                     if(parseInt(this.mileage_end)<parseInt(this.mileage_start)){
  854.                         this.errors.mileage = true;
  855.                         return false;
  856.                     }
  857.                 }
  858.                 return true;
  859.             },
  860.  
  861.             sendToServer(record) {
  862.                 axios.post('subsistence-record', record)
  863.                     .then(({data}) => {
  864.                        this.subsistenceRecordSubmitted(data);
  865.                     })
  866.                     .catch((error) => {
  867.                         window.error = error;
  868.                         this.storeLocally(record);
  869.  
  870.                         if (window.DEBUGGING) {
  871.                             Flash('Error: ' + JSON.stringify(error), 12, 'error');
  872.                         }
  873.                     });
  874.             },
  875.  
  876.             storeLocally(record) {
  877.                 this.setCreator(record);
  878.                 this.setErrors(record);
  879.                 this.clearInputFields();
  880.                 this.emitStoringEvent(record);
  881.  
  882.                 this.startWithLatestRecord(record);
  883.             },
  884.  
  885.             subsistenceRecordSubmitted(data) {
  886.                 if (data === "duplicate") {
  887.                     this.subsistenceRecordSubmitResponseDuplicate();
  888.                 } else if (data.id) {
  889.                     this.subsistenceRecordSubmitResponseSuccess(data);
  890.                 } else {
  891.                     this.subsistenceRecordSubmitResponseErrors(data);
  892.                 }
  893.             },
  894.  
  895.             subsistenceRecordSubmitResponseDuplicate() {
  896.                 Flash("Record is already stored");
  897.  
  898.                 this.clearInputFields();
  899.  
  900.                 this.setFormStartValues('latest_record');
  901.             },
  902.  
  903.             subsistenceRecordSubmitResponseSuccess(data) {
  904.                 this.newRecordPosted(data);
  905.                 Flash("Record saved successfully", 8);
  906.  
  907.                 this.clearInputFields();
  908.             },
  909.  
  910.             subsistenceRecordSubmitResponseErrors(data) {
  911.                 if (data.errors) {
  912.                     this.errors = data.errors;
  913.                 }
  914.  
  915.                 if (data.projects) {
  916.                     this.$store.dispatch('addProjects', data.projects);
  917.  
  918.                     Cache.clearProjects(this);
  919.                     Cache.storeProjects(this, data.projects);
  920.                 }
  921.  
  922.                 if (data.staff) {
  923.                     this.$store.dispatch('addStaff', data.staff);
  924.  
  925.                     Cache.clearStaff(this);
  926.                     Cache.storeStaff(this, data.staff);
  927.                 }
  928.  
  929.                 if (data.vehicle_registrations) {
  930.                     this.$store.dispatch('addVehicles', data.vehicle_registrations);
  931.                    
  932.                     Cache.clearVehicles(this);
  933.                     Cache.storeVehicles(this, data.vehicle_registrations);
  934.                 }
  935.             },
  936.  
  937.             newRecordPosted(record) {
  938.                 this.$store.dispatch('addStoredRecord', record);
  939.  
  940.                 this.startWithLatestRecord(record);
  941.             },
  942.  
  943.             clearInputFields() {
  944.                 this.date.time = '';
  945.                 this.staff_field = '';
  946.                 this.mileage_start = '';
  947.                 this.mileage_end = '';
  948.                 this.vehicle_type = '';
  949.                 this.vehicle_registration = '';
  950.                 this.drivers = [];
  951.                 this.comments = '';
  952.                 this.staffNameEnteredMessageShow = false;
  953.             },
  954.  
  955.             setFormStartValues(payload) {
  956.                if (payload === 'default') {
  957.                    this.fillFormWithDefaultValues();
  958.  
  959.                    return;
  960.                }
  961.  
  962.                if (payload === 'latest_record') {
  963.                    this.fillFormWithLatestRecordValues();
  964.  
  965.                    return;
  966.                }
  967.             },
  968.  
  969.             fillFormWithLatestRecordValues() {
  970.                 //this.date.time = this.latestRecord.week_ending;
  971.             },
  972.  
  973.             fillFormWithDefaultValues() {
  974.                 this.date.time = moment().format('DD MMMM YYYY');
  975.                
  976.                 //this.date.time = Date.getClosestPassedFriday();
  977.             },
  978.             capitalize(string){
  979.                 if (typeof string !== 'string') return ''
  980.                 return string.charAt(0).toUpperCase() + string.slice(1)
  981.             },
  982.             setFristDriverTo(name){
  983.                 this.drivers[1]=name;
  984.             },
  985.             getLocalStorageUserName(){
  986.                 return localStorage.getItem('casUser');
  987.             },
  988.             getLocalStorageUser(reverse){
  989.                 let user_name = this.getLocalStorageUserName();
  990.                 for(let i=0;i<this.staffForInvoiceCode.length;i++){
  991.                     if(this.staffForInvoiceCode[i].user_name===user_name){
  992.                         return this.staffForInvoiceCode[i].name;
  993.                     }
  994.                 }
  995.                
  996.             },
  997.             assignStaffForInvoiceCode() {
  998.                
  999.                 if ( ! this.staff) {
  1000.                     this.staffForInvoiceCode = this.all_staff;    
  1001.                 } else {
  1002.                     this.staffForInvoiceCode = [];
  1003.                     let staffNotOnProject = arrayDiff(this.all_staff, this.staff, 'refid');
  1004.                     copyArray(this.staffForInvoiceCode, this.staff);
  1005.                     copyArray(this.staffForInvoiceCode, staffNotOnProject);
  1006.                 }
  1007.  
  1008.                 if(this.drivers[1]===""){
  1009.                     this.setFristDriverTo(this.getLocalStorageUser());
  1010.                 }
  1011.             },
  1012.  
  1013.             assignVehicles(){
  1014.                 if ( ! this.vehicles) {
  1015.                     this.vehicle_registrations = this.all_vehicles;
  1016.                 } else {
  1017.                     this.vehicles = [];
  1018.                     copyArray(this.vehicle_registrations, this.all_vehicles);
  1019.                 }
  1020.             },
  1021.  
  1022.             setErrors(record) {
  1023.                 if ( ! record.hasOwnProperty('errors')) {
  1024.                     record.errors = {};
  1025.                 }
  1026.  
  1027.                 if ( ! record.creator_id) {
  1028.                     record.errors.creator_id = "This record has been created while being a guest. Sign in to validate";
  1029.                 }
  1030.  
  1031.                 if (this.invoice_code_type === 'new') {
  1032.                     record.errors.invoice_code = [];
  1033.                     record.errors.invoice_code[0] = 'The selected value does not exist or is no longer valid.';
  1034.                 }
  1035.             },
  1036.  
  1037.             setCreator(record) {
  1038.                 if (this.auth_user_id) {
  1039.                     record.creator_id = this.auth_user_id;
  1040.                     record.creator_username = this.auth_username;
  1041.                 } else if (this.storedUsername) {
  1042.                     record.creator_username = this.storedUsername;
  1043.                 }
  1044.             },
  1045.  
  1046.             emitStoringEvent(record) {
  1047.                 if (this.invoice_code_type === 'new' || ! record.invoice_code ) {
  1048.                     Event.$emit('addInvalidRecord', record);
  1049.                 } else {
  1050.                     Event.$emit('addValidRecord', record);
  1051.                 }
  1052.             },
  1053.             login() {
  1054.                 this.storeRecordForAfterLogin();
  1055.  
  1056.                 this.$router.push('/login/from-add-details');
  1057.             },
  1058.  
  1059.             useUsername() {
  1060.                 this.useUsernameSet = true;
  1061.                 this.signInModalIsVisible = false;
  1062.  
  1063.                 Flash('You will be using your username to create records.');
  1064.  
  1065.                 let data = {
  1066.                     invoice_code:           this.invoice_code,
  1067.                     mileage_start:          this.mileage_start,
  1068.                     mileage_end:            this.mileage_end,
  1069.                     vehicle_type:           this.vehicle_type,
  1070.                     vehicle_registration:   this.vehicle_registration,
  1071.                     drivers:                this.drivers,
  1072.                     comments:               this.comments,
  1073.                     week_ending:            this.date.time,
  1074.                     created_at:   moment().format('YYYY-MM-DD HH:mm:ss'),
  1075.                 };
  1076.  
  1077.                 this.storeLocally(data);
  1078.             },
  1079.  
  1080.             storeRecordForAfterLogin() {
  1081.                 let record = {
  1082.                     invoice_code:           this.invoice_code,
  1083.                     mileage_start:          this.mileage_start,
  1084.                     mileage_end:            this.mileage_end,
  1085.                     vehicle_type:           this.vehicle_type,
  1086.                     vehicle_registration:   this.vehicle_registration,
  1087.                     drivers:                this.drivers,
  1088.                     comments:               this.comments,
  1089.                     week_ending:            this.date.time,
  1090.                     created_at:   moment().format('YYYY-MM-DD HH:mm:ss'),
  1091.                 };
  1092.  
  1093.                 this.$localForage.setItem('record_before_login', record);
  1094.                 this.$localForage.setItem('redirect_after_login_to_add_details', true);
  1095.  
  1096.                 Flash('Your record will be sent to the server after you sign in.', 6);
  1097.             },
  1098.  
  1099.             loadRecordBeforeLogin() {
  1100.                 let vm = this;
  1101.  
  1102.                 this.$localForage
  1103.                     .getItem('record_before_login')
  1104.                     .then(function(record) {
  1105.                         if (record) {
  1106.                             vm.invoice_code = record.invoice_code;
  1107.                             vm.mileage_start = record.mileage_start;
  1108.                             vm.mileage_end = record.mileage_end;
  1109.                             vm.vehicle_type = record.vehicle_type;
  1110.                             vm.vehicle_registration = record.vehicle_registration;
  1111.                             vm.drivers = record.drivers;
  1112.                             vm.comments = record.comments;
  1113.                             vm.date.time = record.week_ending;
  1114.  
  1115.                             vm.$localForage.removeItem('record_before_login');
  1116.  
  1117.                             Flash('Your previously created record has been loaded!');
  1118.  
  1119.                             vm.submit();
  1120.                         }
  1121.                     })
  1122.                     .catch((error) => {
  1123.                         if (window.DEBUGGING) {
  1124.                             Flash('Error: ' + JSON.stringify(error), 12, 'error');
  1125.                         }
  1126.                     });
  1127.             },
  1128.  
  1129.             setRecordBeforeChangingProjectCode() {
  1130.                 if (this.record_before_changing_project_code && Object.keys(this.record_before_changing_project_code).length > 0) {
  1131.                     let record = JSON.parse(JSON.stringify(this.record_before_changing_project_code));
  1132.                     this.mileage_start       = record.mileage_start;
  1133.                     this.mileage_end         = record.mileage_end;
  1134.                     this.vehicle_type        = record.vehicle_type;
  1135.                     this.vehicle_registration= record.vehicle_registration;
  1136.                     this.drivers             = record.drivers;
  1137.                     this.comments            = record.comments;
  1138.                     this.date.time           = record.week_ending;
  1139.  
  1140.                     this.$store.dispatch('removeRecordBeforeChangingProjectCode');
  1141.  
  1142.                     Flash('Record information loaded from the session before changing the project code.');
  1143.                 }
  1144.             },
  1145.  
  1146.             projectCodeSetIsNew() {
  1147.                 return this.invoice_code_type === 'new' && ! this.invalidRecordModalIsVisible;
  1148.             },
  1149.  
  1150.             showInvalidModal() {
  1151.                 this.invalidRecordModalIsVisible = true;
  1152.             },
  1153.  
  1154.             showSignInModal() {
  1155.                 return ! this.auth_user_id &&
  1156.                     this.invoice_code_type !== 'new' &&
  1157.                     ! this.useUsernameSet;
  1158.             },
  1159.  
  1160.             recordReadyToBePosted() {
  1161.                 return this.isAuth && this.invoice_code_type !== 'new';
  1162.             },
  1163.  
  1164.             clearStartWithData() {
  1165.                 this.setLatestRecord({});
  1166.             },
  1167.  
  1168.             startWithLatestRecord(record) {
  1169.                 LocalStorage.setLatestRecord(record);
  1170.                 this.setLatestRecord(record);
  1171.  
  1172.                 this.setFormStartValues('latest_record');
  1173.             },
  1174.  
  1175.             ...mapMutations([
  1176.                 'setLatestRecord'
  1177.             ])
  1178.         },
  1179.  
  1180.         computed: {
  1181.             invoice_code: {
  1182.                 get() {
  1183.                     return this.$store.getters.getInvoiceCode;
  1184.                 },
  1185.  
  1186.                 set(invoice_code) {}
  1187.             },
  1188.  
  1189.             invoice_code_type() {
  1190.                 return this.$store.getters.getInvoiceCodeType;
  1191.             },
  1192.  
  1193.             online() {
  1194.                 return this.$store.getters.getOnlineStatus;
  1195.             },
  1196.  
  1197.             isAuth() {
  1198.                 return this.$store.getters.checkAuth;
  1199.             },
  1200.  
  1201.             staff_ready() {
  1202.                 return this.all_staff && this.all_staff.length > 0;
  1203.             },
  1204.  
  1205.             vehicles_ready() {
  1206.                 return this.vehicles && this.vehicles.length > 0;
  1207.             },
  1208.  
  1209.             staff() {
  1210.                 return this.$store.getters.getInvoiceCodeStaff;
  1211.             },
  1212.  
  1213.             all_staff() {
  1214.                 return this.$store.getters.getStaff;
  1215.             },
  1216.  
  1217.             all_vehicles() {
  1218.                 return this.$store.getters.getVehicles;
  1219.             },
  1220.  
  1221.             auth_user_id() {
  1222.                 return this.$store.getters.getUserId;
  1223.             },
  1224.  
  1225.             auth_username() {
  1226.                 return this.$store.getters.getAuthUsername;
  1227.             },
  1228.  
  1229.             record_before_changing_project_code() {
  1230.                 return this.$store.getters.getRecordBeforeChangingProjectCode;
  1231.             },
  1232.  
  1233.             triedAuthAlready() {
  1234.                 return this.$store.getters.getTriedAuthAlready;
  1235.             },
  1236.  
  1237.             storedUsername() {
  1238.                 return this.$store.getters.getUsername;
  1239.             },
  1240.  
  1241.             withUsername() {
  1242.                 return ! this.online && ! this.isAuth && this.storedUsername;
  1243.             },
  1244.  
  1245.             ...mapState([
  1246.                 'latestRecord',
  1247.             ])
  1248.         },
  1249.  
  1250.         watch: {
  1251.             staff_ready() {
  1252.                 if (this.staff_ready) {
  1253.                     this.assignStaffForInvoiceCode();
  1254.                 }
  1255.             },
  1256.             vehicles_ready() {
  1257.                 if (this.vehicles_ready) {
  1258.                     this.assignVehicles();
  1259.                 }
  1260.             },
  1261.  
  1262.             isAuth() {
  1263.                 if (this.isAuth) {
  1264.                     this.loadRecordBeforeLogin();
  1265.                 }
  1266.             },
  1267.  
  1268.             all_staff() {
  1269.                 if (this.staff_ready) {
  1270.                     this.assignStaffForInvoiceCode();
  1271.                 }
  1272.             },
  1273.            
  1274.             all_vehicles(){
  1275.                 if (this.vehicles_ready) {
  1276.                     this.assignVehicles();
  1277.                 }
  1278.             },
  1279.  
  1280.             record_before_changing_project_code() {
  1281.                 this.setRecordBeforeChangingProjectCode();
  1282.             },
  1283.  
  1284.             triedAuthAlready(triedAuthAlready) {
  1285.                 if (triedAuthAlready) {
  1286.                     this.submit();
  1287.                 }
  1288.             },
  1289.  
  1290.             latestRecord() {
  1291.                 if (exists(this.latestRecord)) {
  1292.                     this.setFormStartValues('latest_record');
  1293.                 }
  1294.             }
  1295.         },
  1296.  
  1297.         mounted() {
  1298.  
  1299.             if (this.staff_ready) {
  1300.                 this.assignStaffForInvoiceCode();
  1301.             }
  1302.  
  1303.             if (this.vehicles_ready) {
  1304.                 this.assignVehicles();
  1305.             }
  1306.            
  1307.             this.$localForage.getItem('vehicles').then(
  1308.                 (vehicles) => {
  1309.                     this.vehicle_registrations = vehicles;
  1310.                 }
  1311.             );
  1312.            
  1313.             this.bindListeners();
  1314.  
  1315.             this.setFormStartValues('default');
  1316.  
  1317.             if (exists(this.latestRecord)) {
  1318.                 this.setFormStartValues('latest_record');
  1319.             }
  1320.  
  1321.             this.loadRecordBeforeLogin();
  1322.  
  1323.             this.setRecordBeforeChangingProjectCode();
  1324.  
  1325.             autosize(this.$refs.comments);
  1326.            
  1327.         },
  1328.  
  1329.         destroyed() {
  1330.             Event.$off('submitModal');
  1331.             Event.$off('closeModal');
  1332.         }
  1333.     }
  1334.  
  1335.  
  1336.  
  1337.  
  1338. function hideElement(element){
  1339.     element.classList.add("hideit");
  1340. }
  1341.  
  1342. function showElement(element){
  1343.     element.classList.remove("hideit");
  1344. }
  1345.  
  1346. function resetValue(element){
  1347.     element.value="";
  1348. }    
  1349.  
  1350. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top