|
@ -3,16 +3,33 @@ require_once "database.php"; |
|
|
include "header.php"; |
|
|
include "header.php"; |
|
|
|
|
|
|
|
|
include "ngfeedback-create-submit.php"; |
|
|
include "ngfeedback-create-submit.php"; |
|
|
|
|
|
|
|
|
|
|
|
$sql = " |
|
|
|
|
|
SELECT |
|
|
|
|
|
facilityno |
|
|
|
|
|
FROM facility |
|
|
|
|
|
"; |
|
|
|
|
|
$result = mysqli_query($link, $sql); |
|
|
|
|
|
$opts = mysqli_fetch_all($result, MYSQLI_ASSOC); |
|
|
|
|
|
|
|
|
?> |
|
|
?> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.02.min.css"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
|
|
|
|
|
<link rel="stylesheet" href="/wms/css/autoComplete.02.min.css"> |
|
|
<style> |
|
|
<style> |
|
|
select, textarea { |
|
|
select, |
|
|
|
|
|
textarea { |
|
|
margin: 8px 0; |
|
|
margin: 8px 0; |
|
|
} |
|
|
} |
|
|
.autoComplete_wrapper { width: 100%; } |
|
|
|
|
|
|
|
|
.autoComplete_wrapper { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.autoComplete_wrapper>input, |
|
|
.autoComplete_wrapper>input, |
|
|
input[type=file]+.img-preview, |
|
|
input[type=file]+.img-preview, |
|
|
input[type=file], textarea { |
|
|
input[type=file], |
|
|
|
|
|
textarea { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
padding: 12px 20px; |
|
|
padding: 12px 20px; |
|
|
margin: 8px 0; |
|
|
margin: 8px 0; |
|
@ -23,10 +40,12 @@ input[type=file], textarea { |
|
|
font-size: inherit; |
|
|
font-size: inherit; |
|
|
height: auto; |
|
|
height: auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.img-preview { |
|
|
.img-preview { |
|
|
position: relative; |
|
|
position: relative; |
|
|
background-color: var(--bs-white, #fff); |
|
|
background-color: var(--bs-white, #fff); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.img-preview>.btn-icon { |
|
|
.img-preview>.btn-icon { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 1px; |
|
|
top: 1px; |
|
@ -34,16 +53,20 @@ input[type=file], textarea { |
|
|
font-weight: 600; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn-icon>svg { |
|
|
.btn-icon>svg { |
|
|
width: 32px; |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
height: 32px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.autoComplete_wrapper>ul[role=listbox] { |
|
|
.autoComplete_wrapper>ul[role=listbox] { |
|
|
margin-top: -12px; |
|
|
margin-top: -12px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
input[type=file][accept^=image].preview { |
|
|
input[type=file][accept^=image].preview { |
|
|
display: none; |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
input[type=file][accept^=image]:not(.preview)+.img-preview { |
|
|
input[type=file][accept^=image]:not(.preview)+.img-preview { |
|
|
display: none; |
|
|
display: none; |
|
|
} |
|
|
} |
|
@ -53,9 +76,18 @@ input[type=file][accept^=image]:not(.preview) + .img-preview { |
|
|
<input type="hidden" name="token" value="<?= $token; ?>"> |
|
|
<input type="hidden" name="token" value="<?= $token; ?>"> |
|
|
<input type="hidden" name="creater" value="<?= $user_id; ?>"> |
|
|
<input type="hidden" name="creater" value="<?= $user_id; ?>"> |
|
|
<div class="form-group"> |
|
|
<div class="form-group"> |
|
|
|
|
|
<div class="row"> |
|
|
<div class="col-md-3"> |
|
|
<div class="col-md-3"> |
|
|
<label for="facilityno">電梯ID</label> |
|
|
<label for="facilityno">電梯ID</label> |
|
|
<input type="text" name="facilityno" id="facilityno" maxlength="15" required> |
|
|
<!-- <input type="text" name="facilityno" id="facilityno" maxlength="15" required> --> |
|
|
|
|
|
<select name="facilityno" id="facilityno" required> |
|
|
|
|
|
<?php |
|
|
|
|
|
echo "<option value=''>請選擇</option>"; |
|
|
|
|
|
foreach($opts as $opt){ |
|
|
|
|
|
echo "<option value='" . $opt["facilityno"] . "'>" . $opt["facilityno"] . "</option>"; |
|
|
|
|
|
} |
|
|
|
|
|
?> |
|
|
|
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-3"> |
|
|
<div class="col-md-3"> |
|
|
<label for="sitename">現場名稱</label> |
|
|
<label for="sitename">現場名稱</label> |
|
@ -65,6 +97,7 @@ input[type=file][accept^=image]:not(.preview) + .img-preview { |
|
|
<label for="siteaddress">現場地址</label> |
|
|
<label for="siteaddress">現場地址</label> |
|
|
<input type="text" name="siteaddress" id="siteaddress" maxlength="255" required> |
|
|
<input type="text" name="siteaddress" id="siteaddress" maxlength="255" required> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<div class="col-md-6"> |
|
|
<div class="col-md-6"> |
|
|
<label for="ngdescribe">簡述不良內容</label> |
|
|
<label for="ngdescribe">簡述不良內容</label> |
|
|
<textarea name="ngdescribe" id="ngdescribe" rows="4" maxlength="128" required></textarea> |
|
|
<textarea name="ngdescribe" id="ngdescribe" rows="4" maxlength="128" required></textarea> |
|
@ -91,6 +124,11 @@ input[type=file][accept^=image]:not(.preview) + .img-preview { |
|
|
</div> |
|
|
</div> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script> |
|
|
<script> |
|
|
<script> |
|
|
|
|
|
$(document).ready(function() { |
|
|
|
|
|
// $('#facilityno').select2(); |
|
|
|
|
|
$("#facilityno").selectize(); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
function image_preview(event) { |
|
|
function image_preview(event) { |
|
|
var input = event.target; |
|
|
var input = event.target; |
|
|
var image = document.querySelector(`#${input.id}-preview > img`); |
|
|
var image = document.querySelector(`#${input.id}-preview > img`); |
|
@ -105,6 +143,7 @@ function image_preview (event) { |
|
|
} |
|
|
} |
|
|
$(`#${input.id}`).removeClass("preview"); |
|
|
$(`#${input.id}`).removeClass("preview"); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function image_remove(el) { |
|
|
function image_remove(el) { |
|
|
var pid = $(el).attr("data-pid"); |
|
|
var pid = $(el).attr("data-pid"); |
|
|
var input = document.querySelector(`input#${pid}`); |
|
|
var input = document.querySelector(`input#${pid}`); |
|
|