This code in adminPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Page</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
nav {
background-color: #333;
overflow: hidden;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 15px; /* Küçültüldü */
text-decoration: none;
}
nav ul li a:hover {
background-color: #555;
}
.page {
display: none;
padding: 20px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" onclick="showDoctorPage()">Doktor İşlemleri</a></li>
<li><a href="#" onclick="showHastaPage()">Hasta İşlemleri</a></li>
<li><a href="#">Rapor İşlemleri</a></li>
</ul>
</nav>
<div id="doctorPage" style="display: none;">
</div>
<div id="hastaPage" style="display: none;">
</div>
<script>
function showDoctorPage() {
// Doktor sayfasını göstermek için işlevi uygula
}
function showHastaPage() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("hastaPage").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/admin/page/patients", true); // /admin/page/patients endpoint'ine GET isteği yapılıyor
xhttp.send();
}
</script>
</body>
</html>
This code in patientOp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Hasta İşlemleri{% endblock %}</title>
<style>
.add-form {
display: none;
margin-top: 20px;
}
form label {
display: block;
margin-bottom: 5px;
}
form input {
width: calc(25% - 7px); /* Genişlik küçültüldü */
padding: 8px;
margin-bottom: 10px;
margin-top: 10px; /* Yukarı kaydırma */
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
form button {
padding: 8px 16px; /* Küçültüldü */
border: none;
border-radius: 4px;
cursor: pointer;
}
button.delete-button {
background-color: #d42f2f;
border: none;
color: white;
padding: 7px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
button.add-button {
background-color: #04AA6D; /* Green */
border: none;
color: white;
padding: 7px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
/* İstediğiniz miktarı ayarlayın */
}
button.save-button {
background-color: #669ee7;
border: none;
color: white;
padding: 7px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
button.edit-button {
background-color: #ccf627; /* Green */
border: none;
color: white;
padding: 7px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
button:hover {
opacity: 0.8;
}
table {
width: 70%;
border-collapse: collapse;
margin: 0;
}
table th, table td {
padding: 6px; /* Küçültüldü */
border-bottom: 1px solid #ddd;
text-align: left;
}
table th {
background-color: #464a47;
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<h1>{% block header %}Hasta İşlemleri{% endblock %}</h1>
{% block content %}
<h1>Hasta Ekle</h1>
<button class="add-button" onclick="showAddHastaForm()">Hasta Ekle</button>
<div id="addHastaForm" class="add-form" style="display: none;">
<form id="hastaForm" action="{{ url_for('admin_patient_page') }}" method="POST">
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="patient_username"><br>
<label for="password">Şifre:</label>
<input type="password" id="password" name="patient_password"><br>
<label for="firstName">Ad:</label>
<input type="text" id="firstName" name="patient_name"><br>
<label for="lastName">Soyad:</label>
<input type="text" id="lastName" name="patient_surname"><br>
<label for="birthday">Doğum Tarihi:</label>
<input type="text" id="birthday" name="patient_birth_date"><br>
<label for="gender">Cinsiyet:</label>
<input type="text" id="gender" name="patient_gender"><br>
<label for="adres">Adres:</label>
<input type="text" id="adres" name="patient_address"><br>
<label for="telephone">Tel No:</label>
<input type="text" id="telephone" name="patient_phone"><br>
<button type="submit" class="save-button">Kaydet</button>
</form>
</div>
<div id="hastaList">
<h2>Eklenen Hastalar</h2>
<table id="hastalar">
<thead>
<tr>
<th>Kullanıcı Adı</th>
<th>Şifre</th>
<th>Ad</th>
<th>Soyad</th>
<th>Doğum Tarihi</th>
<th>Cinsiyet</th>
<th>Adres</th>
<th>Tel No</th>
<th>İşlemler</th>
</tr>
</thead>
<tbody>
{% for patient in patients %}
<tr>
<td>{{ patient.patient_username }}</td>
<td>{{ patient.patient_password }}</td>
<td>{{ patient.patient_name }}</td>
<td>{{ patient.patient_surname }}</td>
<td>{{ patient.patient_birth_date }}</td>
<td>{{ patient.patient_gender }}</td>
<td>{{ patient.patient_address }}</td>
<td>{{ patient.patient_phone }}</td>
<td>
<button class="edit-button" onclick="editHasta(this)">Düzenle</button>
<form action="{{ url_for('delete_patient', patient_id=patient.patient_id) }}" method="POST" style="display: inline;">
<button type="submit" class="delete-button">Sil</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}
<script>
function showAddHastaForm() {
var addHastaForm = document.getElementById('addHastaForm');
addHastaForm.style.display = 'block';
// Formun içindeki inputları temizle
var inputs = addHastaForm.querySelectorAll('input');
inputs.forEach(input => {
input.value = '';
});
}
function editHasta(button) {
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName('td');
var username = cells[0].textContent;
var password = cells[1].textContent;
var firstName = cells[2].textContent;
var lastName = cells[3].textContent;
var birthday = cells[4].textContent;
var gender = cells[5].textContent;
var adres = cells[6].textContent;
var telephone = cells[7].textContent;
document.getElementById('username').value = username;
document.getElementById('password').value = password;
document.getElementById('firstName').value = firstName;
document.getElementById('lastName').value = lastName;
document.getElementById('birthday').value = birthday;
document.getElementById('gender').value = gender;
document.getElementById('adres').value = adres;
document.getElementById('telephone').value = telephone;
row.parentNode.removeChild(row);
}
</script>
</body>
</html>
I can’t make a connection between two different codes here.
First of all, when I click on ‘Patient Operations’ in the adminPage, I want the interface in patientOp.html to appear. However, this interface must go directly under the bar. Additionally, they both need to be in different HTML files. How can I do that?