Untitled

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Смерть русским!</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
          integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>

    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<main id="app">
    <template id="service-template">
        <li class="service border border-black p-2 mt-2 first:mt-0 relative">
            <i class="fa-solid fa-xmark absolute top-2 right-2 service-remove" onclick="removeService(this)"></i>

            <h3>Услуга:</h3>

            <div class="grid grid-cols-2 gap-3 mt-2">
                <select class="service-select border border-black outline-none" onchange="onSelectService(this)">
                    <option data-name="Ретушь" data-price="50">Ретушь - $50</option>
                    <option data-name="Фото на паспорт" data-price="100">Фото на паспорт - $100</option>
                    <option data-name="Проявка пленки" data-price="10">Проявка пленки - $10</option>
                </select>

                <input type="number" value="1" class="border border-black outline-none" onchange="onServiceCount(this)">
            </div>

            <div class="service-codes  mt-2 p-4 border-t border-black hidden">
                <div>
                    <input type="text" class="add-service-input border border-black outline-none">
                    <button class="add-service border border-black px-2 duration-100 hover:bg-slate-200"
                            onclick="addCode(this)">Add
                    </button>
                </div>
                <div class="mt-2 border-t border-black">
                    <h3>Codes: </h3>
                    <ul class="mt-2">
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                </div>
            </div>
        </li>
    </template>

    <div class="w-full min-h-screen bg-blue-200 flex justify-center py-20">
        <form class="w-thousand max-w-[90%] bg-slate-50 rounded-lg p-5">
            <header>
                <h1 class="text-center text-4xl pt-10 font-bold">Форма добавления заказа</h1>
            </header>

            <!--            Выбор клиента -->
            <div class="mt-10">
                <h3>Выбор клиента:</h3>

                <select class="mt-2 border border-black outline-none client-select" onchange="onSelectClient(this)">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>

                <div class="mt-2">
                    <input type="checkbox" onchange="onCheckboxClient(this)">
                    <span class="ml-2">Срочный заказ</span>
                </div>
            </div>

            <!--            Выбор услуг-->
            <div class="mt-10">
                <header>
                    <h3>Выбор услуг</h3>
                </header>

                <ul class="mt-2 services-list">
                    <li class="border border-black p-2 mt-2 first:mt-0 relative hidden">
                        <i class="fa-solid fa-xmark absolute top-2 right-2"></i>

                        <h3>Услуга:</h3>

                        <div class="grid grid-cols-2 gap-3 mt-2">
                            <select class="border border-black outline-none">
                                <option>Проявка плёнки - $10</option>
                                <option>Фото на паспорт - $100</option>
                                <option>Проявка плёнки - $10</option>
                            </select>

                            <input type="number" value="1" class="border border-black outline-none">
                        </div>

                        <div class="service-films mt-2 p-4 border-t border-black">
                            <ul class="service-films__list">
                                <li class="mt-2 first:mt-0">
                                    <h3>Код плёнки (1):</h3>
                                    <input type="text" class="border border-black px-2 mt-2 outline-none"
                                           placeholder="ee72921">
                                </li>
                                <li class="mt-2 first:mt-0">
                                    <h3>Код плёнки (2):</h3>
                                    <input type="text" class="border border-black px-2 mt-2 outline-none"
                                           placeholder="ee72921">
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>

                <div class="mt-2">
                    <button
                            onclick="createService()"
                            type="button"
                            class="add-service border border-black px-2 duration-100 hover:bg-slate-200">Добавить услугу
                    </button>
                </div>
            </div>

            <!--            Печать фотографий -->
            <div class="mt-10 hidden">
                <header>
                    <h3>Печать фотографий</h3>
                </header>

                <ul class="mt-2">
                    <li class="border border-black p-2 mt-2 first:mt-0 relative">
                        <i class="fa-solid fa-xmark absolute top-2 right-2"></i>

                        <div class="flex items-center">
                            <h3>Копии:</h3>
                            <input type="number" value="1" class="border border-black outline-none ml-2">
                        </div>

                        <div class="mt-2 grid grid-cols-3 gap-3">
                            <input type="text" placeholder="Плёнка" class="border border-black outline-none">
                            <input type="text" placeholder="Кадр" class="border border-black outline-none">

                            <select class="border border-black outline-none">
                                <option>Холст - А2</option>
                                <option>Матовая - А2</option>
                                <option>Глянцевая - А2</option>
                            </select>
                        </div>
                    </li>
                </ul>

                <div class="mt-2">
                    <button class="border border-black px-2 duration-100 hover:bg-slate-200">Добавить услугу</button>
                </div>
            </div>

            <!--            Продажа товаров -->
            <div class="mt-10 hidden">
                <header>
                    <h3>Продажа товаров</h3>
                </header>

                <ul class="mt-2">
                    <li class="border border-black p-2 mt-2 first:mt-0 relative">
                        <div class="grid grid-cols-2 gap-3">
                            <select class="border border-black outline-none">
                                <option>Проявка плёнки - $10</option>
                                <option>Фото на паспорт - $100</option>
                                <option>Проявка плёнки - $10</option>
                            </select>

                            <input type="number" value="1" class="border border-black outline-none">
                        </div>

                        <div class="mt-2 p-4 border-t border-black">
                            <ul>
                                <li class="mt-2 first:mt-0">
                                    <h3>Код плёнки (1):</h3>
                                    <input type="text" class="border border-black px-2 mt-2 outline-none"
                                           placeholder="ee72921">
                                </li>
                                <li class="mt-2 first:mt-0">
                                    <h3>Код плёнки (2):</h3>
                                    <input type="text" class="border border-black px-2 mt-2 outline-none"
                                           placeholder="ee72921">
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>

                <div class="mt-2">
                    <button class="border border-black px-2 duration-100 hover:bg-slate-200">Добавить услугу</button>
                </div>
            </div>

            <button type="submit" class="submit-btn mt-10 border border-black px-2 duration-100 hover:bg-slate-200">
                Добавить заказ
            </button>
        </form>
    </div>
</main>

<!--  libs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js" referrerpolicy="no-referrer"></script>

<script src="/js/tailwind.js"></script>
<script src="/js/index.js"></script>
</body>
</html>

index.js

// order
const submit = document.querySelector('.submit-btn');

const order = {
    services: [],
}
const DEFAULT_SERVICE = {
    name: "Ретушь",
    price: 50,
    count: 0,
}

// Choose a client
const onSelectClient = (select) => {
    order.name = select.value;

    printOrder();
}
const onCheckboxClient = (input) => {
    order.isUrgent = input.checked;

    printOrder();
}

// Services
const serviceTemplate = document.querySelector('#service-template');

const servicesList = document.querySelector('.services-list');

const createService = () => {
    const cloneNode = serviceTemplate.content.cloneNode(true);

    servicesList.appendChild(cloneNode)

    const latestService = servicesList.lastElementChild;

    updateServices();

    order.services.push({uuid: latestService.getAttribute('data-uuid'), ...DEFAULT_SERVICE});

    printOrder()
}
const updateServices = () => {
    Object.values(servicesList.children).forEach((it) => {
        if (!it.hasAttribute('data-uuid')) {
            it.setAttribute('data-uuid', uuid.v4())
        }
    })
}
const removeService = (html) => {
    const parent = html.closest('.service');
    const uuid = parent.getAttribute('data-uuid');

    order.services = order.services.filter((it) => it.uuid !== uuid);

    servicesList.removeChild(parent);
    printOrder();
}
const onSelectService = (html) => {
    const option = html.options[html.selectedIndex];
    const uuid = html.closest('.service').getAttribute('data-uuid');

    order.services = order.services.map((it) => {
        if (it.uuid === uuid) {
            it.name = option.getAttribute('data-name');
            it.price = option.getAttribute('data-price');
        }

        return it;
    })

    if (option.getAttribute('data-name') === "Проявка пленки") {
        onServiceFilm(html);
    }

    printOrder()
}
const onServiceFilm = (html) => {
    const parent = html.closest('.service');
    const codes = parent.querySelector('.service-codes');
    const uuid = parent.getAttribute('data-uuid');

    codes.classList.remove("hidden");
}
const onServiceCount = (html) => {
    const uuid = html.closest('.service').getAttribute('data-uuid');

    order.services = order.services.map((it) => {
        if (it.uuid === uuid) {
            it.count = parseInt(html.value);
        }

        return it;
    })

    onServiceFilm(html);
    printOrder()
}
const addCode = (html) => {
    const parent = html.closest('.service');
    const uuid = parent.getAttribute('data-uuid');
    const inputCode = parent.querySelector('.add-service-input');

    console.log(inputCode.value, uuid, parent);
}

// Order
const onSubmit = (e) => {
    e.preventDefault()

    console.log('[onSubmit]: ')
}

// Other
const printOrder = () => {
    console.log("Order: ", order);
}
const getServiceByUUID = (uuid) => {
    return order.services.filter((it) => it.uuid === uuid);
}

// Events
submit.addEventListener("click", onSubmit)