Commit 8000e4ee authored by Lorex's avatar Lorex
Browse files

feat: List patient

parent 79bded1d
const baseUrl = 'https://hapi.fhir.tw/fhir';
\ No newline at end of file
const init = () => {
$('#content').empty();
$('#content').append(`Initialized, baseURL is ${baseUrl}`);
}
\ No newline at end of file
const listPatient = () => {
let content = $('#content');
// 清空畫面並顯示 Loading 訊息
content.empty();
content.append("<p> Loading... </p>");
// 抓資料
fetch(`${baseUrl}/Patient`)
.then(res => res.json())
.then(json => {
content.empty();
let patientList = json.entry;
// 顯示資料筆數
content.append(`<p>共找到 ${json.total} 筆資料</p>`)
// 建立表格
content.append(`<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>身分證字號</th>
<th>性別</th>
<th>出生年月日</th>
</tr>
</thead>
<tbody id="patientTableBody"> </tbody>
</table>`);
patientList.map( entry => {
$('#patientTableBody').append(`
<tr>
<td>${entry.resource.id}</td>
<td>${(entry.resource.identifier)?entry.resource.identifier[0].value: ""}</td>
<td>${entry.resource.gender}</td>
<td>${entry.resource.birthDate}</td>
</tr>
`)
});
// 顯示下一頁資料
if(json.link.length > 0 && json.link[1].relation === 'next'){
content.append(`<a onclick="listPatientWithUrl('${json.link[1].url}')" class="btn btn-primary">下一頁</a>`);
}
});
};
const listPatientWithUrl = (url) => {
let content = $('#content');
// 清空畫面並顯示 Loading 訊息
content.empty();
content.append("<p> Loading... </p>");
// 抓資料
fetch(`${url}`)
.then(res => res.json())
.then(json => {
content.empty();
let patientList = json.entry;
// 顯示資料筆數
content.append(`<p>共找到 ${json.total} 筆資料</p>`)
// 建立表格
content.append(`<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>身分證字號</th>
<th>性別</th>
<th>出生年月日</th>
</tr>
</thead>
<tbody id="patientTableBody"> </tbody>
</table>`);
patientList.map( entry => {
$('#patientTableBody').append(`
<tr>
<td>${entry.resource.id}</td>
<td>${(entry.resource.identifier)?entry.resource.identifier[0].value: ""}</td>
<td>${entry.resource.gender}</td>
<td>${entry.resource.birthDate}</td>
</tr>
`)
});
// 顯示上一頁資料
if(json.link.length === 2 && json.link[1].relation === 'previous'){ // 最末頁
content.append(`<a onclick="listPatientWithUrl('${json.link[1].url}')" class="btn btn-primary">上一頁</a>`);
} else if (json.link.length === 3 && json.link[2].relation === 'previous'){
content.append(`<a onclick="listPatientWithUrl('${json.link[2].url}')" class="btn btn-primary">上一頁</a>`);
}
// 顯示下一頁資料
if(json.link.length > 1 && json.link[1].relation === 'next'){
content.append(`<a onclick="listPatientWithUrl('${json.link[1].url}')" class="btn btn-primary">下一頁</a>`);
}
});
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<title>範例程式</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- FHIR Config -->
<script src="assets/js-fhir/config.js"></script>
<!-- FHIR Scripts -->
<script src="assets/js-fhir/init.js"></script>
<script src="assets/js-fhir/listPatient.js"></script>
<script src="assets/js-fhir/uploadPatient.js"></script>
</head>
<body onload="init()">
<!-- <p id="text"></p> -->
<div class="container">
<div class="row">
<h1>網頁表單登錄</h1>
</div>
<div class="row">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item" onclick="listPatient()">Patient 清單</li>
<li class="list-group-item" onclick="showPatientForm()">登錄 Patient</li>
<li class="list-group-item">登錄 Observation</li>
</ul>
</div>
<div class="col-md-9" id="content">
</div>
</div>
</div>
<!-- Bootstrap JS-->
<script src="assets/js/jquery-3.4.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment