search

itlsoft / lb

0 stars 0 forks source link

Feature list 2024 #8

Open itlsoft opened 3 weeks ago

itlsoft commented 3 weeks ago 
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wyszukiwarka pracowników</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .label {
            color: red;
            margin-top: 5px;
            display: block;
        }
        .loader {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Wyszukiwarka pracowników</h1>
    <form id="searchForm">
        <label for="searchInput">ID, email, imię lub nazwisko:</label>
        <input type="text" id="searchInput" name="searchInput">
        <span class="label"></span>
        <div class="loader"><strong>loading...</strong></div>
    </form>

    <script>
        $(document).ready(function () {
            let delayTimer;

            $('#searchInput').on('keyup', function () {
                clearTimeout(delayTimer);

                const value = $(this).val();
                const label = $('.label');
                label.text(''); // reset komunikatu walidacji

                if (value.length === 0) return; // nie rób nic, gdy pole jest puste

                // Walidacja danych wejściowych
                let isValid = false;

                if (/^\d{1}[\d\w]{7,}$/.test(value)) {
                    // ID pracownika: zaczyna się od cyfry i ma minimum 8 znaków
                    isValid = true;
                } else if (value.includes('@')) {
                    // Walidacja email
                    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (emailPattern.test(value)) {
                        isValid = true;
                    } else {
                        label.text('Podaj poprawny e-mail');
                    }
                } else {
                    // Imię lub nazwisko (dowolny tekst)
                    isValid = true;
                }

                // Jeśli walidacja przebiegła pomyślnie
                if (isValid) {
                    delayTimer = setTimeout(function () {
                        $('.loader').show(); // Pokaż loader
                        label.text(''); // Resetuj komunikat walidacji

                        // Wykonaj zapytanie AJAX
                        $.ajax({
                            url: `/api/getdata/${value}`,
                            method: 'GET',
                            success: function (data) {
                                $('.loader').hide();
                                console.log('Odpowiedź serwera:', data);
                                // Obsługa odpowiedzi z serwera
                            },
                            error: function () {
                                $('.loader').hide();
                                label.text('Wystąpił błąd podczas wyszukiwania');
                            }
                        });
                    }, 1000); // 1 sekunda opóźnienia
                } else if (/^\d/.test(value) && value.length < 8) {
                    // Błąd walidacji ID
                    label.text('Podaj poprawne ID pracownika');
                }
            });
        });
    </script>
</body>
</html>

from flask import Flask, jsonify

app = Flask(__name__)

# Przykładowe dane - w rzeczywistej aplikacji dane będą pobierane z bazy danych
employees = [
    {"id": "12345678", "email": "jan.kowalski@example.com", "name": "Jan Kowalski"},
    {"id": "87654321", "email": "anna.nowak@example.com", "name": "Anna Nowak"},
    {"id": "23456789", "email": "julia.zielinska@example.com", "name": "Julia Zielińska"}
]

@app.route('/api/getdata/<string:query>', methods=['GET'])
def get_data(query):
    # Wyszukiwanie pracownika na podstawie ID, e-maila, imienia lub nazwiska
    results = []
    for employee in employees:
        if query in (employee["id"], employee["email"]) or query.lower() in employee["name"].lower():
            results.append(employee)

    if results:
        return jsonify({"status": "success", "data": results})
    else:
        return jsonify({"status": "error", "message": "Nie znaleziono pracownika"}), 404

if __name__ == '__main__':
    app.run(debug=True)
itlsoft commented 3 weeks ago 
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wyszukiwarka pracowników</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .label {
            color: red;
            margin-top: 5px;
            display: block;
        }
        .loader {
            display: none;
        }
        .search_content {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 10px;
        }
        .tooltip {
            position: absolute;
            background: #333;
            color: #fff;
            padding: 8px;
            border-radius: 4px;
            font-size: 14px;
            display: none;
            white-space: nowrap;
            z-index: 1000;
            transition: opacity 0.3s;
        }
    </style>
</head>
<body>
    <h1>Wyszukiwarka pracowników</h1>
    <form id="searchForm">
        <label for="searchInput">ID, email, imię lub nazwisko:</label>
        <input type="text" id="searchInput" name="searchInput">
        <span class="label"></span>
        <div class="loader"><strong>loading...</strong></div>
    </form>

    <!-- Div do wyświetlania wyników wyszukiwania -->
    <div class="search_content"></div>

    <!-- Tooltip element -->
    <div class="tooltip"></div>

    <script>
        $(document).ready(function () {
            let delayTimer;
            const tooltip = $('.tooltip');

            $('#searchInput').on('keyup', function () {
                clearTimeout(delayTimer);

                const value = $(this).val();
                const label = $('.label');
                const searchContent = $('.search_content');
                label.text(''); // Reset komunikatu walidacji
                searchContent.empty(); // Wyczyść poprzednie wyniki

                if (value.length <= 2) return; // Jeśli długość wartości jest <= 2, nie rób nic

                // Walidacja danych wejściowych
                let isValid = false;

                if (/^\d{1}[\d\w]{4,}$/.test(value)) { // ID pracownika: zaczyna się od cyfry i ma minimum 5 znaków
                    isValid = true;
                } else if (value.includes('@')) {
                    // Walidacja email
                    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (emailPattern.test(value)) {
                        isValid = true;
                    } else {
                        label.text('Podaj poprawny e-mail');
                    }
                } else {
                    // Imię lub nazwisko (dowolny tekst)
                    isValid = true;
                }

                // Jeśli walidacja przebiegła pomyślnie i długość tekstu > 2
                if (isValid) {
                    delayTimer = setTimeout(function () {
                        $('.loader').show(); // Pokaż loader
                        label.text(''); // Resetuj komunikat walidacji

                        // Wykonaj zapytanie AJAX
                        $.ajax({
                            url: `/api/getdata/${value}`,
                            method: 'GET',
                            success: function (data) {
                                $('.loader').hide();
                                searchContent.empty(); // Wyczyszczenie wyników przed dodaniem nowych

                                if (data.status === 'success') {
                                    // Iteracja przez wyniki i wyświetlenie ich w elemencie search_content
                                    data.data.forEach(function (employee) {
                                        searchContent.append(
                                            `<div>
                                                <p class="ID" 
                                                   data-id="${employee.id}" 
                                                   data-company="${employee.company}" 
                                                   data-phone="${employee.phone}">
                                                    <strong>ID:</strong> ${employee.id}
                                                </p>
                                                <p><strong>Email:</strong> ${employee.email}</p>
                                                <p><strong>Imię i nazwisko:</strong> ${employee.name}</p>
                                            </div><hr>`
                                        );
                                    });

                                    // Obsługa tooltipa dla elementów .ID
                                    $('.ID').on('mouseenter', function (e) {
                                        const company = $(this).data('company');
                                        const phone = $(this).data('phone');

                                        tooltip.text(`Firma: ${company}, Telefon: ${phone}`);
                                        tooltip.css({
                                            top: e.pageY + 10,
                                            left: e.pageX + 10
                                        }).fadeIn(300);
                                    }).on('mousemove', function (e) {
                                        tooltip.css({
                                            top: e.pageY + 10,
                                            left: e.pageX + 10
                                        });
                                    }).on('mouseleave', function () {
                                        tooltip.fadeOut(200);
                                    });

                                } else {
                                    searchContent.append('<p>Nie znaleziono pracownika</p>');
                                }
                            },
                            error: function () {
                                $('.loader').hide();
                                label.text('Wystąpił błąd podczas wyszukiwania');
                            }
                        });
                    }, 1000); // 1 sekunda opóźnienia
                } else if (/^\d/.test(value) && value.length < 5) {
                    // Błąd walidacji ID
                    label.text('Podaj poprawne ID pracownika');
                }
            });
        });
    </script>
</body>
</html>
itlsoft commented 3 weeks ago 
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wyszukiwarka pracowników</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .label {
            color: red;
            margin-top: 5px;
            display: block;
        }
        .loader {
            display: none;
        }
        .search_content {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 10px;
        }
        .tooltip {
            position: absolute;
            background: #333;
            color: #fff;
            padding: 8px;
            border-radius: 4px;
            font-size: 14px;
            display: none;
            white-space: nowrap;
            z-index: 1055; /* Dopasowane do modal Bootstrap */
            transition: opacity 0.3s ease;
        }
    </style>
</head>
<body>
    <h1>Wyszukiwarka pracowników</h1>
    <form id="searchForm">
        <label for="searchInput">ID, email, imię lub nazwisko:</label>
        <input type="text" id="searchInput" name="searchInput">
        <span class="label"></span>
        <div class="loader"><strong>loading...</strong></div>
    </form>

    <!-- Modal Bootstrap do wyświetlania wyników -->
    <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalLabel">Wyniki wyszukiwania</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="search_content"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            let delayTimer;

            $('#searchInput').on('keyup', function () {
                clearTimeout(delayTimer);

                const value = $(this).val();
                const label = $('.label');
                const searchContent = $('.search_content');
                label.text(''); // Reset komunikatu walidacji
                searchContent.empty(); // Wyczyść poprzednie wyniki

                if (value.length <= 2) return; // Jeśli długość wartości jest <= 2, nie rób nic

                // Walidacja danych wejściowych
                let isValid = false;

                if (/^\d{1}[\d\w]{4,}$/.test(value)) { // ID pracownika: zaczyna się od cyfry i ma minimum 5 znaków
                    isValid = true;
                } else if (value.includes('@')) {
                    // Walidacja email
                    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (emailPattern.test(value)) {
                        isValid = true;
                    } else {
                        label.text('Podaj poprawny e-mail');
                    }
                } else {
                    // Imię lub nazwisko (dowolny tekst)
                    isValid = true;
                }

                // Jeśli walidacja przebiegła pomyślnie i długość tekstu > 2
                if (isValid) {
                    delayTimer = setTimeout(function () {
                        $('.loader').show(); // Pokaż loader
                        label.text(''); // Resetuj komunikat walidacji

                        // Wykonaj zapytanie AJAX
                        $.ajax({
                            url: `/api/getdata/${value}`,
                            method: 'GET',
                            success: function (data) {
                                $('.loader').hide();
                                searchContent.empty(); // Wyczyszczenie wyników przed dodaniem nowych

                                if (data.status === 'success') {
                                    // Iteracja przez wyniki i wyświetlenie ich w elemencie search_content
                                    data.data.forEach(function (employee) {
                                        searchContent.append(
                                            `<div>
                                                <p class="ID" data-id="${employee.id}">
                                                    <strong>ID:</strong> ${employee.id}
                                                </p>
                                                <p><strong>Email:</strong> ${employee.email}</p>
                                                <p><strong>Imię i nazwisko:</strong> ${employee.name}</p>
                                                <!-- Tooltip z danymi pracownika -->
                                                <div class="tooltip" style="display:none;">
                                                    <strong>Firma:</strong> ${employee.company}<br>
                                                    <strong>Telefon:</strong> ${employee.phone}
                                                </div>
                                            </div><hr>`
                                        );
                                    });

                                    // Pokaż modal po załadowaniu wyników
                                    $('#searchModal').modal('show');

                                    // Obsługa tooltipa dla elementów .ID
                                    $('.ID').on('mouseenter', function () {
                                        $(this).siblings('.tooltip').css({
                                            display: 'block',
                                            opacity: 1
                                        });
                                    }).on('mouseleave', function () {
                                        $(this).siblings('.tooltip').css({
                                            display: 'none',
                                            opacity: 0
                                        });
                                    });

                                } else {
                                    searchContent.append('<p>Nie znaleziono pracownika</p>');
                                }
                            },
                            error: function () {
                                $('.loader').hide();
                                label.text('Wystąpił błąd podczas wyszukiwania');
                            }
                        });
                    }, 1000); // 1 sekunda opóźnienia
                } else if (/^\d/.test(value) && value.length < 5) {
                    // Błąd walidacji ID
                    label.text('Podaj poprawne ID pracownika');
                }
            });
        });
    </script>
</body>
</html>
itlsoft commented 3 weeks ago 
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Skrypt jQuery</title>
  <style>
    /* Definicja klas CSS */
    .showit {
      display: block;
    }
    .hideit {
      display: none;
    }
  </style>
</head>
<body>

  <!-- Dropdown select -->
  <select id="reason_select">
    <option value="1">Opcja 1</option>
    <option value="2">Opcja 2</option>
    <option value="3">Opcja 3</option>
  </select>

  <!-- Element do modyfikacji klasy -->
  <div class="search-element">Treść do ukrycia lub pokazania</div>

  <!-- Dodaj jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // Funkcja sprawdzająca wybraną opcję i aktualizująca klasę
      function updateVisibility() {
        if ($('#reason_select').val() == '1') {
          $('.search-element').removeClass('hideit').addClass('showit');
        } else {
          $('.search-element').removeClass('showit').addClass('hideit');
        }
      }

      // Sprawdzenie po załadowaniu strony
      updateVisibility();

      // Obsługa zmiany opcji w select
      $('#reason_select').change(function() {
        updateVisibility();
      });
    });
  </script>

</body>
</html>
itlsoft commented 2 weeks ago 
{% set is_rejected_present = dane_json | selectattr("statusName", "equalto", "Rejected") | list | length > 0 %}
{% set is_non_rejected_present = dane_json | selectattr("statusName", "ne", "Rejected") | list | length > 0 %}

{% if dane_json | length == 0 or is_rejected_present %}
    <!-- Wyświetl przycisk Submit (aktywny) -->
    <button type="submit">Submit</button>
{% elif is_non_rejected_present %}
    <!-- Wyświetl przycisk Submit z atrybutem disabled -->
    <button type="submit" disabled>Submit</button>
{% endif %}
itlsoft commented 2 weeks ago 
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formularz z walidacją dat</title>

    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Datepicker CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <form id="date-form">
        <div class="form-group">
            <label for="startDate">Data Od:</label>
            <input type="text" class="form-control" id="startDate" placeholder="Wybierz datę początkową" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="endDate">Data Do:</label>
            <input type="text" class="form-control" id="endDate" placeholder="Wybierz datę końcową" autocomplete="off">
        </div>
        <button type="submit" class="btn btn-primary">Zapisz</button>
    </form>
</div>

<!-- jQuery, Bootstrap, and Bootstrap Datepicker JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function() {
    // Pobranie dzisiejszej daty
    var today = new Date();
    today.setHours(0, 0, 0, 0); // Ustawienie godziny na północ, aby łatwiej porównywać tylko daty

    // Inicjalizacja bootstrap-datepicker dla pól daty
    $('#startDate').datepicker({
        format: 'yyyy-mm-dd',
        startDate: today,  // Blokowanie dat wcześniejszych niż dzisiaj
        autoclose: true,
        todayHighlight: true
    });

    $('#endDate').datepicker({
        format: 'yyyy-mm-dd',
        startDate: today,  // Blokowanie dat wcześniejszych niż dzisiaj
        autoclose: true,
        todayHighlight: true
    });

    // Event na zmianę daty w polu Data Od
    $('#startDate').on('changeDate', function(e) {
        var startDate = $('#startDate').datepicker('getDate');

        // Ustawienie minimalnej daty dla Data Do jako wybrana Data Od lub dzisiaj
        $('#endDate').datepicker('setStartDate', startDate || today);

        // Sprawdzenie, czy Data Do jest wcześniej niż Data Od, jeśli tak, resetuje
        var endDate = $('#endDate').datepicker('getDate');
        if (endDate && endDate < startDate) {
            $('#endDate').datepicker('setDate', startDate);
        }
    });

    // Walidacja na submit
    $('#date-form').on('submit', function(event) {
        var startDate = $('#startDate').datepicker('getDate');
        var endDate = $('#endDate').datepicker('getDate');

        // Sprawdzamy czy oba pola są wypełnione i spełniają wymagania
        if (!startDate || !endDate) {
            alert("Proszę wypełnić oba pola daty.");
            event.preventDefault();
            return;
        }

        if (endDate < startDate) {
            alert("Data Do nie może być wcześniejsza niż Data Od.");
            event.preventDefault();
        }
    });
});
</script>
</body>
</html>
itlsoft commented 2 weeks ago 
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Double Action Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <form id="myForm" action="/submit" method="post">
    <button type="button" class="double-action">Kliknij mnie</button>
  </form>

  <!-- Tooltip / Modal Element -->
  <div id="confirmationModal">
    <p>Are you sure?</p>
    <button type="submit" form="myForm" id="yesButton">Yes</button>
    <button type="button" id="noButton">No</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
}

.double-action {
  margin: 50px;
  padding: 10px 20px;
  font-size: 16px;
}

#confirmationModal {
  display: none;
  position: absolute;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 150px;
  top: 50px;
  left: 0;
  z-index: 100;
}

#confirmationModal p {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
}

#yesButton, #noButton {
  margin-right: 10px;
}

$(document).ready(function() {
  $('.double-action').on('click', function() {
    // Pobierz pozycję przycisku i ustaw modal z lewej strony przycisku
    const buttonPosition = $(this).offset();
    $('#confirmationModal').css({
      display: 'block',
      top: buttonPosition.top,
      left: buttonPosition.left - $('#confirmationModal').outerWidth() - 10
    });

    // Dodaj efekt rozmycia i dezaktywuj przycisk
    $(this).css('filter', 'blur(2px)').prop('disabled', true);
  });

  $('#noButton').on('click', function() {
    // Ukryj modal, przywróć przycisk do normalnego stanu
    $('#confirmationModal').hide();
    $('.double-action').css('filter', 'none').prop('disabled', false);
  });
});
itlsoft commented 6 days ago 
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formularz z walidacją dat</title>

    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Datepicker CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <form id="date-form">
        <div class="form-group">
            <label for="startDate">Data Od:</label>
            <input type="text" class="form-control" id="startDate" placeholder="Wybierz datę początkową" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="endDate">Data Do:</label>
            <input type="text" class="form-control" id="endDate" placeholder="Wybierz datę końcową" autocomplete="off">
        </div>
        <!-- Ukryte pole ID -->
        <input type="hidden" id="dpsid" value="12345">

        <div class="validation_area text-danger"></div>

        <button type="submit" class="btn btn-primary" id="submit-button">Zapisz</button>
    </form>
</div>

<!-- jQuery, Bootstrap, and Bootstrap Datepicker JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function() {
    var today = new Date();
    today.setHours(0, 0, 0, 0);

    $('#startDate').datepicker({
        format: 'yyyy-mm-dd',
        startDate: today,
        autoclose: true,
        todayHighlight: true
    });

    $('#endDate').datepicker({
        format: 'yyyy-mm-dd',
        startDate: today,
        autoclose: true,
        todayHighlight: true
    });

    $('#startDate').on('changeDate', function() {
        var startDate = $('#startDate').datepicker('getDate');
        $('#endDate').datepicker('setStartDate', startDate || today);

        var endDate = $('#endDate').datepicker('getDate');
        if (endDate && endDate < startDate) {
            $('#endDate').datepicker('setDate', startDate);
        }

        validateWithAjax();
    });

    $('#endDate').on('changeDate', function() {
        var endDate = $('#endDate').datepicker('getDate');
        $('#startDate').datepicker('setEndDate', endDate);

        var startDate = $('#startDate').datepicker('getDate');
        if (startDate && startDate > endDate) {
            $('#startDate').datepicker('setDate', endDate);
        }

        validateWithAjax();
    });

    function validateWithAjax() {
        var startDate = $('#startDate').datepicker('getDate');
        var endDate = $('#endDate').datepicker('getDate');
        var dpsid = $('#dpsid').val();

        if (startDate && endDate && dpsid) {
            // AJAX call to check data
            $.ajax({
                url: '/api/checkdata', // Endpoint API
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    start_date: startDate.toISOString().split('T')[0],
                    end_date: endDate.toISOString().split('T')[0],
                    dpsid: dpsid
                }),
                success: function(response) {
                    if (response.result === 1) {
                        // Jeśli konflikt istnieje
                        $('.validation_area').html("There is already request in this period");
                        $('#submit-button').attr('disabled', true);
                    } else {
                        // Jeśli nie ma konfliktu
                        $('.validation_area').html('');
                        $('#submit-button').removeAttr('disabled');
                    }
                },
                error: function() {
                    // W przypadku błędu serwera
                    alert('Error while validating data. Please try again.');
                }
            });
        } else {
            // Gdy brak wymaganych danych, przycisk pozostaje aktywny
            $('.validation_area').html('');
            $('#submit-button').removeAttr('disabled');
        }
    }

    $('#date-form').on('submit', function(event) {
        var startDate = $('#startDate').datepicker('getDate');
        var endDate = $('#endDate').datepicker('getDate');

        if (!startDate || !endDate) {
            alert("Proszę wypełnić oba pola daty.");
            event.preventDefault();
            return;
        }

        if (endDate < startDate) {
            alert("Data Do nie może być wcześniejsza niż Data Od.");
            event.preventDefault();
            return;
        }

        if ($('#submit-button').is(':disabled')) {
            alert("Nie można zapisać formularza. Sprawdź ostrzeżenia.");
            event.preventDefault();
        }
    });
});
</script>
</body>
</html>
itlsoft commented 4 days ago 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    let currentForm = null; // Przechowuje referencję do aktualnego formularza
    const $tooltip = $('#confirm-tooltip');

    // Przechwytuje kliknięcie na przyciski z klasą submit_button
    $('.submit_button').on('click', function(event) {
        event.preventDefault(); // Blokuje domyślne wysłanie formularza
        currentForm = $(this).closest('form'); // Znajduje formularz
        const buttonOffset = $(this).offset(); // Pobiera pozycję przycisku
        const buttonHeight = $(this).outerHeight();

        // Ustawia pozycję tooltipa
        $tooltip.css({
            top: buttonOffset.top + buttonHeight + 5 + 'px',
            left: buttonOffset.left + 'px'
        }).fadeIn(); // Wyświetla tooltip
    });

    // Obsługa przycisku "Yes" w tooltipie
    $('#confirm-yes').on('click', function() {
        if (currentForm) {
            currentForm.submit(); // Wysyła formularz
        }
        $tooltip.fadeOut(); // Ukrywa tooltip
    });

    // Obsługa przycisku "No" w tooltipie
    $('#confirm-no').on('click', function() {
        $tooltip.fadeOut(); // Ukrywa tooltip
    });

    // Ukrywanie tooltipa po kliknięciu gdziekolwiek poza nim
    $(document).on('click', function(event) {
        if (!$(event.target).closest('.submit_button, #confirm-tooltip').length) {
            $tooltip.fadeOut();
        }
    });
});
</script>
itlsoft commented 4 days ago 
<style>
.confirm-tooltip {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
}
.confirm-tooltip button {
    margin: 5px;
}
</style>

<div id="confirm-tooltip" class="confirm-tooltip">
    <p>Are you sure?</p>
    <button id="confirm-yes">Yes</button>
    <button id="confirm-no">No</button>
</div>
itlsoft commented 4 days ago 
<style>
.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}
</style>

<div id="backdrop" class="backdrop"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    let currentForm = null; // Przechowuje referencję do aktualnego formularza
    const $tooltip = $('#confirm-tooltip');
    const $backdrop = $('#backdrop');

    // Przechwytuje kliknięcie na przyciski z klasą submit_button
    $('.submit_button').on('click', function(event) {
        event.preventDefault(); // Blokuje domyślne wysłanie formularza
        currentForm = $(this).closest('form'); // Znajduje formularz
        const buttonOffset = $(this).offset(); // Pobiera pozycję przycisku
        const buttonHeight = $(this).outerHeight();

        // Ustawia pozycję tooltipa
        $tooltip.css({
            top: buttonOffset.top + buttonHeight + 5 + 'px',
            left: buttonOffset.left + 'px'
        }).fadeIn(); // Wyświetla tooltip

        // Wyświetla półprzezroczyste tło
        $backdrop.fadeIn();
    });

    // Obsługa przycisku "Yes" w tooltipie
    $('#confirm-yes').on('click', function() {
        if (currentForm) {
            currentForm.submit(); // Wysyła formularz
        }
        $tooltip.fadeOut(); // Ukrywa tooltip
        $backdrop.fadeOut(); // Ukrywa tło
    });

    // Obsługa przycisku "No" w tooltipie
    $('#confirm-no').on('click', function() {
        $tooltip.fadeOut(); // Ukrywa tooltip
        $backdrop.fadeOut(); // Ukrywa tło
    });

    // Ukrywanie tooltipa i tła po kliknięciu gdziekolwiek poza nimi
    $(document).on('click', function(event) {
        if (!$(event.target).closest('.submit_button, #confirm-tooltip').length) {
            $tooltip.fadeOut();
            $backdrop.fadeOut();
        }
    });
});
</script>
itlsoft commented 22 hours ago

blob

itlsoft commented 21 hours ago

![Uploading VID_20180124_122726-ezgif.com-video-to-gif-converter.gif…]()

itlsoft commented 21 hours ago

VID_20180124_122726-ezgif com-video-to-gif-converter