��Root Mod By V1rus

Viewing: [id].vue

<script setup lang="ts">

import {useMainStore} from '~/stores';

const {t} = useI18n()

definePageMeta({
  title: '',
  layout: 'with-out-footer',
  middleware: ['auth'],
})

const localePath = useLocalePath()
const {locale} = useI18n()
const config = useRuntimeConfig();
const {$api} = useNuxtApp()
const MainStore = useMainStore()
const toast = useToast()
const {id} = useRoute().params
const loading = ref(false);

type res = {
  label: string,
  label_en: string,
  length: string,
  width: string,
  var_1: number,
  var_2: number,
  count: number,
};

const state: any = reactive({
  y: undefined,
  x: undefined,
  z: undefined,
  s: undefined,
  c: 1,
  count: 1,
});

const computingUnit = ref(null as null | res[]);
const colors = ref<any>([]);
const route = useRoute();

const {data}: any = await useAsyncData(`user:${id}`, async () => {
  const [fields, result]: any = await Promise.all([
    $api(config.public.API_URL + '/analyze/materials'),
    $api(config.public.API_URL + '/analyze/unit', {
      query: {unit_id: id}
    })
  ])
  const fieldsOptions = JSON.parse(fields).data.materials
  const unit_res = JSON.parse(result).data.unit
  return {
    fields: fieldsOptions,
    unit: unit_res
  };
}, {
  server: true
})

onMounted(async () => {
  data.value.fields.forEach((row: any) => {
    colors.value.push({
      name: locale.value == 'en' ? row.title_en : row.title,
      value: row.id
    });
  });
  route.meta.title = data.value.unit.title
  useHead({
    title: data.value.unit.title
  })
})

async function computing(type: any, title: any, url: any) {
  if (!state.y) {
    return toast.add({title: t('Length field Alert'), color: "orange"})
  }
  if (!state.x) {
    return toast.add({title: t('Width field Alert'), color: "orange"})
  }
  if (!state.z) {
    return toast.add({title: t('Height field Alert'), color: "orange"})
  }
  let state_d = 1;
  if (state.s) {
    state_d = state.x - state.s;
  }
  loading.value = true;
  const {data, refresh}: any = await useAPI('/analyze/computing-unit', {
    method: 'POST',
    immediate: true,
    server: true,
    body: {
      y: state.y,
      x: state.x,
      z: state.z,
      s: state.s,
      c: state.c,
      d: state_d,
      count: state.count,
      type: type,
      unit_id: id,
      unit_title: title
    }
  })
  onBeforeMount(() => {
    refresh();
  })
  computingUnit.value = JSON.parse(data.value).data.result;
  loading.value = false;
  if (url) {
    navigateTo(localePath(url));
  }
}

let validateKeys = (keyName: string): boolean => {
  return [
    'ArrowUp',
    'ArrowLeft',
    'ArrowRight',
    'ArrowDown',
  ].includes(keyName);
}

let checkKeyIsArrowUpOrArrowDown = (keyCode: number): boolean => {
  return [
    38,
    40
  ].includes(keyCode)
}

const handleSkipNextInput = (event: any): void => {
  if ((event.target.tagName == 'SELECT' && validateKeys(event.code)) || (checkKeyIsArrowUpOrArrowDown(event.which))) {
    event.preventDefault();
  }

  if (validateKeys(event.code)) {
    let id = parseInt(event.target.id);
    let target;

    switch (event.code) {
      case 'ArrowUp':
      case 'ArrowRight':
        if (id > 1) target = id - 1;
        else return;
        break;
      case 'ArrowDown':
      case 'ArrowLeft':
        if (id < 7) target = id + 1;
        else return;
        break;
      default:
    }

    document.getElementById(`${target}`)?.focus();
  }
}

</script>
<template>
  <div class=" mb-2 pt-3 px-2 mt-1">
    <section :dir="$i18n.locale == 'en' ? 'ltr' : 'rtl'">
      <div class=" flex justify-between items-start">
        <div class=" w-full flex justify-between items-start  mb-3">
          <div class="w-5/12 ">
            <div class=" flex justify-between items-center w-full mb-3">
              <label class="block  w-5/12 text-gray-500 bg-white  text-sm ">
                {{ t('Depth') }}
              </label>
              <div class="w-7/12 ">
                <UInput
                    :loading="false"
                    variant="outline"
                    @keydown="handleSkipNextInput"
                    id="1"
                    type="number"
                    :inputClass="' w-10/12 sm:w-full !shadow-none focus:ring-1 rounded-sm focus:ring-orange-600 h-7 py-0 text-xs' "
                    v-on:keypress="MainStore.NumbersOnly"
                    v-model="state.y"
                />
              </div>
            </div>
            <div class=" flex justify-between items-center w-full mb-3">
              <label class="block  w-5/12 text-gray-500 bg-white  text-sm ">
                {{ t('Width') }}
              </label>
              <div class="w-7/12 ">
                <UInput
                    :loading="false"
                    variant="outline"
                    @keydown="handleSkipNextInput"
                    id="2"
                    type="number"
                    :inputClass="' w-10/12 sm:w-full !shadow-none focus:ring-1 rounded-sm focus:ring-orange-600 h-7 py-0 text-xs' "
                    v-on:keypress="MainStore.NumbersOnly"
                    v-model="state.x"
                />
              </div>
            </div>
            <div class=" flex justify-between items-center w-full mb-3">
              <label class="block  w-5/12 text-gray-500 bg-white  text-sm ">
                {{ t('Height') }}
              </label>
              <div class="w-7/12 ">
                <UInput
                    :loading="false"
                    variant="outline"
                    type="number"
                    :inputClass="'w-10/12 sm:w-full !shadow-none focus:ring-1 rounded-sm focus:ring-orange-600 h-7 py-0 text-xs' "
                    v-on:keypress="MainStore.NumbersOnly"
                    @keydown="handleSkipNextInput"
                    id="3"
                    v-model="state.z"
                />
              </div>
            </div>
            <template v-if="data.unit.sabet_status == 'true'">

              <div class=" flex justify-between items-center w-full mb-3">
                <label class="block  w-5/12 text-gray-500 bg-white  text-sm ">
                  {{ t('Fixed Width') }}
                </label>
                <div class="w-7/12 ">
                  <UInput
                      :loading="false"
                      variant="outline"
                      type="number"
                      :inputClass="'w-10/12 sm:w-full !shadow-none focus:ring-1 rounded-sm focus:ring-orange-600 h-7 py-0 text-xs' "
                      v-on:keypress="MainStore.NumbersOnly"
                      v-model="state.s"
                  />
                </div>
              </div>
            </template>
            <div class=" flex justify-between items-center w-full mb-3">
              <label class="block  w-5/12 text-gray-500 bg-white  text-sm ">
                {{ t('Door Color') }}
              </label>
              <div class="w-7/12 ">
                <USelect
                    :options="colors"
                    option-attribute="name"
                    id="4"
                    @keydown="handleSkipNextInput"
                    class="w-full"
                    :selectClass="' w-full  !shadow-none focus:ring-1 rounded-sm focus:ring-orange-600 h-7 pl-2 py-0 text-xs' "
                    v-model="state.c"
                />
              </div>
            </div>
          </div>
          <div class="h-32 w-[13rem]     mb-3">
            <template v-if="data.unit.image_2_d">
              <img :src="config.public.FILE_URL+data.unit.image_2_d.address" class=" w-full h-full "
                   :alt="t('Add Unit')">
            </template>
            <UButton
                :loading="false"
                square
                @keydown="handleSkipNextInput"
                id="5"
                @click="computing('computing',data.unit.title,null)"
                class="w-full flex  text-main-700 rounded-sm border border-red-600  h-7 bg-white items-center justify-center">
                            <span v-text="computingUnit?.length ? t('Recalculate') : t('Computing')"
                                  class=" block  px-2  text-sm truncate  ">
                            </span>
            </UButton>
          </div>
        </div>
      </div>
    </section>
    <section class=" mb-2 ">
      <div v-if="loading">
        <Snipper/>
      </div>
      <table class="w-full p-0" v-if="computingUnit" :dir="$i18n.locale == 'en' ? 'ltr' : 'rtl'">
        <thead>
        <tr class="bg-gray-300">
          <th>
            {{ t('length') }}
          </th>
          <th></th>
          <th>
            {{ t('width') }}
          </th>
          <th></th>
          <th>
            {{ t('count') }}
          </th>
          <th>
            {{ t('unit_title') }}
          </th>
        </tr>
        </thead>
        <tbody>
        <tr :key="key" v-for="(res, key) in computingUnit" class="even:bg-gray-100">
          <td>
            {{ res.length }}
          </td>
          <td>
            <UIcon name="i-heroicons-x-mark" class="text-[11px]"/>
          </td>
          <td>
            {{ res.width }}
          </td>
          <td>
            =
          </td>
          <td>
            {{ res.count }}
          </td>
          <td>
            {{ $i18n.locale == 'en' ? res.label_en : res.label }}
          </td>
        </tr>
        </tbody>
      </table>
    </section>
    <footer :dir="$i18n.locale == 'en' ? 'ltr' : 'rtl'"
            class="px-3 bg-white flex justify-between items-center  pb-2 pt-2 sm:border-r sm:border-l  w-full sm:w-9/12 md:w-7/12 lg:w-6/12 2xl:w-5/12 mx-auto fixed bottom-0 right-0 left-0 border-t">

      <div class="px-1 w-3/12">
        <label class="block   text-gray-500 bg-white  text-base ">
          {{ t('Number_Units') }} :
        </label>
      </div>
      <div class="px-1 w-4/12">
        <UInput
            :loading="false"
            variant="outline"
            :inputClass="'w-full   text-center text-main-700 rounded-sm  ring-gray-400 !shadow-none focus:ring-1 focus:ring-orange-600 h-7 text-base ' "
            v-model="state.count"
            type="number"
            v-on:keypress="MainStore.NumbersOnly"
            @keydown="handleSkipNextInput"
            id="6"
        />
      </div>
      <div class="px-1 w-4/12">
        <UButton
            :loading="false"
            square
            @keydown="handleSkipNextInput"
            id="7"
            @click="computing('set',data.unit.title,'/analyze/list')"
            class="w-full flex  text-main-700 border-red-700 rounded-sm border  h-7 bg-white items-center justify-center">
                    <span class=" block  px-2  text-base truncate  ">
                            {{ t('registration') }}
                    </span>
        </UButton>
      </div>
    </footer>
  </div>
</template>

<style scoped>
table td, table th {
  text-align: center;
  font-size: 12px !important;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}

table td {
  color: #666
}
</style>
User / IP	: 216.73.217.78
Host / Server	: 195.214.235.115 / npln.ir
System	: Linux damavand.pws-dns.net 5.14.0-503.35.1.el9_5.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Apr 4 05:23:43 EDT 2025 x86_64
���Root Mod By V1rus_Alfa

Viewing: [id].vue

��Root Mod By V1rus_Alfa
