File manager - Edit - G:/PleskVhosts/indiaminerals.in/vgm.INFOFIXDEVELOPERS.COM/admin/observation-form.html
Back
<!DOCTYPE html> <!-- This is a starter template page. Use this page to start your new project from scratch. This page gets rid of all links and provides the needed markup only. --> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Observation Form</title> <!-- Google Font: Source Sans Pro --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> <!-- Font Awesome Icons --> <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css"> <!-- Theme style --> <link rel="stylesheet" href="dist/css/adminlte.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <style> .main-header { background-color: #9F91CC; color: #ffffff; } .main-sidebar { background-color: #3D246C; color: #ffffff; } .container { margin: 0 auto; padding: 20px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .header { display: flex; align-items: center; justify-content: center; background-color: #9F91CC; color: #fff; padding: 10px 20px; border-radius: 5px; font-family: 'Roboto', sans-serif; font-weight: 600; margin-bottom: 20px; } .header img { height: 50px; width: auto; margin-right: 10px; } .table-dark{ background-color: #9F91CC; color: #fff; } /* Form Label Styles */ label { font-weight: bold; color: #555; } /* Text Input Styles */ .form-control { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; } /* Textarea Styles */ textarea.form-control { height: 100px; } /* Checkbox Styles */ .form-check-input[type="checkbox"] { margin-top: 5px; } /* Button Styles */ .btn-primary { background-color: #3D246C; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; } .btn-primary:hover { background-color: #9F91CC; } /* Update table header and row styles */ .table { background-color: #9F91CC; color: #fff; } .table thead th { background-color: #9F91CC; color: #fff; border-color: #9F91CC; } .table tbody td { background-color: #f9f9f9; color: #333; border-color: #ddd; } </style> <body class="hold-transition sidebar-mini"> <div class="wrapper"> <!-- Navbar --> <nav class="main-header navbar navbar-expand navbar-white navbar-light"> <!-- Left navbar links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="#" class="nav-link">Home</a> </li> </ul> </nav> <!-- /.navbar --> <!-- Main Sidebar Container --> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <!-- Brand Logo --> <a href="#" class="brand-link"> <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> <span class="brand-text font-weight-light">AdminLTE 3</span> </a> <!-- Sidebar --> <div class="sidebar"> <!-- Sidebar user panel (optional) --> <!-- SidebarSearch Form --> <div class="form-inline mt-2"> <div class="input-group" data-widget="sidebar-search"> <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-sidebar"> <i class="fas fa-search fa-fw"></i> </button> </div> </div> </div> <!-- Sidebar Menu --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false" > <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library --> <li class="nav-item"> <a href="starter.html" class="nav-link"> <i class="nav-icon fas fa-th"></i> <p>Animal Registration</p> </a> </li> <li class="nav-item"> <a href="observation-form.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Observation Form</p> </a> </li> <li class="nav-item"> <a href="animal-master.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Animal Category Master</p> </a> </li> <li class="nav-item"> <a href="special-investigation.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Special Investigation</p> </a> </li> <li class="nav-item"> <a href="discharge-detail.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Discharge Details </p> </a> </li> <li class="nav-item"> <a href="death-form.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Death Form </p> </a> </li> <li class="nav-item"> <a href="medical-master.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Medicine Master </p> </a> </li> <li class="nav-item"> <a href="purchase-medicine.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Purchase Medicine </p> </a> </li> </ul> </nav> <!-- /.sidebar-menu --> </div> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <div class="container"> <div class="header"> Observation Form </div> <form> <div class="form-row"> <!-- Column 1 --> <div class="col-md-3"> <!-- Animal Category --> <div class="form-group"> <label for="registration">Tag No.</label> <input type="text" class="form-control" id="registration" name="registration"> </div> </div> <div class="col-md-3"> <div class="text-center"> <button type="submit" class="btn btn-primary mt-4">Submit</button> </div> </div> </div> <!-- info row --> <div class="row invoice-info"> <div class="col-md-6 invoice-col"> <address> <strong>Owner Details</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> Phone: (804) 123-5432<br> Email: info@almasaeedstudio.com </address> </div> <!-- /.col --> <div class="col-md-6 invoice-col"> <address> <strong>Animal Details</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> Phone: (555) 539-1037<br> Email: john.doe@example.com </address> </div> </div> <h4 class="text-center">Animal Treatment Details</h4> <div class="container"> <div class="form-row"> <div class="col-md-3"> <div class="form-group"> <label for="date">Date:</label> <input type="date" id="date" name="date" class="form-control"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label for="treatment">Treatment:</label> <select id="treatment" name="treatment" class="form-control"> <option value="treatment1">Treatment 1</option> <option value="treatment2">Treatment 2</option> <option value="treatment3">Treatment 3</option> </select> </div> </div> <div class="col-md-3"> <div class="form-group"> <label for="dose">Dose:</label> <input type="text" id="dose" class="form-control"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label>Dose:</label><br> <div class="form-check form-check-inline"> <input type="radio" id="od" name="dose" value="OD" class="form-check-input"> <label class="form-check-label" for="od">OD</label> </div> <div class="form-check form-check-inline"> <input type="radio" id="bid" name="dose" value="BID" class="form-check-input"> <label class="form-check-label" for="bid">BID</label> </div> <div class="form-check form-check-inline"> <input type="radio" id="tid" name="dose" value="TID" class="form-check-input"> <label class="form-check-label" for="tid">TID</label> </div> <button type="button" class="btn btn-secondary" id="addDataButton"><i class="fa fa-plus"></i></button> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modal-default" data-toggle="tooltip" title="Previous Dose" data-delay="0"><i class="fa fa-search"></i></button> </div> <div class="modal fade" id="modal-default"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Previous Dose Given</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4"> <div class="mb-3"> <label for="date1">Date 1:</label> <input type="date" class="form-control" id="date1"> </div> </div> </div> <div class="mt-3"> <button class="btn btn-primary" id="viewDataBtn">View Data</button> </div> <div class="mt-3"> <table class="table table-bordered"> <thead> <tr> <th>Date</th> <th>Treatment</th> <th>Dose</th> <th>Dose 2</th> </tr> </thead> <tbody id="dataBody"> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </form> <!-- Update the table with new classes --> <table id="noticeTable" class="table table-bordered my-2 mt-3"> <thead class="table-dark"> <tr> <th scope="col">S. No</th> <th scope="col">Date</th> <th scope="col">Treatment</th> <th scope="col">Dose:</th> <th scope="col">OD, BID, TID</th> <th scope="col">Actions</th> </tr> </thead> <tbody id="databody"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <button><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button> <button><i class="fa fa-trash" aria-hidden="true"></i></button> </td> </tr> <!-- Existing rows in the table --> </tbody> </table> <div class="col-md-12"> <div class="text-center"> <button type="submit" class="btn btn-primary mt-4">Submit</button> </div> </div> </div> <!-- /.content --> </div> <footer class="main-footer text-center"> <!-- To the right --> <!-- Default to the left --> <strong >Copyright © 2014-2021 <a href="https://adminlte.io">VGM Charitable Trust</a>.</strong > All rights reserved. </footer> </div> <script> $(document).ready(function () { // Handle date filtering $("#dateFilter").on("change", function () { var selectedDate = $(this).val(); $("table tbody tr").hide(); $("table tbody tr").each(function () { var rowDate = $(this).find("td:first").text(); if (selectedDate === rowDate) { $(this).show(); } }); }); }); </script> <script> document.addEventListener("DOMContentLoaded", function () { const addButton = document.getElementById("addDataButton"); const dateInput = document.getElementById("date"); const treatmentInput = document.getElementById("treatment"); const doseInput = document.getElementById("dose"); const tableBody = document.getElementById("databody"); // Function to update the table with data from local storage function updateTableFromLocalStorage() { // Check if local storage is available if (typeof localStorage !== "undefined") { // Retrieve data from local storage const storedData = JSON.parse(localStorage.getItem("data")) || []; // Clear the table tableBody.innerHTML = ""; // Populate the table with stored data storedData.forEach(function (data, index) { const newRow = document.createElement("tr"); newRow.innerHTML = ` <td>${index + 1}</td> <td>${data.date}</td> <td>${data.treatment}</td> <td>${data.dose}</td> <td>${data.doseRadioValue}</td> `; tableBody.appendChild(newRow); }); } } // Load data from local storage when the page loads updateTableFromLocalStorage(); addButton.addEventListener("click", function () { // Get the input values const date = dateInput.value; const treatment = treatmentInput.value; const dose = doseInput.value; const doseRadio = document.querySelector('input[name="dose"]:checked'); const doseRadioValue = doseRadio ? doseRadio.value : ""; // Create a new row in the table const newRow = document.createElement("tr"); // Add serial number (assuming you want a simple incrementing number) newRow.innerHTML = ` <td>${tableBody.children.length + 1}</td> <td>${date}</td> <td>${treatment}</td> <td>${dose}</td> <td>${doseRadioValue}</td> `; // Add the new row to the table tableBody.appendChild(newRow); // Store the data in local storage (you can customize the key) const data = { date, treatment, dose, doseRadioValue, }; // Check if local storage is available if (typeof localStorage !== "undefined") { // Retrieve existing data from local storage (if any) const existingData = JSON.parse(localStorage.getItem("data")) || []; // Add the new data to the existing data existingData.push(data); // Store the updated data in local storage localStorage.setItem("data", JSON.stringify(existingData)); } // Clear the input fields dateInput.value = ""; treatmentInput.value = ""; doseInput.value = ""; // Clear the selected radio button const radioButtons = document.querySelectorAll('input[name="dose"]'); radioButtons.forEach((radio) => (radio.checked = false)); }); }); </script> <!-- jQuery --> <!-- Add Bootstrap JS and Popper.js Links (for Bootstrap functionality) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@2.10.2/dist/umd/popper.min.js"></script> <script src="plugins/jquery/jquery.min.js"></script> <!-- Bootstrap 4 --> <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- AdminLTE App --> <script src="dist/js/adminlte.min.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.3.33 | Generation time: 0.08 |
proxy
|
phpinfo
|
Settings