You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
362 lines
14 KiB
362 lines
14 KiB
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<!-- 主頁header -->
|
|
<?php
|
|
/*--- 處理session ----*/
|
|
include "include-session-security.php"; #確認session
|
|
/*--- 處理session ----*/
|
|
|
|
$id_schedule = $_REQUEST["id_schedule"];
|
|
$fr = $_REQUEST["fr"]; // fr=cust:客戶端過來
|
|
$view = ($_REQUEST["view"]=="Y") ? "Y" : "N"; // Y=限瀏覽 N:default
|
|
$capsuleid = "";
|
|
|
|
/*--- 處理重新刷新後id_schedule與token消失的補救方式
|
|
if ($id_schedule == "") {
|
|
$id_schedule = $_COOKIE['id_schedule'];
|
|
}
|
|
if ($token == "") {
|
|
$token = $_COOKIE['token'];
|
|
}
|
|
處理重新刷新後id_schedule與token消失的補救方式 ----*/
|
|
|
|
require_once "db/database.php"; # 載入db.php來連結資料庫
|
|
|
|
# 從資料庫取出jason並轉成array
|
|
$sql_query = "SELECT * FROM schedule where id = '$id_schedule'";
|
|
$data = mysqli_query($link, $sql_query);
|
|
foreach($data as $data){
|
|
$item = $data['item'];
|
|
$item_detail = $data['item_detail'];
|
|
$result = $data['result'];
|
|
|
|
}
|
|
|
|
#$actualdate = date('Y/m/d H:i:s');
|
|
$actualdate = $data['actualdate'];
|
|
#print_r("$item");
|
|
#print_r("$result");
|
|
#echo "id_schedule: " . $id_schedule . "<br>";
|
|
#echo "token: " . $token;
|
|
|
|
$item_arr = json_decode($item,true); //加上 true 才會轉成陣列
|
|
$item_detail_arr = json_decode($item_detail,true); //加上 true 才會轉成陣列
|
|
$result_arr = json_decode($result,true); //加上 true 才會轉成陣列
|
|
|
|
#$baditems = array_sum($result_arr) - count($result_arr);
|
|
|
|
|
|
|
|
$baditems = 0;
|
|
$i=count($result_arr);
|
|
for($j=0 ; $j<$i ; $j++){
|
|
#echo "[" . $item_arr[$j] . "][" . $item_detail_arr[$j] . "][" . $result_arr[$j] . "]";
|
|
if ($result_arr[$j] > 1) {
|
|
$baditems = $baditems + 1;
|
|
}
|
|
#echo "<br>";
|
|
}
|
|
|
|
|
|
include "include-header.php";
|
|
|
|
?>
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<script src="js/jquery-2.1.4.min.js"></script>
|
|
<script type="text/javascript" src="js/index.js"></script>
|
|
<script type="text/javascript" src="js/html2canvas-0.4.1.js"></script>
|
|
<script type="text/javascript" src="js/jspdf.min.js"></script>
|
|
<script language="JavaScript" type="text/javascript" src="js/jSignature.min.js"></script>
|
|
|
|
<title>手写签名</title>
|
|
|
|
<style type="text/css">
|
|
|
|
#canvasDiv{
|
|
border:1px dotted #000;
|
|
}
|
|
|
|
.star-rater .star {
|
|
font-size: 2rem;
|
|
color: gray;
|
|
}
|
|
|
|
.check-item {
|
|
margin:10px 0 10px 0;
|
|
font-size:13px;
|
|
}
|
|
</style>
|
|
|
|
|
|
<body id="bb">
|
|
|
|
|
|
<br><br>
|
|
<div id="pdfContainer" class="container" style="background-color:#fff">
|
|
<?php if ($view == "N") { $capsuleid = ' id="appCapsule"'; ?><div class="pageTitle bg-primary text-light">客戶評價</div><?php } else { ?>
|
|
<!-- App Header -->
|
|
<div class="appHeader bg-primary text-light">
|
|
<div class="left">
|
|
<a href="javascript:;" class="headerButton goBack">
|
|
<ion-icon name="chevron-back-outline"></ion-icon>
|
|
</a>
|
|
</div>
|
|
<div class="pageTitle">保養明細</div>
|
|
</div>
|
|
<!-- * App Header -->
|
|
<?php } ?>
|
|
|
|
<!-- App Capsule -->
|
|
<div<?php echo $capsuleid; ?>>
|
|
<form name = "fileForm" action="app-maintenance-uploadsuccess-surveyupload.php" method="post">
|
|
|
|
<div class="tab-pane" id="sounds" role="tabpanel">
|
|
|
|
<div class="section full mt-1">
|
|
<div class="wide-block pt-2 pb-2">
|
|
|
|
<a class="item">保養日期： <?php echo $actualdate; ?> </a><br>
|
|
<?php
|
|
if ($baditems > 0){
|
|
echo "<span style='color:orange';>(有" . $baditems . "項問題)</span>";
|
|
}
|
|
else{
|
|
echo "<span style='color:blue';>Good!</span>";
|
|
}
|
|
?>
|
|
<!-- <span class="badge badge-primary">Good</span> -->
|
|
<!-- <span class="badge badge-danger">1</span> -->
|
|
<!-- <span class="badge badge-warning">1</span> -->
|
|
</a>
|
|
<!-- sub menu -->
|
|
<ul class="listview simple-listview">
|
|
<?php
|
|
$i=count($result_arr);
|
|
for($j=0 ; $j<$i ; $j++){
|
|
switch ($result_arr[$j]) {
|
|
case 1:
|
|
echo "<li >" . ($j + 1) . "." . " " . $item_detail_arr[$j]. "  (√)</li>";
|
|
break;
|
|
case 2:
|
|
echo "<li style='color:orange';>" . ($j + 1) . "." . " " . $item_detail_arr[$j] . "  (△)</li>";
|
|
break;
|
|
case 3:
|
|
echo "<li style='color:blue';>" . ($j + 1) . "." . " " . $item_detail_arr[$j] . "  (○)</li>";
|
|
break;
|
|
case 4:
|
|
echo "<li style='color:red';>" . ($j + 1) . "." . " " . $item_detail_arr[$j] . "  (×)</li>";
|
|
break;
|
|
case 0:
|
|
echo "<li style='color:green';><i>" . ($j + 1) . "." . " " . "" . $item_detail_arr[$j] . "  (-)</i></li>";
|
|
break;
|
|
}
|
|
}
|
|
|
|
echo "<li><a class='item'>" .
|
|
"<br>" . "<span>√：正常</span>" .
|
|
"<br>" . "<span style='color:orange';>△：已損耗再觀察</span>" .
|
|
"<br>" . "<span style='color:blue';>○：已檢修調整</span>" .
|
|
"<br>" . "<span style='color:red'>×：不良或損壞需更換</span>" .
|
|
"<br>" . "<span style='color:green'>-：<i>無此項目</i></span>" .
|
|
"</a></li>";
|
|
?>
|
|
</ul>
|
|
<!-- * sub menu-->
|
|
|
|
<fieldset class="star-rating">
|
|
<legend class="star-rating__title">星級評價 > 保養品質</legend>
|
|
<div class="star-rating__stars">
|
|
<input class="star-rating__input" type="radio" name="star_item" value="1" id="rating-1" />
|
|
<label class="star-rating__label" for="rating-1" aria-label="One" style="background-image:url(/app/assets/img/icon/icon-star-active.png)"></label>
|
|
<input class="star-rating__input" type="radio" name="star_item" value="2" id="rating-2" />
|
|
<label class="star-rating__label" for="rating-2" aria-label="Two" style="background-image:url(/app/assets/img/icon/icon-star-active.png)"></label>
|
|
<input class="star-rating__input" type="radio" name="star_item" value="3" id="rating-3" />
|
|
<label class="star-rating__label" for="rating-3" aria-label="Three" style="background-image:url(/app/assets/img/icon/icon-star-active.png)"></label>
|
|
<input class="star-rating__input" type="radio" name="star_item" value="4" id="rating-4" />
|
|
<label class="star-rating__label" for="rating-4" aria-label="Four" style="background-image:url(/app/assets/img/icon/icon-star-active.png)"></label>
|
|
<input class="star-rating__input" type="radio" name="star_item" value="5" id="rating-5" />
|
|
<label class="star-rating__label" for="rating-5" aria-label="Five" style="background-image:url(/app/assets/img/icon/icon-star-active.png)"></label>
|
|
<div class="star-rating__focus"></div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="star-rating">
|
|
<legend class="star-rating__title">星級評價 > 服務態度</legend>
|
|
<div class="star-rating__stars2">
|
|
<input class="star-rating__input" type="radio" name="star_item2" value="1" id="review-1" />
|
|
<label class="star-rating__label" for="review-1" aria-label="One" style="background-image:url(/app/assets/img/icon/icon-star-active.png)"></label>
|
|
<input class="star-rating__input" type="radio" name="star_item2" value="2" id="review-2" />
|
|
<label class="star-rating__label" for="review-2" aria-label="Two" style="background-image:url(/app/assets/img/icon/icon-star-active.png)"></label>
|
|
<input class="star-rating__input" type="radio" name="star_item2" value="3" id="review-3" />
|
|
<label class="star-rating__label" for="review-3" aria-label="Three" style="background-image:url(/app/assets/img/icon/icon-star-active.png)"></label>
|
|
<input class="star-rating__input" type="radio" name="star_item2" value="4" id="review-4" />
|
|
<label class="star-rating__label" for="review-4" aria-label="Four" style="background-image:url(/app/assets/img/icon/icon-star-active.png)"></label>
|
|
<input class="star-rating__input" type="radio" name="star_item2" value="5" id="review-5" />
|
|
<label class="star-rating__label" for="review-5" aria-label="Five" style="background-image:url(/app/assets/img/icon/icon-star-active.png)"></label>
|
|
<div class="star-rating__focus"></div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="form-check check-item">
|
|
<input class="form-check-input" type="checkbox" value="Y" id="batch" name="batch" checked>
|
|
<label class="form-check-label" for="batch" role="button">一併更新其餘未評價筆數</label>
|
|
</div>
|
|
<?php include "include-5stars_v2.php"; ?>
|
|
<!--
|
|
<div class="form-group boxed">
|
|
<div class="input-wrapper">
|
|
<label class="label" for="name5">姓名</label>
|
|
<input type="text" class="form-control" id="name5" placeholder="Enter your name">
|
|
<i class="clear-input">
|
|
<ion-icon name="close-circle"></ion-icon>
|
|
</i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group boxed">
|
|
<div class="input-wrapper">
|
|
<label class="label" for="email5">E-mail</label>
|
|
<input type="email" class="form-control" id="email5" placeholder="E-mail address">
|
|
<i class="clear-input">
|
|
<ion-icon name="close-circle"></ion-icon>
|
|
</i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group boxed">
|
|
<div class="input-wrapper">
|
|
<label class="label" for="phone5">聯絡電話</label>
|
|
<input type="tel" class="form-control card-body" id="phone5" placeholder="Enter your phone number">
|
|
<i class="clear-input">
|
|
<ion-icon name="close-circle"></ion-icon>
|
|
</i>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<label class="label" for="signature5">業主簽名</label>
|
|
<!-- <input style="height:200px;" class="form-control card-body" id="signature5" placeholder="請在此處簽名"> -->
|
|
<div id="canvasDiv"></div>
|
|
<img id="qmimg"/>
|
|
<input type="hidden" value="" id="data_of_base64" name="data_of_base64">
|
|
<input type="hidden" id="id_schedule" name="id_schedule" value="<?php echo $id_schedule; ?>">
|
|
<input type="hidden" id="token" name="token" value="<?php echo $token; ?>">
|
|
<input type="hidden" id="fr" name="fr" value="<?php echo $fr; ?>">
|
|
|
|
<!--
|
|
<div class="">
|
|
<button type="submit" class="btn btn-primary btn-block btn-lg">確定</button>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- * sounds tab -->
|
|
</form>
|
|
|
|
</div>
|
|
<!-- * App Capsule -->
|
|
|
|
|
|
</div>
|
|
|
|
<div class="section mt-1">
|
|
<button onclick="history.back()">回到上一步</button>
|
|
<button id="btn_clear">重簽</button>
|
|
<button id="btn_confirm">確定</button>
|
|
<button id="downloadPdf">下载</button>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="js/drawWord.js"></script>
|
|
<script type="module" src="js/main.js"></script>
|
|
<script type="text/javascript">
|
|
/* var canvasDiv = document.getElementById('canvasDiv');
|
|
var canvas = document.createElement('canvas');
|
|
var canvasWidth = 1191;
|
|
var canvasHeight=670; */
|
|
|
|
/*
|
|
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
var point = {};
|
|
point.notFirst = false;
|
|
canvas.setAttribute('width', canvasWidth);
|
|
canvas.setAttribute('height', canvasHeight);
|
|
canvas.setAttribute('id', 'canvas');
|
|
canvasDiv.appendChild(canvas);
|
|
if(typeof G_vmlCanvasManager != 'undefined') {
|
|
canvas = G_vmlCanvasManager.initElement(canvas);
|
|
}
|
|
|
|
var clickX = new Array();
|
|
var clickY = new Array();
|
|
var clickDrag = new Array();
|
|
var paint;
|
|
*/
|
|
|
|
$(document).ready(function() {
|
|
//$("#canvasDiv").jSignature({"decor-color":"transparent", "width":"300px", "height":"300px"})
|
|
|
|
$('.star-rating__stars .star-rating__label').click(function(){
|
|
$('.star-rating__stars .star-rating__label').each(function(){
|
|
$(this).css('background-image','');
|
|
})
|
|
})
|
|
$('.star-rating__stars2 .star-rating__label').click(function(){
|
|
$('.star-rating__stars2 .star-rating__label').each(function(){
|
|
$(this).css('background-image','');
|
|
})
|
|
})
|
|
|
|
//一開始"提交下一頁"與"下載"要隱藏
|
|
$("#downloadPdf").hide();
|
|
|
|
//var $sigdiv1 = $("#canvasDiv").jSignature({'UndoButton':false});
|
|
var $sigdiv1 = $("#canvasDiv").jSignature({'decor-color':'transparent', 'width':'295px', 'height':'300px','UndoButton':false});
|
|
|
|
//重写
|
|
$("#btn_clear").click( function() {
|
|
$("#canvasDiv").jSignature("reset");
|
|
//$("#signature1").innerHTML = '';
|
|
});
|
|
|
|
//確定則存base64內容與顯示圖案
|
|
$('#btn_confirm').click(function(){
|
|
// Get response of type image
|
|
var data1 = $sigdiv1.jSignature('getData', 'image');
|
|
// Storing in textarea (存base64內容)
|
|
$('#data_of_base64').val(data1);
|
|
// Alter image source (顯示圖案)
|
|
$('#qmimg').attr('src',"data:"+data1);
|
|
$("#canvasDiv").hide(); //canvasDiv是畫布，要hide才能不讓繼續簽名
|
|
$("#btn_clear").hide(); //btn_clear是控制重簽，要hide才能不讓繼續簽名
|
|
$('#qmimg').show(); //qmimg 要設定show才行
|
|
$("#btn_confirm").hide(); //btn_clear是控制重簽，要hide才能不讓繼續簽名
|
|
//$('#qmimg').hide();
|
|
document.fileForm.submit(); /* 整個頁面submit */
|
|
});
|
|
|
|
//下載圖案
|
|
$('#downloadPdf').click(function(){
|
|
$("#data_of_base64").attr("value",canvas.toDataURL("image/png")); /* 取canvas base64的值放到id="data_of_base64"的input中 */
|
|
});
|
|
|
|
|
|
});
|
|
|
|
<?php if ($view == "Y") { ?>
|
|
$('.star-rating').hide();
|
|
$('.check-item').hide();
|
|
$('label[for=signature5]').hide();
|
|
$("#canvasDiv").hide();
|
|
$('button').hide();
|
|
<?php } ?>
|
|
</script>
|
|
<?php if ($view == "Y") { ?>
|
|
<!-- Ionicons -->
|
|
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
|
|
<!-- Base Js File -->
|
|
<script src="assets/js/base.js"></script>
|
|
<?php } ?>
|
|
</body>
|
|
</html>
|