Skip to content

Commit

Permalink
Update دالة حساب الاحداثيات.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@GisDune
GisDune authored Jan 6, 2025
1 parent 264e6b7 commit 4ea9a43
Showing 1 changed file with 21 additions and 170 deletions.
191 changes: 21 additions & 170 deletions دالة حساب الاحداثيات.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>حساب الإحداثيات الجديدة</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
Expand All @@ -14,62 +13,47 @@
display: flex;
height: 100vh;
flex-direction: row;
justify-content: space-between;
}

/* تصمييم الخريطة */
#map {
border: 2px solid #493415;
border-radius: 10px;
margin: 3px;
height: 100%;
width: 70%;
height: 100%;
}

/* تصمييم نموذج الإدخال ونتائج الحساب */
.content {
width: 30%;
padding: 0px 20px;
height: 100vh;

padding: 20px;
background: linear-gradient(to top, #8a80ac, #9056a3, #5d224b, #8a80ac);
background: linear-gradient(to top right, #ff999960 0%, #e9b59ba5 0%, #FF9999 60%, #e9b59b8d 100%);
border: 3px solid #333;
border-radius: 10px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: center;
justify-content: flex-start;
box-sizing: border-box;
}

/* تنسيق الجداول */
table {
width: 100%;
margin-top: 0px 10px 5px 10px;
margin-top: 10px;
border-collapse: collapse;
}

table th {
background-color: #444;
color: white;
}

table, th, td {
table th, table td {
border: 1px solid black;
padding: 8px;
text-align: center;
background-color: white;
}

/* تنسيق النموذج */
form label {
width: 100%;
color: rgb(43, 2, 2);
margin-bottom: 5px;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: flex-end;
}

form input {
Expand All @@ -78,6 +62,7 @@
margin-top: 2px;
border-radius: 15px;
border: 2px solid #e6c7c7;
box-sizing: border-box;
}

#b1, #b2 {
Expand All @@ -89,188 +74,54 @@
margin: 20px 25px;
font: italic bold 16px fantasy;
color: aliceblue;
box-sizing: border-box;
}

#b1:hover, #b2:hover {
background-color: #b5bbb8;
}

/* تخطيط الاستجابة للواجهة */
@media (max-width: 768px) {
body {
flex-direction: column; /* ترتيب الأعمدة على الشاشات الصغيرة */
height: 100vh;
flex-direction: column;
height: auto;
}

#map, .content {
width: 100%; /* جعل الخريطة والنموذج يشغلان العرض الكامل على الشاشات الصغيرة */
height: 50vh; /* خفض ارتفاع الخريطة لتناسب الشاشات الصغيرة */
width: 100%;
height: auto;
flex: 1;
}

.content {
padding: 10px;
width: 100%; /* العرض الكامل */
}

table, input, button {
width: 100%; /* جعل جميع العناصر تشغل العرض الكامل */
width: 100%;
box-sizing: border-box;
}

#b1, #b2 {
width: auto; /* السماح للأزرار بالظهور بشكل أفضل */
width: auto;
padding: 10px 20px;
}

h2 {
font-size: 18px;
}

h3 {
font-size: 16px;
}
}

h2 {
display: inline-block;
text-align: center;
border: 3px solid #151414;
background-color: #444;
border-radius: 80px 15px;
color: aliceblue;
padding: 5px 5px;
margin: 0px 10px 30px 10px;
}

h3 {
margin-bottom: 5px;
color: #5b0909;
text-align: left;
}

#undo {
margin-top: 5px;
border-radius: 60px 20px;
padding: 8px;
font: 18px bold;
color: white;
background-color: brown;
}

#undo:hover {
background-color: #caa7a7;
}
</style>
</head>
<body>
<div id="map"></div> <!-- خريطة Leaflet على الجانب الأيسر -->

<div id="map"></div>
<div class="content">
<h2>حساب الإحداثيات الجديدة</h2>
<!-- نموذج إدخال البيانات -->
<form id="dataForm">
<div style="display: flex; justify-content: space-between; gap: 5px; margin-bottom: 5px;">
<div style="border: 2px solid #333; border-radius: 10px; padding:5px 5px; width: 48%;">
<label for="latitude" style="display: block; margin-bottom: 5px; font-weight: bold;">:خط العرض</label>
<input step="0.0001" type="number" id="latitude" required>
</div>
<div style="border: 2px solid #333; border-radius: 10px;padding:5px 5px; width: 48%;">
<label for="longitude" style="display: block; margin-bottom: 5px; font-weight: bold;">:خط الطول</label>
<input step="0.0001" type="number" id="longitude" required>
</div>
</div>

<label for="direction">:الاتجاه (بالدرجات)</label>
<input step="0.0001" type="number" id="direction" required><br>

<label for="windspeed">:سرعة الرياح (كم/ساعة)</label>
<input step="0.0001" type="number" id="windspeed" required><br>

<label for="time">:الزمن (ساعات)</label>
<input step="0.0001" type="number" id="time" required><br>

<button id="b1" onclick="clearInputs()">مسح البيانات</button><button id="b2" type="submit">حساب</button>
</form>

<h3>النتائج:</h3>
<!-- عرض الجدول -->
<table id="resultsTable">
<thead>
<tr>
<th>ID</th>
<th>خط العرض</th>
<th>خط الطول</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button id="undo" onclick="window.location.href='jsتجربة.html';">الانتقال إلى الصفحة السابقة</button>
<!-- Content here -->
</div>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
// إنشاء الخريطة باستخدام Leaflet
var map = L.map('map').setView([31.2, 30.0], 6); // تعيين الإحداثيات الأساسية

// إضافة طبقة الخريطة
var map = L.map('map').setView([31.2, 30.0], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

let idCounter = 1;
// دالة لإضافة الإحداثيات إلى الجدول والخريطة
function addResultToTableAndMap(id, lat, lon) {
// إضافة البيانات إلى الجدول
var table = document.getElementById("resultsTable").getElementsByTagName('tbody')[0];
var row = table.insertRow();
row.innerHTML = `<td>${idCounter}</td><td>${lat}</td><td>${lon}</td>`;

idCounter++;
// إسقاط ماركر على الخريطة
L.marker([lat, lon]).addTo(map)
.bindPopup(`ID: ${idCounter-1}<br>Lat: ${lat},<br> Lon: ${lon}`)
.openPopup();
}

// دالة لإرسال البيانات إلى الخادم
document.getElementById('dataForm').addEventListener('submit', function(e) {
e.preventDefault();

var latitude = parseFloat(document.getElementById('latitude').value);
var longitude = parseFloat(document.getElementById('longitude').value);
var direction = parseFloat(document.getElementById('direction').value);
var windspeed = parseFloat(document.getElementById('windspeed').value);
var time = parseFloat(document.getElementById('time').value);

// إرسال البيانات إلى الخادم باستخدام fetch
fetch('http://127.0.0.1:6060/calculate', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
latitude: latitude,
longitude: longitude,
direction: direction,
windspeed: windspeed,
time: time
})
})
.then(response => response.json())
.then(data => {
// إضافة الإحداثيات الجديدة إلى الجدول والخريطة
addResultToTableAndMap(data.id, data.new_latitude, data.new_longitude);
})
.catch(error => console.error('Error:', error));
window.addEventListener('resize', function () {
map.invalidateSize();
});

// دالة لمسح المدخلات
function clearInputs() {
document.getElementById("latitude").value = "";
document.getElementById("longitude").value = "";
document.getElementById("direction").value = "";
document.getElementById("windspeed").value = "";
document.getElementById("time").value = "";
}
</script>
</body>
</html>

0 comments on commit 4ea9a43

Please sign in to comment.