<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ระบบจัดการโครงสร้างต้นไม้</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>ระบบจัดการโครงสร้าง Stage-Area-Zone</h1>
<div id="message-container"></div>
</header>
<div class="toolbar">
<button id="add-root-btn" class="btn btn-primary">เพิ่มรายการใหม่</button>
<button id="collapse-all-btn" class="btn">ยุบทั้งหมด</button>
<button id="expand-all-btn" class="btn">ขยายทั้งหมด</button>
<button id="save-btn" class="btn btn-success">บันทึก</button>
<button id="refresh-btn" class="btn btn-info">รีเฟรช</button>
</div>
<div class="app-container">
<main class="tree-wrapper">
<h2>โครงสร้าง</h2>
<div id="tree-container" class="tree"></div>
</main>
<aside class="sidebar">
<div class="info-panel">
<h2>ข้อมูล JSON</h2>
<pre id="json-output" class="code-block"></pre>
</div>
<div id="zone-details" class="zone-details" style="display: none;">
<!-- รายละเอียด Zone จะถูกเพิ่มโดย JavaScript -->
</div>
</aside>
</div>
<div class="usage-examples">
<h2>ตัวอย่างการใช้งาน</h2>
<div class="example-section">
<h3>การนำ Zone ID ไปใช้งานกับฐานข้อมูลอื่น</h3>
<p>เลือก Zone (รายการระดับ 3) ที่ต้องการใช้งาน โดยคลิกที่ปุ่ม "เชื่อมต่อกับระบบอื่น" บนเมนูการกระทำของรายการ</p>
<div class="code-example">
<h4>ตัวอย่างโค้ด PHP สำหรับใช้ Zone ID</h4>
<pre>
<?php
// ตัวอย่างการใช้ Zone ID เชื่อมกับฐานข้อมูลอื่น
$zoneId = $_GET['zone_id'];
$externalId = $_GET['external_id'];
// ตรวจสอบข้อมูล Zone จาก API
$zoneInfo = json_decode(file_get_contents(
"api.php?action=get_node&id={$zoneId}"
), true);
// ถ้าพบข้อมูล Zone
if ($zoneInfo['status'] === 'success') {
$zoneData = $zoneInfo['data'];
// เชื่อมต่อกับฐานข้อมูลอื่น
$otherDb = new mysqli('localhost', 'username', 'password', 'other_database');
// สร้างหรืออัพเดตข้อมูลในอีกฐานข้อมูลหนึ่ง
$stmt = $otherDb->prepare(
"INSERT INTO zone_mappings (zone_id, external_id, zone_name)
VALUES (?, ?, ?)
ON DUPLICATE KEY UPDATE zone_name = ?"
);
$stmt->bind_param(
"isss",
$zoneData['id'],
$zoneData['external_id'],
$zoneData['name'],
$zoneData['name']
);
$stmt->execute();
echo "บันทึกการเชื่อมโยง Zone สำเร็จ";
}
?>
</pre>
</div>
</div>
</div>
</div>
<!-- นำเข้าไฟล์ JavaScript -->
<script src="tree.js"></script>
<script src="script.js"></script>
</body>
</html>