almost done.

pages/_lang/calculation/index.vue

@@ -150,6 +150,13 @@
                         <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 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"
@@ -163,20 +170,44 @@
                         </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 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">{{ staticData.app.validationErr }}</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>
@@ -347,7 +378,9 @@ export default {
         crossBarPitch: '',
         clearSpan: '',
         bearingBarThickness: '',
+        crossBarThickness: '',
         bearingBarHeight: '',
+        crossBarHeight: '',
         locale: this.$route.params.lang
       },
       calculationValues: null,
@@ -417,7 +450,9 @@ export default {
     },
     waiting() {
       setTimeout(() => {
-        this.$gsap.to($('.app .appResult'), {opacity: 1, minHeight: 145, height: 'auto', paddingTop: 30, paddingBottom: 30, duration: 0.5})
+        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)
     }
   },
@@ -427,22 +462,32 @@ export default {
       this.validation = {}
       this.waiting = true
       this.appResult = null
-      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
-          })
+      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: {
         title: this.staticData.hero
-      }
+      },
+      title: this.staticData.hero,
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: this.staticData.app.t2
+        }
+      ]
     }
   },
   async asyncData({$axios}) {