gary_wms/wms/ngfeedback-create.php

<?php
require_once "database.php";
include "header.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://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>
	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="row">
				<div class="col-md-3">
					<label for="facilityno">電梯ID</label>
					<!-- <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 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>
			<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>
	$(document).ready(function() {
		// $('#facilityno').select2();
		$("#facilityno").selectize();
	});

	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";
?>