Czego użyć w tej sytuacji?

Question

Cześć, stworzyłem stronę internetową do medycznej gry. I moje zapytanie jest takie w jaki sposób zaokrąglić kod aby po wypełnieniu drugiej tabelki "Leku i dawkowania":


Kod wyświetlał tak: (koncept)


A nie tak:


Oryginał wygląda tak:



Nie mam bladego pojęcia w jaki sposób to wytłumaczyć, koszmarny jestem w tłumaczeniu mam nadzieje, że poniekąd rozumiecie.

Oto mój kod JS:
 

let idRecepty; // Zmienna do przechowywania ID recepty
let kodDostepu; // Zmienna do przechowywania kodu dostępu
let pwzLekarza;
let numerTelefonuLekarza;
let liczbaWystawionychRecept = 1;

function generujIdRecepty() {
    // Prosta funkcja generująca losowe ID
    return Math.floor(Math.random() * 1000000) + 1;
}

function generujKodDostepu() {
    // Prosta funkcja generująca losowy 4-cyfrowy kod
    return Math.floor(1000 + Math.random() * 9000);
}

function getCurrentDate() {
    // Pobierz aktualną datę
    const currentDate = new Date();

    // Sformatuj datę jako dd.mm.rrrr
    const day = String(currentDate.getDate()).padStart(2, '0');
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');
    const year = currentDate.getFullYear();

    return `${day}.${month}.${year}`;
}

function formatujDate(d) {
    // Funkcja do formatowania daty w formie "dzień miesiąc rok"
    const options = { day: 'numeric', month: 'long', year: 'numeric' };
    return new Date(d).toLocaleDateString('pl-PL', options);
}


function generujUnikalnyKod() {
    // Generuj 8 zer
    let kod = '00000000';

    // Dodaj dwie losowe litery
    kod += String.fromCharCode(65 + Math.floor(Math.random() * 26));
    kod += String.fromCharCode(65 + Math.floor(Math.random() * 26));

    // Dodaj 6 cyfr od 1 do 9
    for (let i = 0; i < 6; i++) {
        kod += Math.floor(1 + Math.random() * 9);
    }

    return kod;
}

function wystawRecepte() {
    // Generuj nowe ID recepty i kod dostępu
    idRecepty = generujIdRecepty();
    kodDostepu = generujKodDostepu();

    // Pobierz dane z formularza
    const lekarz = document.getElementById('lekarz').value;
    pwzLekarza = document.getElementById('pwzLekarza').value;
    numerTelefonuLekarza = document.getElementById('numerTelefonuLekarza').value;
    const specjalizacjaLekarza = document.getElementById('specjalizacjaLekarza').value;
    const imiePacjenta = document.getElementById('imiePacjenta').value;
    const wiekPacjenta = document.getElementById('wiekPacjenta').value;
    const kodPocztowy = document.getElementById('kodPocztowy').value;
    const szpital = document.getElementById('szpital').value;
    const ulica = document.getElementById('ulica').value;
    const dataGodzina = document.getElementById('dataGodzina').value;
    const podpisLekarza = document.getElementById('podpisLekarza').value;
    const Miasto = document.getElementById('Miasto').value;
    const StanKraj = document.getElementById('StanKraj').value;

    // Pobierz dane z tabeli leków
    const lekiTable = document.getElementById('leki');
    const lekiRows = lekiTable.getElementsByTagName('tr');
    let lekiHtml = '';

    for (let i = 1; i < lekiRows.length; i++) {
        const cells = lekiRows[i].getElementsByTagName('td');
        const nazwaLeku = cells[0].getElementsByTagName('input')[0].value;
        const dawkowanie = cells[1].getElementsByTagName('input')[0].value;

        // Pobierz datę realizacji z pola input w tabeli dataRealizacji
        const dataRealizacji = document.getElementsByName('dataRealizacji')[0].value;

        lekiHtml += `<p><strong style="font-size: 30px;">${nazwaLeku}</strong></p>`;
        lekiHtml += `<p>Data realizacji: ${dataRealizacji}</p>`;
        lekiHtml += `<p>Dawkowanie: ${dawkowanie}</p>`; // Dodaj informację o dawkowaniu
        lekiHtml += `<hr>`; // Dodaj linię po tekście "Dawkowanie:"
    }

        // Pobierz liczbę leków z tabeli leków
        const liczbaLekow = document.getElementById('leki').getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;


        // Aktualizuj numerację recepty
        let numeracjaRecepty = `${liczbaWystawionychRecept} z ${liczbaLekow}`;

    const unikalnyKod = generujUnikalnyKod();

    // Pobierz dane z tabeli kontroli
    const kontrolaTable = document.getElementById('kontrolaTable');
    const kontrolaRows = kontrolaTable.getElementsByTagName('tr');
    let kontrolaHtml = '';

    for (let i = 1; i < kontrolaRows.length; i++) {
        const cells = kontrolaRows[i].getElementsByTagName('td');
        const dataKontroli = cells[0].getElementsByTagName('input')[0].value;
        const godzinaKontroli = cells[1].getElementsByTagName('input')[0].value;

        kontrolaHtml += `<p><strong>Termin Kontroli:</strong> ${formatujDate(dataKontroli)} godz. ${godzinaKontroli}</p>`;
    }

    // Zresetuj liczbę wystawionych recept przy każdym wywołaniu funkcji
    liczbaWystawionychRecept = 1;

    // Utwórz HTML zawierający wszystkie informacje
    const htmlDoWyswietlenia = `
    <div id="wygenerowanaRecepta">
        <html>
        <head>
            <title>Recepta</title>
            <style>
            body {
                font-family: 'Arial', sans-serif;
                margin: 20px;
                max-width: 400px;
                margin: auto;
                border: 2px solid #007bff;
                padding: 20px;
                border-radius: 10px;
            }
            h1 {
                color: #007bff;
                text-align: center;
            }
            p {
                margin-bottom: 10px;
            }
            hr {
                border: 1px solid #007bff;
                margin-bottom: 7%;
            }
            .podpis {
                text-align: center;
                font-style: italic;
                color: #888;
            }
            /* Dodatkowy styl dla ID recepty, kodu dostępu i daty wystawienia */
            #id-recepty, #data-wystawienia {
                color: #888;
                text-align: right;
                margin-bottom: 5%;
            }
            #kod-dostepu {
                font-size: 12px;
                display: flex;
                align-items: center;
            }
            
            #kod-dostepu strong {
                font-size: 14px;
                margin-right: 5px;
            }

            #data-wystawienia {
                color: #888;
                text-align: right;
                margin-bottom: 5%;
                transform: translateX(56%); /* Skorzystaj z transformacji, aby skorygować pozycję */
            }
        </style>
    
        </head>
        <body>
        <img src="logo2.png" alt="Kod kreskowy" style="max-width: 35%;">
        <img src="ind2.png" alt="Kod kreskowy" style="max-width: 100%; margin: 1% auto">
            <div id="id-recepty">ID recepty: ${idRecepty}</div>
            <div id="kod-dostepu"><strong>Kod dostępu: </strong><div style="display: inline; font-size: 2em;">${kodDostepu}</div><span id="data-wystawienia">Data wystawienia: ${getCurrentDate()}</span></div>
            <hr>
            <p><strong style="margin-right: 20%;">Pacjent:</strong> <span id="imie">${imiePacjenta}</span>, <span id="nazwisko">${wiekPacjenta}</span></p>
        <div id="info-lekarz" style="display: flex; flex-direction: column; align-items: flex-start; margin-top: 20px;">
            <p style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0;">
                <strong>Wystawca:</strong> <span id="lekarz" style="margin-left: 57px;">lek. ${lekarz}</span>
            </p>
            <p style="margin: 0; padding: 0; margin-left: 35%;">PWZ lekarza: ${pwzLekarza}</p>
            <p style="margin: 0; padding: 0; margin-left: 35%;">tel. (rejestracja): ${numerTelefonuLekarza}</p>
            ${kontrolaHtml} <!-- Dodaj informacje o kontroli do wygenerowanej recepty -->
        </div>
        <hr>
        <p style="font-weight: bold; margin-top: 10px; margin-bottom: 0;">Recepta ${numeracjaRecepty}</p>
        <div style="float: right; font-size: 15px; margin-top: -19px;">${unikalnyKod}</div>
        ${lekiHtml}
        </body>
        </html>
    `;

    // Utwórz nowe okno przeglądarki do wyświetlenia HTML
    const htmlWindow = window.open('', '_blank');

    // Ustaw zawartość okna na HTML do wyświetlenia
    htmlWindow.document.write(htmlDoWyswietlenia);
}

function validateTable(tableId) {
    var lekiTable = document.getElementById(tableId);
    var lekiRows = lekiTable.getElementsByTagName('tr');

    // Sprawdź, czy wszystkie pola w danej tabeli są wypełnione
    for (var i = 1; i < lekiRows.length; i++) {
        var cells = lekiRows[i].getElementsByTagName('td');
        var nazwaLeku = cells[0].getElementsByTagName('input')[0].value;
        var dawkowanie = cells[1].getElementsByTagName('input')[0].value;

        if (nazwaLeku.trim() === '' || dawkowanie.trim() === '') {
            showNotification('Wypełnij wszystkie pola w tabeli leków', 'warning');
            return false; // Przerwij proces, jeśli tabela nie jest poprawnie wypełniona
        }
    }

    return true; // Kontynuuj proces, jeśli tabela jest poprawnie wypełniona
}

function dodajLek() {
    const tabelaLekow = document.getElementById('leki').getElementsByTagName('tbody')[0];
    const nowyWiersz = tabelaLekow.insertRow();

    // Dodaj komórkę z nazwą leku
    const komorkaNazwaLeku = nowyWiersz.insertCell();
    const inputNazwaLeku = document.createElement('input');
    inputNazwaLeku.type = 'text';
    inputNazwaLeku.name = 'nazwaLeku';
    komorkaNazwaLeku.appendChild(inputNazwaLeku);

    // Dodaj komórkę z dawkowaniem
    const komorkaDawkowanie = nowyWiersz.insertCell();
    const inputDawkowanie = document.createElement('input');
    inputDawkowanie.type = 'text';
    inputDawkowanie.name = 'dawkowanie';
    komorkaDawkowanie.appendChild(inputDawkowanie);
}

function usunLek() {
    const tabelaLekow = document.getElementById('leki').getElementsByTagName('tbody')[0];
    const iloscWierszy = tabelaLekow.rows.length;

    // Nie usuwaj pierwszego wiersza (nagłówka tabeli)
    if (iloscWierszy > 1) {
        tabelaLekow.deleteRow(iloscWierszy - 1);
    }
}

 

Comments

Nie wiem co masz na myśli przez "zaokrąglić kod".

Jedyna różnica jaką na oko widzę jest to "recepta 2 z 2" i numer recepty obok?

---

Tak, chciałbym aby pod drugim dodanym lekiem wyświetlało "Recepta 2 z 2" i obok unikalny kod 16 cyfrowy.

---

Po­trze­bujesz prze­nieść od­po­wie­d­nie dwie li­nie z “htmlDo­Wy­s­wie­t­le­nia” do pę­t­li “le­kiH­tml”, prze­nieść kil­ka przy­pi­sań zmien­nych zza pę­t­li do jej wnę­trza i zmienić “li­cz­ba­Wys­ta­wio­ny­ch­Re­ce­pt” na “i”. ;)

---

@overcq
Czyli przenieść:

<p style="font-weight: bold; margin-top: 10px; margin-bottom: 0;">Recepta ${numeracjaRecepty}</p>
<div style="float: right; font-size: 15px; margin-top: -19px;">${unikalnyKod}</div>

Do:
 

    for (let i = 1; i < lekiRows.length; i++) {
        const cells = lekiRows[i].getElementsByTagName('td');
        const nazwaLeku = cells[0].getElementsByTagName('input')[0].value;
        const dawkowanie = cells[1].getElementsByTagName('input')[0].value;

        // Pobierz datę realizacji z pola input w tabeli dataRealizacji
        const dataRealizacji = document.getElementsByName('dataRealizacji')[0].value;

        lekiHtml += `<p><strong style="font-size: 30px;">${nazwaLeku}</strong></p>`;
        lekiHtml += `<p>Data realizacji: ${dataRealizacji}</p>`;
        lekiHtml += `<p>Dawkowanie: ${dawkowanie}</p>`; // Dodaj informację o dawkowaniu
        lekiHtml += `<hr>`; // Dodaj linię po tekście "Dawkowanie:"
        lekiHtml += `<p style="font-weight: bold; margin-top: 10px; margin-bottom: 0;">Recepta ${numeracjaRecepty}</p>` 
        lekiHtml += `<div style="float: right; font-size: 15px; margin-top: -19px;">${unikalnyKod}</div>`
    }

A to zmienić na i?:

    // Zresetuj liczbę wystawionych recept przy każdym wywołaniu funkcji
    liczbaWystawionychRecept = i;

No i przenieś zmienne let do wnętrza do tej pętli?:
 

    for (let i = 1; i < lekiRows.length; i++) {
        const cells = lekiRows[i].getElementsByTagName('td');
        const nazwaLeku = cells[0].getElementsByTagName('input')[0].value;
        const dawkowanie = cells[1].getElementsByTagName('input')[0].value;

        // Pobierz datę realizacji z pola input w tabeli dataRealizacji
        const dataRealizacji = document.getElementsByName('dataRealizacji')[0].value;

        lekiHtml += `<p><strong style="font-size: 30px;">${nazwaLeku}</strong></p>`;
        lekiHtml += `<p>Data realizacji: ${dataRealizacji}</p>`;
        lekiHtml += `<p>Dawkowanie: ${dawkowanie}</p>`; // Dodaj informację o dawkowaniu
        lekiHtml += `<hr>`; // Dodaj linię po tekście "Dawkowanie:"
        lekiHtml += `<p style="font-weight: bold; margin-top: 10px; margin-bottom: 0;">Recepta ${numeracjaRecepty}</p>` 
        lekiHtml += `<div style="float: right; font-size: 15px; margin-top: -19px;">${unikalnyKod}</div>`
    }

Dobrze rozumiem?

---

@overcq, 

---

W “lekiHtml” zachowaj właściwą kolejność.

Natomiast potrzebujesz przenieść inicjowanie zmiennych, które znajdują się w tych przeniesionych dwóch linijkach, do wnętrza pętli.

Nie możesz tego przetestować i wyłapać błędy?