index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<!--<script src="js/patientList.js"></script>-->
<!--<script src="js/visitData.js"></script>-->
<script src="js/app.js"></script>
<script>
var patientList = [];
var visitData = new Object;
ons.bootstrap()
ons.ready(function(){
});
</script>
<style>
.item, .detail-item {
padding: 10px;
line-height: 1;
}
.item-thum {
background-color: #ccc;
width: 50px;
height: 50px;
border-radius: 4px;
}
.item-id, .detail-item-id {
font-size: 15px;
font-weight: 500;
}
.item-name, .item-birthdate, .item-address, .detail-item-dept, .detail-item-diseaseName {
font-size: 14px;
color: #666;
line-height: 1.3;
margin: 4px 0 0 0;
padding: 0 30px 0 0;
}
.item-gender {
font-size: 12px;
color: #999;
float: right;
}
</style>
</head>
<body>
<ons-navigator page="list.html" var="app.navi"></ons-navigator>
</body>
</html>
list.html
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Master Details</div>
</ons-toolbar>
<ons-list id="item-list">
</ons-list>
</ons-page>
detail.html
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Details</div>
</ons-toolbar>
<ons-list modifier="inset" style="margin-top: 10px">
<ons-list-item class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum">
<img src="" class="item-thum-photo" width="50px"></img>
</div>
</ons-col>
<ons-col>
<header>
<span class="item-id">id</span>
<span class="item-gender">gender</span>
</header>
<p class="item-name">name</p>
<p class="item-birthdate">birthdate</p>
<p class="item-address">address</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item">
<ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
Add a note
</ons-list-item>
</ons-list>
<ons-list id="detail-item-list" style="margin-top: 10px">
</ons-list>
</ons-page>
app.js
(function(){
'use strict';
var currentItem = {};
var visitData = [];
var patientList = [];
$(document).on('pageinit', '#detail-page', function() {
getVisitData(currentItem.id);
var html = '';
$.each(visitData, function(i, item) {
html += '<ons-list-item class="detail-item">';
html += '<header>';
html += '<span class="detail-item-date">' + item.date + '</span>';
html += '</header>';
html += '<p class="detail-item-dept">' + item.dept + '</p>';
html += '<p class="detail-item-diseaseName">' + item.diseaseName + '</p>';
html += '</ons-list-item>';
});
$("#detail-item-list").html(html);
var content = $("#detail-item-list").get(0);
ons.compile(content);
$('.item-id', this).text(currentItem.id);
$('.item-gender', this).text(currentItem.gender);
$('.item-name', this).text(currentItem.name);
$('.item-birthdate', this).text(currentItem.birthdate);
$('.item-address', this).text(currentItem.address);
$('.add-note-action-item', this).click(function () {
alert('dummy message');
});
});
$(document).on('pageinit', '#list-page', function() {
getPatientList();
var html = '';
$.each(patientList, function(i, item) {
html += '<ons-list-item modifier="chevron" class="item">';
html += '<ons-row>';
html += '<ons-col width="60px"> ';
html += '<div class="item-thum">';
html += '</div>';
html += '</ons-col>';
html += '<ons-col>';
html += '<header>';
html += '<span class="item-id">' + item.id + '</span>';
html += '<span class="item-gender">' + item.gender + '</span>';
html += '</header>';
html += '<p class="item-name">' + item.name + '</p>';
html += '<p class="item-birthdate">' + item.birthdate + '</p>';
html += '<p class="item-address">' + item.address + '</p>';
html += '</ons-col>';
html += '</ons-row> ';
html += '</ons-list-item>';
}
);
$("#item-list").html(html);
var content = $("#item-list").get(0);
ons.compile(content);
$('.item', this).on('click', function() {
currentItem = {
id : $('.item-id', this).text(),
gender : $('.item-gender', this).text(),
name : $('.item-name', this).text(),
birthdate : $('.item-birthdate', this).text(),
address : $('.item-address', this).text()
};
app.navi.pushPage('detail.html');
});
});
function getPatientList() {
var url = 'http://172.16.108.250/~semi2015/sample/getPatientList.php';
$.ajax({
type: 'GET',
url: url,
async: false,
cache: false
}).done(function(response, status, error){
if (status == 'success') {
var res = JSON.parse(response);
if (res.status == 'OK') {
patientList = res.patientList;
} else {
alert('ERROR:res.status=' + res.status);
}
} else {
alert('文書データ取得失敗');
}
}).fail(function(xhr, status, error){
var message = "xhr.status = " + xhr.status + ", xhr.statusText = " + xhr.statusText + ", status = " + status + ", error = " + error;
alert('サーバから応答がありません: ' + message);
});
}
function getVisitData(patientId) {
var url = 'http://172.16.108.250/~semi2015/sample/getVisitData.php?patientId=' + patientId;
$.ajax({
type: 'GET',
url: url,
async: false,
cache: false
}).done(function(response, status, error){
if (status == 'success') {
var res = JSON.parse(response);
if (res.status == 'OK') {
visitData = res.visitData;
} else {
alert('ERROR:res.status=' + res.status);
}
} else {
alert('文書データ取得失敗');
}
}).fail(function(xhr, status, error){
var message = "xhr.status = " + xhr.status + ", xhr.statusText = " + xhr.statusText + ", status = " + status + ", error = " + error;
alert('サーバから応答がありません: ' + message);
});
}
})();
0 件のコメント:
コメントを投稿