new Changes

resources/js/vue/components/modal/cycle/Show.vue

@@ -0,0 +1,124 @@
+
+<template>
+    <v-container grid-list-xs>
+        <material-card color="black" title="Show Cycle">
+            <v-layout align-left justify-left wrap class="px-5 my-3">
+                <h3 class="ml-3">Common Info</h3>
+                <v-flex xs12>
+                    <hr class="v-divider theme--light">
+                </v-flex>
+                <v-layout row wrap class="ml-4">
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">UniqueId :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.unique_id }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Name :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Result :</span>
+                            <v-icon v-if="data.result == 'Pass'" class="green--text ml-2 caption">fas fa-check</v-icon>
+                            <v-icon v-if="data.result == 'Fail'" class="pink--text ml-2 caption">fas fa-times</v-icon>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">verify :</span>
+                            <v-icon v-if="data.verified == 'Verified'" class="green--text ml-2 caption">fas fa-check</v-icon>
+                            <v-icon v-if="data.verified == 'NotVerified'" class="pink--text ml-2 caption">fas fa-times</v-icon>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Register User :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Date :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
+                        </div>
+                    </v-flex>
+                </v-layout>
+            </v-layout>
+            <v-layout align-left justify-left wrap class="px-5 my-3">
+                <h3 class="ml-3">Packages</h3>
+                <v-flex xs12>
+                    <hr class="v-divider theme--light">
+                </v-flex>
+                <v-layout row wrap class="ml-4">
+                    <v-flex xs12 md6 sm6>
+                        <div class v-for="(packag, key) in data.packages" :key="key">
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ key+1 + ": " + packag.name }}</span>
+                        </div>
+                    </v-flex>
+                </v-layout>
+            </v-layout>
+            <v-layout row wrap align-center justify-center v-if="$hasRole('Admin|Supervisor')">
+                <v-flex
+                    class
+                    xs12
+                    md2
+                    sm2
+                    v-if="data.verified == 'NotVerified'"
+                    @click="verify(data.id)"
+                >
+                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+                        <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+                        <span class="white--text">Verify</span>
+                    </v-btn>
+                </v-flex>
+                <v-flex class xs12 md2 sm2 v-else>
+                    <v-btn
+                        class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
+                        @click="verify(data.id)"
+                    >
+                        <v-icon class="black--text mr-2 caption">fas fa-check</v-icon>
+                        <span class="black--text">UnVerify</span>
+                    </v-btn>
+                </v-flex>
+            </v-layout>
+        </material-card>
+    </v-container>
+</template>
+<script>
+export default {
+    data: () => ({
+        data: {}
+    })
+};
+</script>
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
+export default {
+    data: () => ({
+        data : {}
+    }),
+    methods: {
+        ...mapMutations("modal", ["closeModal", "setResultModal"]),
+        async verify(id) {
+            const result = await ApiService.post(urls.verifyCycle(id));
+            if (result && result.status == 200) {
+                this.setResultModal(result.data.data);
+                this.closeModal();
+            }
+        }
+    },
+    created() {
+        this.data = this.getModalProperties.result.data.data;
+        
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalProperties"])
+    }
+};
+</script>

resources/js/vue/config/urls.js

@@ -9,6 +9,7 @@ const urls = {
     statistics: `/TestResults/chart`,
     storeTestType: "/TestTypes",
     storePackage: "/Packages",
+    storeCycle: "/Packages",
     storeItem: "/Items",
     listTestTypeName: "/TestTypes/ListNames",
     getInputs: `/GetInputs`,
@@ -106,12 +107,33 @@ const urls = {
     verifyPackage: function(id) {
         return `/Package/Verify/${id}`;
     },
+    listCycle: function(filter) {
+        return "/Cycles" + filter;
+    },
+    showCycle: function(id) {
+        return `/Cycles/${id}`;
+    },
+    editCycle: function(id) {
+        return `/Cycles/${id}/edit`;
+    },
+    updateCycle: function(id) {
+        return `/Cycles/${id}`;
+    },
+    removeCycle: function(id) {
+        return `Cycles/${id}`;
+    },
+    verifyCycle: function(id) {
+        return `/Cycle/Verify/${id}`;
+    },
     listItem: function(filter) {
         return "/Items" + filter;
     },
     listAllItem: function() {
         return "/GetItems";
     },
+    listAllPackage: function() {
+        return "/GetPackages";
+    },
     showItem: function(id) {
         return `/Items/${id}`;
     },

resources/js/vue/router/paths.js

@@ -151,6 +151,21 @@ export default [
     name: 'EditPackage',
     view: 'Package/AddEdit'
   },
+  {
+    path: '/add-cycle',
+    name: 'AddCycle',
+    view: 'Cycle/AddEdit'
+  },
+  {
+    path: '/cycles',
+    name: 'AllCycle',
+    view: 'Cycle/List'
+  },
+  {
+    path: '/cycle/:cycle/edit',
+    name: 'EditCycle',
+    view: 'Cycle/AddEdit'
+  },
   {
     path: '/add-Item',
     name: 'AddItem',

resources/js/vue/views/Auth/Register.vue

@@ -27,13 +27,22 @@
                   :rules="[rules.required]"
                 ></v-select>
               </v-flex>
-              <v-flex xs12 md2 sm2>
+             <v-flex xs2 md2 sm2>
                 <v-text-field
-                  name="cell_number"
+                  v-model="country_code"
+                  name="country_code"
+                  label="Country Code"
+                  color="black"
+                  :rules="[rules.required, rules.countryCode]"
+                  mask="####"
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs10 md10 sm10>
+                <v-text-field
+                  v-model="cell_number"
+                  name="cellnumber"
                   label="Cell Number"
-                  v-model="form.cell_number"
                   color="black"
-                  class="pa-2"
                   :rules="[rules.required, rules.cellNumberCounter]"
                   mask="#### ### ####"
                 ></v-text-field>
@@ -103,7 +112,8 @@ export default {
         required: value => !!value || "Required.",
         nameCounter: value => (value && value.length >= 5) || "Min 5 characters",
         passCounter: value => (value && value.length >= 8) || "Min 8 characters",
-        cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
+        cellNumberCounter: value => (value && value.length == 11) || "must 11 characters",
+        countryCode: value => (value && value.length == 4) || "must 4 characters for example (0098)"
       }
     };
   },

resources/js/vue/views/Cycle/AddEdit.vue

@@ -0,0 +1,130 @@
+<template>
+    <v-form ref="form">
+        <v-container grid-list-xs fluid>
+            <material-card color="black" title="Add Cycle">
+                <v-layout align-center justify-center wrap class="px-5 my-3">
+                    <v-flex xs12 sm4 md4>
+                        <v-text-field
+                            name="name"
+                            label="Name"
+                            color="black"
+                            v-model="formData.name"
+                            :rules="[rules.required, rules.counter]"
+                            class="pa-2"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 sm4 md4>
+                        <v-select
+                            :items="result"
+                            label="Result"
+                            name="result"
+                            v-model="formData.result"
+                            single-line
+                            :rules="[rules.required]"
+                            class="pa-2"
+                            color="black"
+                        ></v-select>
+                    </v-flex>
+                </v-layout>
+                <v-layout align-center justify-center wrap class="px-5 mb-3">
+                    <v-flex xs12 sm12 md12>
+                        <v-autocomplete
+                            multiple
+                            :items="packages"
+                            item-text="name"
+                            v-model="formData.packages"
+                            item-value="id"
+                            label="Select Packages For Cycle"
+                        ></v-autocomplete>
+                    </v-flex>
+                </v-layout>
+                <v-layout row wrap justify-center align-center>
+                    <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
+                        <v-btn
+                            class="WM-CyanBlueGradient-BG"
+                            style="padding:10px 60px"
+                            @click="submitForm()"
+                        >
+                            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+                            <span class="white--text">SAVE</span>
+                        </v-btn>
+                    </v-flex>
+                    <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
+                        <router-link :to="{name: 'AllCycle'}">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text">keyboard_arrow_left</v-icon>
+                                <span class="black--text">Back</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </v-form>
+</template>
+
+<script>
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
+import { mapMutations } from "vuex";
+export default {
+    data() {
+        return {
+            formData: {
+                name: "",
+                result: "",
+                description: "",
+                packages: []
+            },
+            packages: [],
+            result: ["Pass", "Fail"],
+            rules: {
+                required: value => !!value || "Required.",
+                counter: value =>
+                    !value ||
+                    value.length == 0 ||
+                    value.length >= 5 ||
+                    "Min 5 characters"
+            }
+        };
+    },
+    created() {
+        if (this.$route.params.cycle) {
+            this.load(this.$route.params.cycle);
+        }
+        this.loadPackages();
+    },
+    methods: {
+        async load(id) {
+            const result = await ApiService.get(urls.editCycle(id));
+            if (result.status == 200) {
+                this.formData = result.data.data;
+            }
+        },
+        async loadPackages() {
+            const result = await ApiService.get(urls.listAllPackage());
+            if (result.status == 200) {
+                this.Packages = result.data.data;
+            }
+        },
+        async submitForm() {
+            let result;
+            if (this.$route.params.cycle) {
+                result = await ApiService.put(
+                    urls.updateCycle(this.$route.params.cycle),
+                    this.formData
+                );
+            } else {
+                result = await ApiService.post(
+                    urls.storeCycle,
+                    this.formData
+                );
+            }
+
+            if (result && result.status == 200) {
+                this.$router.push({ name: "AllCycle" });
+            }
+        }
+    }
+};
+</script>

resources/js/vue/views/Cycle/List.vue

@@ -0,0 +1,243 @@
+<template>
+    <div class>
+        <v-container fluid>
+            <material-card class color="black" title="All Cycles" text>
+                <v-layout align-center wrap class="my-3">
+                    <v-flex xs12 md3 sm3>
+                        <v-text-field
+                            class="pa-2"
+                            v-model="filter.name"
+                            label="Name"
+                            color="black"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 md3 sm3>
+                        <v-autocomplete
+                            class="pa-2"
+                            v-model="filter.result"
+                            label="Result"
+                            color="black"
+                            :items="result"
+                        ></v-autocomplete>
+                    </v-flex>
+                    <v-flex xs12 md3 sm3>
+                        <v-text-field
+                            class="pa-2"
+                            v-model="filter.unique_id"
+                            label="uniqueID"
+                            color="black"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex class xs12 md2 sm3>
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
+                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                            <span class="white--text">Filter</span>
+                        </v-btn>
+                    </v-flex>
+                    <v-spacer></v-spacer>
+                    <v-flex xs12 md2 sm2 class="text-xs-right">
+                        <router-link :to="{name: 'AddCycle'}">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="black--text">Add</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                </v-layout>
+                <v-divider></v-divider>
+                <v-layout align-center wrap class="my-3">
+                    <v-flex md12>
+                        <v-data-table :headers="headers" :items="packages" hide-actions>
+                            <template slot="headerCell" slot-scope="{ header }">
+                                <span
+                                    class="subheading font-weight-light text-white text--darken-3"
+                                    v-text="header.text"
+                                />
+                            </template>
+                            <template slot="items" slot-scope="{ item }">
+                                <td class="headline font-weight-light">{{ item.unique_id }}</td>
+                                <td class="title font-weight-light">{{ item.name }}</td>
+                                <td class="title font-weight-light">{{ item.result }}</td>
+                                <td class="title font-weight-light">{{ item.created_at }}</td>
+                                <td class="text-xs-right">
+                                    <v-btn color="cyan" class="mr-2" @click="show(item.id)">
+                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                        <span>Show</span>
+                                    </v-btn>
+                                    <router-link
+                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                        :to="{name: 'EditCycle', params: {cycle: item.id}}"
+                                    >
+                                        <v-btn color="orange" class="mr-2">
+                                            <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
+                                            <span>Edit</span>
+                                        </v-btn>
+                                    </router-link>
+                                    <v-btn
+                                        color="pink"
+                                        class="WM-ActionButton"
+                                        @click="remove(item.id)"
+                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                    >
+                                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                                        <span>Remove</span>
+                                    </v-btn>
+                                    <v-btn color="orange darken-1" @click="generateBarcode(item.unique_id)">
+                                        <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
+                                        <span>Generate Barcode</span>
+                                    </v-btn>
+                                </td>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+                <v-divider></v-divider>
+                <div class="text-xs-center" v-if="lastPage > 1">
+                    <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+                </div>
+                <v-layout row wrap align-center justify-center class="mt-3">
+                    <router-link to="/dashboard">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                            <span class="black--text">Back</span>
+                        </v-btn>
+                    </router-link>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </div>
+</template>
+
+<script>
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
+import { mapMutations, mapGetters } from "vuex";
+export default {
+    data: () => ({
+        headers: [
+            {
+                sortable: true,
+                text: "Unique ID",
+                value: "Unique ID"
+            },
+            {
+                sortable: true,
+                text: "Name",
+                value: "name"
+            },
+            {
+                sortable: false,
+                text: "Result",
+                value: "result"
+            },
+            {
+                sortable: false,
+                text: "Date",
+                value: "date"
+            },
+            {
+                sortable: false,
+                text: "Action",
+                value: "action",
+                align: "right"
+            }
+        ],
+        filter: {
+            unique_id: '',
+            name: '',
+            result: '',
+        },
+        result: ['Pass', 'Fail'],
+        packages: [],
+        currentPage: 1,
+        lastPage: 1,
+    }),
+    created() {
+        this.load();
+    },
+    methods: {
+        ...mapMutations("modal", ["changeCurrentModal"]),
+        async load(page = 1) {
+            let filter = '?';
+            for (const key in this.filter) {
+                if (this.filter.hasOwnProperty(key)) {
+                    filter += `${key}=${this.filter[key]}&`;
+                }
+            }
+            filter += (page) ? `page=${page}` : `page=1`;
+            const result = await ApiService.get(
+                urls.listCycle(filter)
+            );
+            if (result && result.status == 200) {
+                this.packages = result.data.data.data;
+                this.currentPage = result.data.data.current_page;
+                this.lastPage = result.data.data.last_page;
+            }
+        },
+        async show(testResultId) {
+            const result = await ApiService.get(
+                urls.showCycle(testResultId)
+            );
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-cycle-show",
+                    properties: { result }
+                });
+            }
+        },
+        async remove(testResultId) {
+            const result = await ApiService.delete(
+                urls.removeCycle(testResultId)
+            );
+            if (result && result.status == 200) {
+                for (const key in this.packages) {
+                    if (
+                        this.packages.hasOwnProperty(key) &&
+                        this.packages[key].id == testResultId
+                    ) {
+                        this.packages.splice(key, 1);
+                    }
+                }
+            }
+        },
+        async generateBarcode(code) {
+            const result = await ApiService.post(urls.Barcode(code));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-barcode-barcode",
+                    properties: { result }
+                });
+            }
+        }
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalResult"])
+    },
+    watch: {
+        currentPage(page) {
+            this.load(page);
+        },
+        getModalResult(testResult) {
+            for (const key in this.packages) {
+                if (
+                    this.packages.hasOwnProperty(key) &&
+                    this.packages[key].id == testResult.id
+                ) {
+                    this.packages[key] = testResult;
+                }
+            }
+        }
+    }
+};
+</script>
+<style>
+.v-btn--floating {
+    padding: 0!important;
+}
+.theme--light.v-btn.v-btn--flat {
+    color: rgba(0,0,0,.87)!important;
+}
+.v-btn--floating, .v-btn--icon:before {
+    border-radius: 50%!important;
+}
+</style>

resources/js/vue/views/TestResult/AddEdit.vue

@@ -33,10 +33,13 @@
 						</v-btn>
 					</v-flex>
 				</v-layout>
-				<v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult && form.length" >
+				<v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult && form.length">
 					<v-divider></v-divider>
 				</v-layout>
 				<v-layout align-center justify-center wrap class="px-5 my-3" v-if="form.length">
+					<v-flex xs12 sm12 md12>
+						<h3>{{testTypeNameSelected}}</h3>
+					</v-flex>
 					<v-flex xs12 sm4 md4>
 						<v-text-field
 							name="autoclave"
@@ -47,10 +50,30 @@
 						></v-text-field>
 					</v-flex>
 					<v-flex xs12 sm4 md4>
-						<v-text-field v-model="formData.cycle_number" label="Cycle Number" color="black" class="pa-2"></v-text-field>
+						<v-menu
+							lazy
+							:close-on-content-click="true"
+							transition="v-scale-transition"
+							offset-y
+							v-model="menu"
+						>
+							<v-text-field
+								prepend-icon="far fa-clock"
+								required
+								slot="activator"
+								label="Date"
+								v-model="formData.date"
+							></v-text-field>
+							<v-date-picker
+								color="pink"
+								no-title
+								v-model="formData.date"
+								:date-format="date => new Date(date).toDateString()"
+							></v-date-picker>
+						</v-menu>
 					</v-flex>
 					<v-flex xs12 sm4 md4>
-						<v-switch v-model="result" :label="'Result: ' + formData.result"></v-switch>
+						<v-switch color="green" v-model="result" :label="'Result: ' + formData.result"></v-switch>
 					</v-flex>
 					<v-flex xs12 sm12 md12>
 						<div>
@@ -73,15 +96,32 @@
 							:label="item.name"
 							color="black"
 						></v-text-field>
-						<v-text-field
+						<v-container fluid v-if="item.type == 'Temperature'">
-							v-if="item.type == 'Temperature'"
+							<p>{{ item.name }}</p>
-							type="number"
+							<v-flex xs12>
-							v-model="formData[item.name+'_'+item.id]"
+								<v-slider
-							:label="item.name"
+									step="0.1"
-							min="0"
+									prepend-icon="fas fa-temperature-high"
-							max="200"
+									v-model="formData[item.name+'_'+item.id]"
-							color="black"
+									min="0"
-						></v-text-field>
+									max="200"
+									thumb-label="always"
+								></v-slider>
+							</v-flex>
+						</v-container>
+						<v-container fluid v-if="item.type == 'Pressure'">
+							<p>{{ item.name }}</p>
+							<v-flex xs12>
+								<v-slider
+									prepend-icon="fa fa-tachometer"
+									step="0.001"
+									v-model="formData[item.name+'_'+item.id]"
+									min="-1"
+									max="3"
+									thumb-label="always"
+								></v-slider>
+							</v-flex>
+						</v-container>
 						<v-select
 							multiple
 							v-if="item.type == 'Select'"
@@ -115,6 +155,7 @@
 						</v-container>
 						<v-container fluid v-if="item.type == 'Switch'">
 							<v-switch
+								color="green"
 								v-model="formData[item.name+'_'+item.id]"
 								:label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
 							></v-switch>
@@ -132,7 +173,12 @@
 						</v-container>
 						<v-container fluid v-if="item.type == 'Time'">
 							<v-flex xs12>
-								<v-time-picker v-model="formData[item.name+'_'+item.id]"></v-time-picker>
+								<v-text-field
+									v-model="formData[item.name+'_'+item.id]"
+									:label="item.name"
+									class="WM-Font-30"
+									mask="##:##"
+								></v-text-field>
 							</v-flex>
 						</v-container>
 						<template v-if="item.type == 'Form'">
@@ -152,15 +198,31 @@
 											:label="children.name"
 											color="black"
 										></v-text-field>
-										<v-text-field
+										<v-container fluid v-if="children.type == 'Temperature'">
-											v-if="children.type == 'Temperature'"
+											<p>{{ children.name }}</p>
-											v-model="formData[children.name+'_'+children.id]"
+											<v-flex xs12>
-											:label="children.name"
+												<v-slider
-											type="number"
+													prepend-icon="fas fa-temperature-high"
-											min="0"
+													step="0.1"
-											max="200"
+													v-model="formData[children.name+'_'+children.id]"
-											color="black"
+													min="0"
-										></v-text-field>
+													max="200"
+													thumb-label="always"
+												></v-slider>
+											</v-flex>
+										</v-container>
+										<v-container step="0.001" fluid v-if="children.type == 'Pressure'">
+											<p>{{ children.name }}</p>
+											<v-flex xs12>
+												<v-slider
+													v-model="formData[children.name+'_'+children.id]"
+													min="-1"
+													max="3"
+													prepend-icon="fa fa-tachometer"
+													thumb-label="always"
+												></v-slider>
+											</v-flex>
+										</v-container>
 										<v-select
 											multiple
 											v-if="children.type == 'Select'"
@@ -194,6 +256,7 @@
 										</v-container>
 										<v-container fluid v-if="children.type == 'Switch'">
 											<v-switch
+												color="green"
 												v-model="formData[children.name+'_'+children.id]"
 												:label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
 											></v-switch>
@@ -211,7 +274,12 @@
 										</v-container>
 										<v-container fluid v-if="children.type == 'Time'">
 											<v-flex xs12>
-												<v-time-picker v-model="formData[children.name+'_'+children.id]"></v-time-picker>
+												<v-text-field
+													v-model="formData[children.name+'_'+children.id]"
+													:label="children.name"
+													class="WM-Font-30"
+													mask="##:##"
+												></v-text-field>
 											</v-flex>
 										</v-container>
 									</v-flex>
@@ -245,6 +313,7 @@ import { urls } from "@/config/urls";
 export default {
 	data: () => ({
 		testTypeNames: [],
+		testTypeNameSelected: "",
 		searchInput: "",
 		form: [],
 		filter: {
@@ -255,13 +324,13 @@ export default {
 		result: false,
 		formData: {
 			device_id: "",
-			device_label: "AutoClaveID or WasherID",
+			device_label: "ID",
 			result: "Reject",
-			cycle_number: "",
 			img: null,
 			test_type_id: ""
 		},
-		images: []
+		images: [],
+		menu: ""
 	}),
 	created() {
 		if (this.$route.params.testResult) {
@@ -278,6 +347,7 @@ export default {
 		async selectTestType() {
 			const result = await ApiService.post(urls.getInputs, this.filter);
 			if (result && result.status == 200) {
+				this.testTypeNameSelected = result.data.data.testType.name;
 				this.form = result.data.data.inputs;
 				this.formData.test_type_id = result.data.data.testType.id;
 				this.formData.device_label =
@@ -418,3 +488,26 @@ export default {
 	}
 };
 </script>
+<style >
+.WM-Font-30 input {
+	font-size: 30px !important;
+}
+
+.v-input--switch__track:not(.green--text) {
+	color: red !important;
+}
+
+.v-input--switch__thumb:not(.green--text) {
+	background-color: red !important;
+}
+.v-btn--floating {
+	padding: 0 !important;
+}
+.theme--light.v-btn.v-btn--flat {
+	color: rgba(0, 0, 0, 0.87) !important;
+}
+.v-btn--floating,
+.v-btn--icon:before {
+	border-radius: 50% !important;
+}
+</style>

resources/js/vue/views/TestType/AddEdit.vue

@@ -27,6 +27,8 @@
                         <v-autocomplete
                             :rules="[rules.required]"
                             :items="deviceLabels"
+                            item-value="id"
+                            item-name="name"
                             v-model="form.device_label"
                             label="ID Label"
                             color="black"
@@ -387,6 +389,7 @@ export default {
                 { state: "Range", abbr: "Range" },
                 { state: "Time", abbr: "Time" },
                 { state: "Temperature", abbr: "Temperature" },
+                { state: "Pressure", abbr: "Pressure" },
                 { state: "Form", abbr: "Form" },
             ],
             size: [
@@ -403,17 +406,18 @@ export default {
                 required: value => !!value || "Required."
             },
             deviceLabels: [
-                'WasherID',
+                { name: "Washer ID", id: "WasherID" },
-                'AutoclaveID',
+                { name: "Autoclave ID", id: "AutoclaveID" },
-                'SterilizerID',
+                { name: "Sterilizer ID", id: "SterilizerID" },
-                'WasherMachineID',
+                { name: "WasherMachine ID", id: "WasherMachineID" },
-                'SealMachineID',
+                { name: "SealMachine ID", id: "SealMachineID" },
-                'PatientID',
+                { name: "Patient ID", id: "PatientID" },
-                'Set/PackID',
+                { name: "Set/Pack ID", id: "Set/PackID" },
-                'MDID',
+                { name: "MD ID", id: "MDID" },
-                'ORID',
+                { name: "OR ID", id: "ORID" },
-                'InstrumentID',
+                { name: "Personal ID", id: "PersonalID" },
-                'ID',
+                { name: "Instrument ID", id: "InstrumentID" },
+                { name: "ID", id: "ID" },
             ]
         };
     },

resources/js/vue/views/User/MyInfo.vue

@@ -30,7 +30,6 @@
               name="cellnumber"
               label="Cell Number"
               v-model="user.cell_number"
-              mask="0### ### ####"
               color="black"
               class="pa-2"
               disabled