��Root Mod By V1rus

Viewing: create.vue

<template>
  <div class="text-center" v-if="loading">
    <SharedLoading/>
  </div>
  <div class="w-[95%] mx-auto" v-else>
    <div :dir="locale == 'en' ? 'ltr' : 'rtl'" class="mb-2 ">
      <div class=" bg-[#f7941d] text-black block w-full   rounded-t-md overflow-hidden ">
        <div class="flex items-center justify-between px-2 py-2   ">
          <span class="w-4/12 text-base font-bold text-right text-white">  </span>
          <div class="flex items-start justify-center w-4/12 ">
                        <span id="title_group_1" class="block text-sm font-bold">
                            {{ t('add_piece') }}
                        </span>
          </div>
          <span class="w-4/12  block">
          </span>
        </div>
      </div>
      <div
          class="  pt-2 border-b border-l border-r border-gray-400 min-h-[90vh] !rounded-t-none rounded-md overflow-hidden">
        <div class="flex flex-wrap w-full mx-auto ">
          <div class="flex items-start justify-start flex-wrap w-full mb-4">
            <div class="w-full  mb-2">
              <div class="mx-auto w-[98%]">
                <select v-model="form.material_id"
                        class="block w-full h-9 py-0 !px-3 text-sm bg-white text-gray-900 border border-gray-300 rounded focus:ring-main-700 focus:border-main-700"
                >
                  <option v-for="(row, idx) in materials" :value="idx">
                    {{ locale == 'en' ? row.title_en : row.title }}
                  </option>

                </select>
              </div>
            </div>
            <div class="w-full  mb-2">
              <div class="mx-auto w-[98%]">
                <textarea v-model="form.panel_description" rows="1"
                          class="block w-full h-9 py-1 !px-3 text-xs bg-white text-gray-900 border border-gray-300 rounded 3xl:h-9 focus:ring-main-700 focus:border-main-700 placeholder-slate-400"
                          :placeholder="t('Sheet name and code')"></textarea>
              </div>
            </div>
            <div class="w-full  ">
              <div class="mx-auto w-[98%] flex  justify-start   items-center">
                <input type="checkbox" @change="handleRotateStatus" v-model="form.rotate_status"
                       class="w-5 h-5 text-red-900 border-2 border-red-900 cursor-pointer focus:border-red-900 focus:ring-red-900">
                <span class="mr-5 text-sm text-black"> {{ t('Total rotation of parts') }} </span>
              </div>
            </div>
          </div>
        </div>


        <section class="flex separator items-center  justify-between w-full pb-5">
          <div class="flex items-center justify-center  flex-row px-2  ">
            <button @click="handleIncrementingOrDecrementingRow('increment')" type="button"
                    :class="locale == 'en' ? 'mr-2 pr-2' : 'ml-2 pl-2'"
                    class="   mb-0  w-auto h-7 text-xs bold flex justify-center items-center bg-gray-50  border-green-500 hover:bg-green-50  border rounded cursor-pointer ">
              <i class='mx-1 text-xl bx bx-plus text-green-500'></i>
              <span
                  class="flex w-full justify-center   items-center">
                {{ t('increase_row') }}
              </span>
            </button>
            <button @click="handleIncrementingOrDecrementingRow('decrement')" type="button"
                    :class="locale == 'en' ? ' pr-2' : '  pl-2'"
                    class="  mb-0  :w-auto  h-7 text-xs bold flex justify-center items-center bg-gray-50   border-red-500  hover:bg-red-50  border rounded cursor-pointer ">
              <i class='mx-1 text-xl bx bx-minus text-red-500'></i>
              <span
                  class="flex w-full justify-center   items-center">
                {{ t('decrease_row') }}
              </span>
            </button>
          </div>
        </section>


        <div class="w-full">
          <div class="w-full flex items-center bg-gray-300 text-gray-700">
            <div class="w-[75px] text-center">
              {{ t('row_number') }}
            </div>
            <div class="w-[125px] text-center">
              {{ t('count') }}
            </div>
            <div class="w-[125px] text-center">
              {{ t('width') }}
            </div>
            <div class="w-[125px] text-center">
              {{ t('length') }}
            </div>
            <div class="w-[125px] text-center">
              {{ t('description') }}
            </div>
          </div>
          <div
              class="  w-full flex  justify-start items-start mb-2 pb-0 border-b border-dashed border-main-700 odd:bg-gray-300 pt-2"
              v-for="(row, i) in form.num_slice">
            <div class="w-[12%] mr-[.1rem]   ">
                            <span
                                class="  w-full py-0 !pr-0 text-xs text-gray-900   h-7 3xl:h-9 flex items-center rounded justify-center text-center bold    border-2 border-red-700 border-dashed   focus:!ring-0">
                             
                                <UIcon v-if="1 < (i+1)" @click="removeSliceRow(i)" name="i-heroicons-x-circle"
                                       class="text-xl text-red-600 cursor-pointer ml-1"/>
                               
                                {{ i + 1 }}
                            </span>
              <div class="w-full flex flex-col items-center justify-end my-[.3rem]">
                <input type="checkbox" v-model="form.slice[i].rotate_status"
                       @keydown="handleKeyDown"
                       class="text-red-900 border-2 border-red-900 cursor-pointer focus:border-red-900 focus:ring-red-900"
                >
                <span class=" text-xs text-black">{{ t('rotation') }}</span>
              </div>
            </div>
            <div class=" w-[88%] flex flex-wrap justify-start items-center ">

              <div class="w-[24%] mr-[.1rem]  mb-[.1rem]">
                <input :placeholder="t('number')" v-model="form.slice[i].count"
                       :id="form.slice[i].row_id + '1'"
                       :ref="setInputRef(form.slice[i].row_id + '1')"
                       @keydown="handleKeyDown($event, form.slice[i].row_id + '1')"
                       @focus="selectInputValue"
                       class="{{(i+1)%2 == 0 ? 'bg-main-400' : 'bg-white'}} block w-full py-0 !px-3 text-xs bg-white text-gray-900 border border-gray-300  text-center bold rounded h-7 3xl:h-9 focus:ring-main-700 focus:border-main-700">
              </div>
              <div class="w-[24%] mr-[.1rem]  mb-[.1rem]">
                <input :placeholder="t('Width')" v-model="form.slice[i].width"
                       :id="form.slice[i].row_id + '2'"
                       :ref="setInputRef(form.slice[i].row_id + '2')"
                       @keydown="handleKeyDown($event, form.slice[i].row_id + '2')"
                       @focus="selectInputValue"
                       class="{{(i+1)%2 == 0 ? 'bg-main-400' : 'bg-white'}} block w-full py-0 !px-3 text-xs bg-white text-gray-900 border border-gray-300  text-center bold rounded h-7 3xl:h-9 focus:ring-main-700 focus:border-main-700">
              </div>
              <div class="w-[24%] mr-[.1rem]  mb-[.1rem]">
                <input v-model="form.slice[i].length" :placeholder="t('length')"
                       :id="form.slice[i].row_id + '3'"
                       :ref="setInputRef(form.slice[i].row_id + '3')"
                       @keydown="handleKeyDown($event, form.slice[i].row_id + '3')"
                       @focus="selectInputValue"
                       class="{{(i+1)%2 == 0 ? 'bg-main-400' : 'bg-white'}} block w-full py-0 !px-3 text-xs bg-white text-gray-900 border border-gray-300  text-center bold rounded h-7 3xl:h-9 focus:ring-main-700 focus:border-main-700">
              </div>
              <div class="w-[24%] mb-[.1rem] mr-[.1rem] ">
                <textarea v-model="form.slice[i].description" rows="1"
                          :id="form.slice[i].row_id + '4'"
                          :ref="setInputRef(form.slice[i].row_id + '4')"
                          @keydown="handleKeyDown($event, form.slice[i].row_id + '4')"
                          @focus="selectInputValue"
                          class="{{(i+1)%2 == 0 ? 'bg-main-400' : 'bg-white'}} block w-full py-1 !px-3 text-xs bg-white text-gray-900 border border-gray-300 rounded description h-7 3xl:h-9 focus:ring-main-700 focus:border-main-700 placeholder-slate-400"
                          :placeholder="t('description')"></textarea>
              </div>
              <div class="w-[24%] mr-[.1rem]">
                <select v-model="form.slice[i].width_two"
                        :id="form.slice[i].row_id + '5'"
                        :ref="setInputRef(form.slice[i].row_id + '5')"
                        @keydown="handleKeyDown($event, form.slice[i].row_id + '6')"
                        class="{{(i+1)%2 == 0 ? 'bg-main-400' : 'bg-white'}} block w-full py-0 !px-3 text-xs bg-white text-gray-900 border border-gray-300 rounded h-7 3xl:h-9 focus:ring-main-700 focus:border-main-700">
                  <option value="0">{{ t('width two') }}</option>
                  <option value="1">{{ t('Strip') }}</option>
                  <option value="2">{{ t('Farsi') }}</option>
                  <option value="3">{{ t('Groove') }}</option>
                  <option value="0">{{ t('none') }}</option>
                </select>
              </div>
              <div class="w-[24%] mr-[.1rem]">
                <select v-model="form.slice[i].width_one"
                        :id="form.slice[i].row_id + '6'"
                        :ref="setInputRef(form.slice[i].row_id + '6')"
                        @keydown="handleKeyDown($event, form.slice[i].row_id + '6')"
                        class="{{(i+1)%2 == 0 ? 'bg-main-400' : 'bg-white'}} block w-full py-0 !px-3 text-xs bg-white text-gray-900 border border-gray-300 rounded h-7 3xl:h-9 focus:ring-main-700 focus:border-main-700">
                  <option value="0">{{ t('width one') }}</option>
                  <option value="1">{{ t('Strip') }}</option>
                  <option value="2">{{ t('Farsi') }}</option>
                  <option value="3">{{ t('Groove') }}</option>
                  <option value="0">{{ t('none') }}</option>
                </select>
              </div>
              <div class="w-[24%] mr-[.1rem]">
                <select v-model="form.slice[i].length_two"
                        :id="form.slice[i].row_id + '7'"
                        :ref="setInputRef(form.slice[i].row_id + '7')"
                        @keydown="handleKeyDown($event, form.slice[i].row_id + '7')"
                        class="{{(i+1)%2 == 0 ? 'bg-main-400' : 'bg-white'}} block w-full py-0 !px-3 text-xs bg-white text-gray-900 border border-gray-300 rounded h-7 3xl:h-9 focus:ring-main-700 focus:border-main-700">
                  <option value="0">{{ t('length two') }}</option>
                  <option value="1">{{ t('Strip') }}</option>
                  <option value="2">{{ t('Farsi') }}</option>
                  <option value="3">{{ t('Groove') }}</option>
                  <option value="0">{{ t('none') }}</option>
                </select>
              </div>
              <div class="w-[24%] mr-[.1rem]">
                <select v-model="form.slice[i].length_one"
                        :id="form.slice[i].row_id + '8'"
                        :ref="setInputRef(form.slice[i].row_id + '8')"
                        @keydown="handleKeyDown($event, form.slice[i].row_id + '8')"
                        class="{{(i+1)%2 == 0 ? 'bg-main-400' : 'bg-white'}}  block w-full py-0 !px-3 text-xs bg-white text-gray-900 border border-gray-300 rounded h-7 3xl:h-9 focus:ring-main-700 focus:border-main-700">
                  <option value="0">{{ t('length one') }}</option>
                  <option value="1">{{ t('Strip') }}</option>
                  <option value="2">{{ t('Farsi') }}</option>
                  <option value="3">{{ t('Groove') }}</option>
                  <option value="0">{{ t('none') }}</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer
        class=" bg-white flex justify-between items-center  pb-2 pt-1 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-full">
        <UButton
            @click="handleRegistration"
            :loading="loading"
            square
            class="w-full flex  text-white rounded-sm border  h-10 bg-main-700 items-center justify-center">
                    <span class=" block  px-2  text-xs bold truncate  ">
                        {{ t('registration') }}
                    </span>
        </UButton>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
const {t, locale} = useI18n();
const focusEvent = new Event('focus');
const inputRefs = ref([]);
const toast = useToast();
const loading = ref(true);
const localePath = useLocalePath();
const materials = ref([
  {
    id: null,
    title: '',
    title_en: '',
  }
]);

const setInputRef = (index) => (el) => {
  inputRefs.value[index] = el;
}

async function getAnalyzeMaterials() {
  const {data} = await useAPI('/analyze/materials', {
    immediate: true,
    server: true,
  });

  console.log('data', data.value);

  materials.value = data.value?.materials ?? [];
}

await getAnalyzeMaterials();
let row_id = 1;

const form = reactive({
  material_id: 1,
  panel_description: '',
  rotate_status: false,
  num_slice: 1,
  slice: [
    {
      'row_id': row_id,
      'length': '',
      'width': '',
      'count': '1',
      'length_one': 0,
      'length_two': 0,
      'width_one': 0,
      'width_two': 0,
      'rotate_status': false,
      'description': ''

    }
  ]
})
const handleIncrementingOrDecrementingRow = (type: string) => {
  if (type == 'increment') {
    row_id = row_id + 1;
    form.num_slice = form.num_slice + 1;
    form.slice.push({
      'row_id': row_id,
      'length': '',
      'width': '',
      'count': '1',
      'length_one': 0,
      'length_two': 0,
      'width_one': 0,
      'width_two': 0,
      'rotate_status': false,
      'description': ''
    });
  } else if (1 < form.num_slice) {
    form.num_slice = form.num_slice - 1;
    form.slice.splice(form.num_slice, 1);
    row_id = row_id - 1;
  }
  handleRotateStatus()
}
const removeSliceRow = (i: number) => {
  row_id = row_id - 1;
  form.slice.splice(i, 1);
  form.num_slice = form.num_slice - 1;
}
const handleRotateStatus = () => {
  for (let index = 0; index < form.slice.length; index++) {
    form.slice[index].rotate_status = form.rotate_status;
  }
}
const handleRegistration = async () => {
  loading.value = true;
  for (let index = 0; index < form.slice.length; index++) {
    const element = form.slice[index];
    if (!element.width) {
      toast.add({
        title: t("Section ") + (index + 1) + ' ' + t("Width_Alert"),
        color: "orange"
      });
      loading.value = false;
      return;
    }
    if (!element.length) {
      toast.add({
        title: t("Section ") + (index + 1) + ' ' + t("Length_Alert"),
        color: "orange"
      });
      loading.value = false;
      return;
    }
    if (!element.count) {
      toast.add({
        title: t("Section ") + (index + 1) + ' ' + t("Number_Alert"),
        color: "orange"
      });
      loading.value = false;
      return;
    }
  }

  await useAPI('/analyze/custom-list/add', {
    method: 'POST',
    body: form,
    immediate: true,
    server: true,
    onResponse({response}) {
      if (response.status != 422) {
        return navigateTo(localePath('/analyze/list'));
      }
    }
  })

}

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

const handleKeyDown = (event: any) => {
  if (event.target.tagName == 'SELECT' && validateKeys(event.code)) {
    event.preventDefault();
  }

  if (validateKeys(event.code)) {
    let target;
    let id = parseInt(event.target.id);
    let tens_digit = Math.floor(id / 10);
    let ones_digit = id % 10;

    switch (event.code) {
      case 'ArrowUp':
        // is first row
        if (tens_digit == 1 && ones_digit <= 4) return;

        if (tens_digit > 1 && ones_digit <= 4) {
          --tens_digit;
          ones_digit = ones_digit + 4;
          break;
        }

        if (tens_digit >= 1 && ones_digit >= 5) {
          ones_digit = ones_digit - 4
          break;
        }
        break;
      case 'ArrowRight':
        // is first input in first row
        if (tens_digit == 1 && ones_digit == 1) return;

        if (tens_digit >= 1 && ones_digit >= 1) {
          --ones_digit;
        }
        break;
      case 'ArrowDown':
        // is last row
        if (tens_digit == row_id && ones_digit >= 5) {
          return;
        }

        if (tens_digit <= row_id && ones_digit <= 4) {
          ones_digit = ones_digit + 4;
          break;
        }

        if (tens_digit < row_id && ones_digit >= 5) {
          ++tens_digit
          ones_digit = ones_digit - 4;
          break;
        }
        break;
      case 'ArrowLeft':
        // is last row
        if (tens_digit == row_id && ones_digit == 8) return;

        if (ones_digit == 8) return;

        if (tens_digit >= 1 && ones_digit >= 1) {
          ++ones_digit;
          break;
        }
        break;
      default:
    }

    target = String(tens_digit) + String(ones_digit);

    const newInput = inputRefs.value[target];
    // let element = document.getElementById(target);
    // element?.focus();

    if (newInput) {
      newInput.dispatchEvent(focusEvent);

      newInput.addEventListener('focus', () => {
        newInput.select();
      })
    }
  }
}

const selectInputValue = (event: any) => {
  event.target.focus();
  event.target.select();
}

definePageMeta({
  title: '',
  middleware: ['auth'],
})
useHead({
  title: t('add_unit')
});

onMounted(() => {
  loading.value = false;
})

</script>
User / IP	: 216.73.216.158
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: create.vue

��Root Mod By V1rus_Alfa
