gary_wms/wms/ngfeedback-create.php

<?php
require_once "database.php";
include "header.php";

include "ngfeedback-create-submit.php";
?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.02.min.css">
<style>
select, textarea {
	margin: 8px 0;
}
.autoComplete_wrapper { width: 100%; }
.autoComplete_wrapper > input, 
input[type=file] + .img-preview,
input[type=file], textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	font-size: inherit;
	height: auto;
}
.img-preview {
	position: relative;
	background-color: var(--bs-white, #fff);
}
.img-preview > .btn-icon {
	position: absolute;
	top: 1px;
	right: 1px;
	font-weight: 600;
	cursor: pointer;
}
.btn-icon > svg {
	width: 32px;
	height: 32px;
}
.autoComplete_wrapper > ul[role=listbox] {
	margin-top: -12px;
}
input[type=file][accept^=image].preview {
	display: none;
}
input[type=file][accept^=image]:not(.preview) + .img-preview {
	display: none;
}
</style>
<div class="container">
	<form  role="form" class="form-horizontal" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" enctype="multipart/form-data">
		<input type="hidden" name="token" value="<?=$token;?>">
        <input type="hidden" name="creater" value="<?=$user_id;?>">
		<div class="form-group">
			<div class="col-md-3">
                <label for="facilityno">電梯ID</label>
				<input type="text" name="facilityno" id="facilityno" maxlength="15" required>
			</div>
            <div class="col-md-3">
                <label for="sitename">現場名稱</label>
                <input type="text" name="sitename" id="sitename" maxlength="20">
            </div>
			<div class="col-md-6">
                <label for="siteaddress">現場地址</label>
                <input type="text" name="siteaddress" id="siteaddress" maxlength="255" required>
            </div>
			<div class="col-md-6">
                <label for="ngdescribe">簡述不良內容</label>
                <textarea name="ngdescribe" id="ngdescribe" rows="4" maxlength="128" required></textarea>
            </div>
			<div class="col-md-6">
                <label for="ngimage">照片上傳</label>
                <input type="file" name="ngimage" id="ngimage" accept="image/*" required>
				<div id="ngimage-preview" class="img-preview">
					<img src="#" alt="preview image" style="margin: 0 auto; width: 100%; height: auto; border-radius: 0; float: none;"/>
					<i class="btn-icon bi bi-x-square-fill" data-pid="ngimage" alt="移除照片" role="button" onclick="javascript:image_remove(this)" style="color: var(--bs-red, #dc3545);">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square-fill" viewBox="0 0 16 16">
							<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z"/>
						</svg>
					</i>
				</div>
            </div>
		</div>
		<div class="form-group">
            <div class="col-md-12 ">
                <button type="submit"  class="btn btn-primary btn-lg">點擊後建立不良反饋單</button>
            </div>
        </div>
	</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
<script>
function image_preview (event) {
	var input = event.target;
	var image = document.querySelector(`#${input.id}-preview > img`);
	if (input.files && input.files[0]) {
		var reader = new FileReader();
		reader.onload = function(e) {
		   image.src = e.target.result;
		   $(`#${input.id}`).addClass("preview");
		}
		reader.readAsDataURL(input.files[0]);
		return;
	}
	$(`#${input.id}`).removeClass("preview");
}
function image_remove (el) {
	var pid = $(el).attr("data-pid");
	var input = document.querySelector(`input#${pid}`);
	input.value = "";
	$(`#${pid}`).removeClass("preview");
}
$(function() {
	$("#ngimage").on("change", function (event) {
		image_preview(event);
	}).trigger("change");
	
	const autoCompleteJS = new autoComplete({
		selector: "#facilityno",
		data: {
			src: async () => {
				if (!autoCompleteJS.input.value || autoCompleteJS.input.value.length < 2) {
					return [];
				}
				try {
					const source = await fetch('/wms/ngfeedbackapi.php?' + new URLSearchParams({
						type: "facilityno",
						term: autoCompleteJS.input.value,
						rn: 10,
					}));
					const data = await source.json();
					return data.data;
				} catch (error) {
					return error;
				}
			},
			keys: ["facilityno", "address"],
		},
		resultItem: {
			highlight: false
		},
		events: {
			input: {
				selection: (event) => {
					const selection = event.detail.selection.value;
					autoCompleteJS.input.value = selection["facilityno"];
					$("#siteaddress").val(selection["address"]);
				}
			}
		}
	});
});
</script>
<?php
include "footer.php";
?>