אישור דוח יומי - מיגונים ומפוחים

<!DOCTYPE html>
<html lang=”he” dir=”rtl”>
<head>
<meta charset=”UTF-8″ />
<title>חתימה על דוח יומי</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
direction: rtl;
text-align: right;
margin: 20px;
}
h1 { font-size: 22px; margin-bottom: 10px; }
label { display: block; margin-top: 10px; }
input[type=”text”] {
width: 100%;
padding: 6px;
box-sizing: border-box;
}
#sig-canvas {
border: 1px solid #444;
width: 100%;
max-width: 500px;
height: 180px;
touch-action: none;
}
.btn-row {
margin-top: 10px;
}
button {
padding: 8px 16px;
margin-left: 8px;
cursor: pointer;
}
.msg {
margin-top: 15px;
font-weight: bold;
}
</style>
</head>
<body>

<h1>חתימה על דוח יומי</h1>

<p>
אנא חתום/מי על הדוח ולחץ/י “שלח חתימה”.
</p>

<label>שם מנהל עבודה:</label>
<input type=”text” id=”managerName” placeholder=”שם מלא” />

<label>תאריך חתימה:</label>
<input type=”text” id=”signDate” placeholder=”למשל 27-11-2025″ />

<label>חתימה:</label>
<canvas id=”sig-canvas”></canvas>

<div class=”btn-row”>
<button id=”clearBtn”>נקה חתימה</button>
<button id=”sendBtn”>שלח חתימה</button>
</div>

// *** חשוב: להחליף ל־URL של ה-Webhook ב-Make ***
const WEBHOOK_URL = “https://hook.eu2.make.com/277p25ki3lty4mxi8h73lrnx8671ltv1”;

// לקרוא את ה-itemId מה-URL: ?itemId=1061376957
function getItemIdFromQuery() {
const params = new URLSearchParams(window.location.search);
return params.get(“itemId”);
}

const itemId = getItemIdFromQuery();
if (!itemId) {
document.getElementById(“msg”).textContent =
“שגיאה: חסר מזהה דוח (itemId). בדוק את הקישור.”;
}

// ===== קנבס חתימה =====
const canvas = document.getElementById(“sig-canvas”);
const ctx = canvas.getContext(“2d”);
let drawing = false;
let lastX = 0;
let lastY = 0;

function startDraw(evt) {
evt.preventDefault();
drawing = true;
const pos = getPos(evt);
lastX = pos.x;
lastY = pos.y;
}

function draw(evt) {
if (!drawing) return;
evt.preventDefault();
const pos = getPos(evt);
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(pos.x, pos.y);
ctx.strokeStyle = “#000”;
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
lastX = pos.x;
lastY = pos.y;
}

function stopDraw(evt) {
evt && evt.preventDefault();
drawing = false;
}

// עכבר
canvas.addEventListener(“mousedown”, startDraw);
canvas.addEventListener(“mousemove”, draw);
canvas.addEventListener(“mouseup”, stopDraw);
canvas.addEventListener(“mouseleave”, stopDraw);

// טאצ’
canvas.addEventListener(“touchstart”, startDraw, { passive: false });
canvas.addEventListener(“touchmove”, draw, { passive: false });
canvas.addEventListener(“touchend”, stopDraw, { passive: false });

document.getElementById(“clearBtn”).addEventListener(“click”, () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});

// ===== שליחת חתימה ל-Make =====
document.getElementById(“sendBtn”).addEventListener(“click”, async () => {
const msgEl = document.getElementById(“msg”);
msgEl.textContent = “”;

const managerName = document.getElementById(“managerName”).value.trim();
const signDate = document.getElementById(“signDate”).value.trim();

if (!itemId) {
msgEl.textContent = “שגיאה: חסר itemId.”;
return;
}
if (!managerName) {
msgEl.textContent = “יש להזין שם מנהל עבודה.”;
return;
}

const dataUrl = canvas.toDataURL(“image/png”); // חתימה כ-base64

msgEl.textContent = “שולח חתימה, רגע…”;

try {
const res = await fetch(WEBHOOK_URL, {
method: “POST”,
headers: { “Content-Type”: “application/json” },
body: JSON.stringify({
itemId,
managerName,
signDate,
signatureDataUrl: dataUrl,
}),
});

if (!res.ok) throw new Error(“HTTP ” + res.status);
msgEl.textContent = “החתימה נשלחה בהצלחה. תודה!”;
} catch (err) {
console.error(err);
msgEl.textContent = “שגיאה בשליחת החתימה. נסה שוב או פנה לתמיכה.”;
}
});
</script>
</body>
</html>