add pwa app
This commit is contained in:
Amir Mohamadi
@@ -10,353 +10,10 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<calculation-app :titleTxt="staticData.app.t3"/>
|
||||
|
||||
<div class="app m-auto" :class="app.method === 'custom' ? 'col-12 col-lg-9 col-xl-8 col-xxl-6' : 'col-12'">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<calculation-guide-tables/>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="appTitle">
|
||||
<h2 class="title">{{ staticData.app.t3 }}</h2>
|
||||
</div>
|
||||
<div class="appMethod">
|
||||
<span class="txt">{{ staticData.app.t4 }}</span>
|
||||
<el-radio-group v-model="app.method" style="direction: ltr">
|
||||
<template v-if="$route.params.lang === 'fa'">
|
||||
<el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
|
||||
<el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
|
||||
<el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0" v-if="app.method === 'classified'">
|
||||
<div class="appLayout">
|
||||
<h2 class="layoutTitle">{{ staticData.app.t7 }}</h2>
|
||||
<div class="class">
|
||||
<h4>{{ staticData.app.t8 }}</h4>
|
||||
<el-radio v-model="app.vehicleClass" label="class1">{{ staticData.app.t9 }}</el-radio>
|
||||
</div>
|
||||
<div class="class">
|
||||
<h4>{{ staticData.app.t10 }}</h4>
|
||||
<el-radio v-model="app.vehicleClass" label="class2">{{ staticData.app.t11 }}</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="class3">{{ staticData.app.t12 }}</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="class4">{{ staticData.app.t13 }}</el-radio>
|
||||
</div>
|
||||
<div class="class">
|
||||
<h4>{{ staticData.app.t14 }}</h4>
|
||||
<el-radio v-model="app.vehicleClass" label="FL1">FL1</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="FL2">FL2</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="FL3">FL3</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="FL4">FL4</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="FL5">FL5</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="FL6">FL6</el-radio>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="app.method === 'custom' ? 'col-12' : 'col-12 col-lg-6'">
|
||||
<div class="appLayout">
|
||||
<h2 class="layoutTitle">{{ staticData.app.t15 }}</h2>
|
||||
<el-form key="form-a">
|
||||
<el-form-item :label="staticData.app.t16">
|
||||
<el-radio-group v-model="app.gratingType">
|
||||
<el-radio label="forge">{{ staticData.app.t17 }}</el-radio>
|
||||
<el-radio label="pressured">{{ staticData.app.t18 }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="staticData.app.t19" v-if="app.method === 'custom'">
|
||||
<el-radio-group v-model="app.loadType">
|
||||
<el-radio label="pointedLoad">{{ staticData.app.t20 }}</el-radio>
|
||||
<el-radio label="distributedLoad">{{ staticData.app.t21 }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.pointedLoadValue ? 'is-error' : null" :label="staticData.app.t22" v-if="app.method === 'custom' && app.loadType === 'pointedLoad'">
|
||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.pointedLoadValue" :placeholder="staticData.app.enter"></el-input>
|
||||
<p class="err" v-if="validation.pointedLoadValue">{{ validation.pointedLoadValue.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.distributedLoadValue ? 'is-error' : null" :label="staticData.app.t23" v-if="app.method === 'custom' && app.loadType === 'distributedLoad'">
|
||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.distributedLoadValue" :placeholder="staticData.app.enter"></el-input>
|
||||
<p class="err" v-if="validation.distributedLoadValue">{{ validation.distributedLoadValue.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.bearingBarPitch ? 'is-error' : null" :label="staticData.app.t24">
|
||||
|
||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_forge" v-if="app.gratingType === 'forge'"
|
||||
:placeholder="staticData.app.select">
|
||||
<el-option
|
||||
v-for="item in calculationValues.bearingBarPitch_forge"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
|
||||
<el-option
|
||||
v-for="item in calculationValues.bearingBarPitch_pressured"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<p class="err" v-if="validation.bearingBarPitch">{{ validation.bearingBarPitch.msg }}</p>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.crossBarPitch ? 'is-error' : null" :label="staticData.app.t25">
|
||||
|
||||
<el-select v-model="app.crossBarPitch" key="crossBarPitch_forge" v-if="app.gratingType === 'forge'" :placeholder="staticData.app.select">
|
||||
<el-option
|
||||
v-for="item in calculationValues.crossBarPitch_forge"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="app.crossBarPitch" key="crossBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
|
||||
<el-option
|
||||
v-for="item in calculationValues.crossBarPitch_pressured"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<p class="err" v-if="validation.crossBarPitch">{{ validation.crossBarPitch.msg }}</p>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.clearSpan ? 'is-error' : null" :label="staticData.app.t26">
|
||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.clearSpan" :placeholder="staticData.app.enter"></el-input>
|
||||
<p class="err" v-if="validation.clearSpan">{{ validation.clearSpan.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.bearingBarThickness ? 'is-error' : null" :label="staticData.app.t27">
|
||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.bearingBarThickness" :placeholder="staticData.app.enter"></el-input>
|
||||
<p class="err" v-if="validation.bearingBarThickness">{{ validation.bearingBarThickness.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<!-- cross bar thickness -->
|
||||
<el-form-item :class="validation.crossBarThickness ? 'is-error' : null" :label="staticData.app.t30" v-if="app.gratingType === 'pressured'">
|
||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.crossBarThickness" :placeholder="staticData.app.enter"></el-input>
|
||||
<p class="err" v-if="validation.crossBarThickness">{{ validation.crossBarThickness.msg }}</p>
|
||||
</el-form-item>
|
||||
<!-- cross bar thickness -->
|
||||
|
||||
<el-form-item :class="validation.bearingBarHeight ? 'is-error' : null" :label="staticData.app.t28">
|
||||
<el-select v-model="app.bearingBarHeight"
|
||||
key="bearingBarHeight"
|
||||
:placeholder="relativeValues || app.loadType === 'distributedLoad' ? staticData.app.select : staticData.app.t29">
|
||||
<el-option
|
||||
v-for="item in app.loadType === 'distributedLoad' ? calculationValues.bearingBarHeight : relativeValues"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p class="err" v-if="validation.bearingBarHeight">{{ validation.bearingBarHeight.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<!-- cross bar height -->
|
||||
<el-form-item :class="validation.crossBarHeight ? 'is-error' : null" :label="staticData.app.t31" v-if="app.gratingType === 'pressured'">
|
||||
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.crossBarHeight" :placeholder="staticData.app.enter"></el-input>
|
||||
<p class="err" v-if="validation.crossBarHeight">{{ validation.crossBarHeight.msg }}</p>
|
||||
</el-form-item>
|
||||
<!-- cross bar height -->
|
||||
|
||||
<div class="calculateBtn">
|
||||
<button class="btn btn-reverse-fill" @click.prevent="calculate">{{ staticData.app.calculate }}</button>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="copyRight">
|
||||
<p>Design And develop by <a href="https://www.negarehagency.com" target="_blank">negarehagency.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-5">
|
||||
<div class="appResult" v-if="waiting || appResult || validation">
|
||||
<p class="waiting" v-if="waiting">{{ staticData.app.waiting }}</p>
|
||||
<p class="err" v-if="!appResult && !waiting">{{ staticData.app.validationErr }}</p>
|
||||
<p v-if="appResult" :class="appResult.sigmaStatus ? 'success' : 'failure'">{{ appResult.sigma }}</p>
|
||||
<p v-if="appResult" :class="appResult.deflectionStatus ? 'success' : 'failure'">{{ appResult.deflection }}</p>
|
||||
</div>
|
||||
<div class="weight" v-if="!validation && waiting || appResult">
|
||||
<p v-if="appResult">{{ staticData.app.t32 }}</p>
|
||||
<p dir="ltr">
|
||||
<b class="colored"> {{ appResult.gratingWeight.normal }} </b>
|
||||
<b> Kg/m<sup>2</sup> </b>
|
||||
</p>
|
||||
<br>
|
||||
<p v-if="appResult">{{ staticData.app.t33 }}</p>
|
||||
<p dir="ltr">
|
||||
<b class="colored"> {{ appResult.gratingWeight.galvanized }} </b>
|
||||
<b> Kg/m<sup>2</sup> </b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="tableBox vehicles">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4" class="center">{{ staticData.table1.title }}</th>
|
||||
<th class="middle">{{ staticData.table1.load }}</th>
|
||||
<th>{{ staticData.table1.imprint }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ staticData.table1.class1.t1 }}</td>
|
||||
<td>{{ staticData.table1.class1.t2 }}</td>
|
||||
<td>{{ staticData.table1.class1.t3 }}</td>
|
||||
<td>{{ staticData.table1.danSqm }}</td>
|
||||
<td>600</td>
|
||||
<td>1000 x 1000</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table1.class2.t1 }}</td>
|
||||
<td>{{ staticData.table1.class2.t2 }}</td>
|
||||
<td>{{ staticData.table1.class2.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>1.000</td>
|
||||
<td>200 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table1.class3.t1 }}</td>
|
||||
<td>{{ staticData.table1.class3.t2 }}</td>
|
||||
<td>{{ staticData.table1.class3.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>3.000</td>
|
||||
<td>200 x 400</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table1.class4.t1 }}</td>
|
||||
<td>{{ staticData.table1.class4.t2 }}</td>
|
||||
<td>{{ staticData.table1.class4.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>9.000</td>
|
||||
<td>250 x 600</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="notice">{{ staticData.scrollToSee }}</p>
|
||||
<div class="tableBox forklifts">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="6" class="center">{{ staticData.table2.title }}</th>
|
||||
<th class="middle">{{ staticData.table2.load }}</th>
|
||||
<th>{{ staticData.table2.imprint }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>{{ staticData.table2.t1 }}</td>
|
||||
<td>{{ staticData.table2.t2 }}</td>
|
||||
<td>{{ staticData.table2.t3 }}</td>
|
||||
<td>{{ staticData.table2.t4 }}</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl1.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl1.t2 }}</td>
|
||||
<td>21</td>
|
||||
<td>10</td>
|
||||
<td>31</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>2600</td>
|
||||
<td>130 x 130</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl2.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl2.t2 }}</td>
|
||||
<td>31</td>
|
||||
<td>15</td>
|
||||
<td>46</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>4000</td>
|
||||
<td>175 x 150</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl3.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl3.t2 }}</td>
|
||||
<td>44</td>
|
||||
<td>25</td>
|
||||
<td>69</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>6300</td>
|
||||
<td>200 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl4.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl4.t2 }}</td>
|
||||
<td>60</td>
|
||||
<td>40</td>
|
||||
<td>100</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>9000</td>
|
||||
<td>300 x 200</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl5.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl5.t2 }}</td>
|
||||
<td>90</td>
|
||||
<td>60</td>
|
||||
<td>150</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>14000</td>
|
||||
<td>375 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl6.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl6.t2 }}</td>
|
||||
<td>110</td>
|
||||
<td>80</td>
|
||||
<td>190</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>17000</td>
|
||||
<td>450 x 200</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="notice">{{ staticData.scrollToSee }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -365,116 +22,12 @@
|
||||
import {fadeInAnimation} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
app: {
|
||||
method: 'custom',
|
||||
gratingType: 'forge',
|
||||
loadType: 'pointedLoad',
|
||||
vehicleClass: 'class1',
|
||||
pointedLoadValue: '',
|
||||
distributedLoadValue: '',
|
||||
bearingBarPitch: '',
|
||||
crossBarPitch: '',
|
||||
clearSpan: '',
|
||||
bearingBarThickness: '',
|
||||
crossBarThickness: '',
|
||||
bearingBarHeight: '',
|
||||
crossBarHeight: '',
|
||||
locale: this.$route.params.lang
|
||||
},
|
||||
calculationValues: null,
|
||||
relativeValues: null,
|
||||
validation: {},
|
||||
waiting: false,
|
||||
appResult: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
||||
},
|
||||
gratingTypeTrigger() {
|
||||
return this.app.gratingType
|
||||
},
|
||||
crossBarPitchTrigger() {
|
||||
return this.app.crossBarPitch
|
||||
},
|
||||
loadTypeTrigger() {
|
||||
return this.app.loadType
|
||||
},
|
||||
vehicleClassTrigger() {
|
||||
return this.app.vehicleClass
|
||||
},
|
||||
methodTrigger() {
|
||||
return this.app.method
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
loadTypeTrigger(newVal, oldVal) {
|
||||
this.app.bearingBarHeight = ''
|
||||
},
|
||||
gratingTypeTrigger(newVal, oldVal) {
|
||||
this.app.bearingBarPitch = ''
|
||||
this.app.crossBarPitch = ''
|
||||
},
|
||||
crossBarPitchTrigger(newVal, oldVal) {
|
||||
if (this.app.loadType === 'pointedLoad') {
|
||||
this.app.bearingBarHeight = ''
|
||||
const data = {
|
||||
gratingType: this.app.gratingType,
|
||||
crossBarPitch: this.app.crossBarPitch
|
||||
}
|
||||
this.$axios.post('/api/public/calculation/relativeValues', data)
|
||||
.then(res => {
|
||||
this.relativeValues = res.data
|
||||
})
|
||||
.catch(err => {
|
||||
this.relativeValues = null
|
||||
})
|
||||
}
|
||||
},
|
||||
vehicleClassTrigger(newVal, oldVal) {
|
||||
this.app.crossBarPitch = ''
|
||||
if (newVal === 'class1') this.app.loadType = 'distributedLoad'
|
||||
else this.app.loadType = 'pointedLoad'
|
||||
},
|
||||
methodTrigger(newVal, oldVal) {
|
||||
if (newVal === 'classified') {
|
||||
this.app.vehicleClass = 'class1'
|
||||
this.app.loadType = 'distributedLoad'
|
||||
} else {
|
||||
this.app.vehicleClass = ''
|
||||
this.app.loadType = 'pointedLoad'
|
||||
}
|
||||
},
|
||||
waiting() {
|
||||
setTimeout(() => {
|
||||
this.$gsap.timeline()
|
||||
.to($('.app .appResult,.app .weight'), {opacity: 1, paddingTop: 20, paddingBottom: 20, duration: 0.2})
|
||||
.to($('.app .appResult p,.app .weight p'), {opacity: 1, fontSize: 16, letterSpacing: 0, duration: 0.2}, 0)
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
methods: {
|
||||
calculate() {
|
||||
this.validation = {}
|
||||
this.waiting = true
|
||||
this.appResult = null
|
||||
setTimeout(() => {
|
||||
this.$axios.post('/api/public/calculate', this.app)
|
||||
.then(res => {
|
||||
this.waiting = false
|
||||
this.appResult = res.data
|
||||
})
|
||||
.catch(err => {
|
||||
this.waiting = false
|
||||
if (err.response.status === 422) this.validation = err.response.data.validation
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
htmlAttrs: {
|
||||
@@ -489,26 +42,8 @@ export default {
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const calculationValues = await $axios.get('/api/public/calculation/values')
|
||||
return {
|
||||
calculationValues: calculationValues.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.el-popper .popper__arrow {
|
||||
border-width: 0;
|
||||
filter: none;
|
||||
left: 35px;
|
||||
|
||||
&:lang(fa) {
|
||||
left: auto;
|
||||
right: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user