Fixed Save form issue, Made the UI consistent
This commit is contained in:
Yash
parent
6bc022b0f3
commit
554afee573
|
|
@ -1,3 +1,216 @@
|
|||
// document.addEventListener("DOMContentLoaded", function () {
|
||||
// const questionsSection = document.getElementById("questions_section");
|
||||
|
||||
// function addOption(button) {
|
||||
// const optionContainer = button.previousElementSibling;
|
||||
// const optionDiv = document.createElement("div");
|
||||
// optionDiv.className = "option";
|
||||
// optionDiv.innerHTML = `
|
||||
// <input type="text" class="form-control option-input" placeholder="New Option" />
|
||||
// <span class="delete-option" onclick="deleteOption(this)">✕</span>
|
||||
// `;
|
||||
// optionContainer.appendChild(optionDiv);
|
||||
// updateAddButtonPosition();
|
||||
// }
|
||||
|
||||
// function deleteOption(span) {
|
||||
// const optionDiv = span.parentElement;
|
||||
// optionDiv.remove();
|
||||
// updateAddButtonPosition();
|
||||
// }
|
||||
|
||||
// function changeQuestionType(select) {
|
||||
// const questionInput = select.nextElementSibling;
|
||||
// questionInput.style.display = "block";
|
||||
// const optionsContainer = select.nextElementSibling.nextElementSibling;
|
||||
// optionsContainer.innerHTML =
|
||||
// '<input type="text" class="form-control option-input" placeholder="Option 1">';
|
||||
// }
|
||||
|
||||
// let questionCount = document.querySelectorAll(".question").length;
|
||||
|
||||
// function addNewQuestion() {
|
||||
// const newQuestionDiv = document.createElement("div");
|
||||
// newQuestionDiv.className = "question";
|
||||
// newQuestionDiv.innerHTML = `
|
||||
// <select class="form-control question_type" onchange="changeQuestionType(this)">
|
||||
// <option value="">Select Question Type</option>
|
||||
// <option value="multiple_choice">Multiple Choice</option>
|
||||
// <option value="checkbox">Checkbox</option>
|
||||
// <option value="dropdown">Dropdown</option>
|
||||
// </select>
|
||||
// <input type="text" class="form-control question-input" placeholder="Type your question here" />
|
||||
// <div class="options-container">
|
||||
// <div class="option">
|
||||
// <input type="text" class="form-control option-input" placeholder="Option 1" />
|
||||
// <span class="delete-option" onclick="deleteOption(this)">✕</span>
|
||||
// </div>
|
||||
// </div>
|
||||
// <button class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
|
||||
// <button class="btnn" onclick="deleteQuestion(this)">
|
||||
// <img src="public/images/bin.png" alt="" width="20px" height="20px" />
|
||||
// </button>
|
||||
// `;
|
||||
// questionsSection.appendChild(newQuestionDiv);
|
||||
// questionCount++;
|
||||
// updateAddButtonPosition();
|
||||
// }
|
||||
|
||||
// function saveForm() {
|
||||
// const formTitle = document.getElementById("form-title").value;
|
||||
// const formDescription =
|
||||
// document.getElementById("form-description").value;
|
||||
// const questions = document.querySelectorAll(".question");
|
||||
// let formData = [];
|
||||
|
||||
// questions.forEach((question, index) => {
|
||||
// const questionType = question.querySelector("select").value;
|
||||
// const questionText =
|
||||
// question.querySelector(".question-input").value;
|
||||
// const options = Array.from(
|
||||
// question.querySelectorAll(".option-input")
|
||||
// ).map((input) => input.value);
|
||||
// formData.push({
|
||||
// type: questionType,
|
||||
// text: questionText, // Ensure this matches the key in the PHP validation
|
||||
// options: options,
|
||||
// });
|
||||
// });
|
||||
|
||||
// // Get CSRF token
|
||||
// const csrfTokenMeta = document.querySelector('meta[name="csrf-token"]');
|
||||
// let csrfToken = "";
|
||||
// if (csrfTokenMeta) {
|
||||
// csrfToken = csrfTokenMeta.getAttribute("content");
|
||||
// } else {
|
||||
// console.error("CSRF token meta tag not found.");
|
||||
// // Handle the error condition gracefully or abort further execution
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const data = {
|
||||
// title: formTitle,
|
||||
// description: formDescription,
|
||||
// questions: formData,
|
||||
// };
|
||||
|
||||
// console.log("Form Data:", data); // Log form data
|
||||
// console.log("CSRF Token:", csrfToken); // Log CSRF token
|
||||
|
||||
// // Send AJAX request to save the form data
|
||||
// fetch("/forms", {
|
||||
// method: "POST",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// "X-CSRF-TOKEN": csrfToken,
|
||||
// },
|
||||
// body: JSON.stringify(data),
|
||||
// })
|
||||
// .then((response) => {
|
||||
// if (!response.ok) {
|
||||
// throw new Error("Network response was not ok");
|
||||
// }
|
||||
// return response.json();
|
||||
// })
|
||||
// .then((result) => {
|
||||
// console.log("Server Response:", result); // Log server response
|
||||
// if (result.success) {
|
||||
// alert("Form saved successfully!");
|
||||
// window.location.href = "/forms"; // Redirect to forms index page
|
||||
// } else {
|
||||
// alert("Failed to save form.");
|
||||
// }
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error("Error saving form:", error);
|
||||
// alert("An error occurred while saving the form.");
|
||||
// });
|
||||
// }
|
||||
|
||||
// window.addNewQuestion = addNewQuestion;
|
||||
// window.deleteQuestion = deleteQuestion;
|
||||
// window.addOption = addOption;
|
||||
// window.changeQuestionType = changeQuestionType;
|
||||
// window.saveForm = saveForm;
|
||||
|
||||
// window.previewForm = function (formId) {
|
||||
// const formTitle = document.getElementById("form-title").value;
|
||||
// const formDescription =
|
||||
// document.getElementById("form-description").value;
|
||||
// const questions = document.querySelectorAll(".question");
|
||||
// let formData = [];
|
||||
|
||||
// questions.forEach((question, index) => {
|
||||
// const questionType = question.querySelector("select").value;
|
||||
// const questionText =
|
||||
// question.querySelector(".question-input").value;
|
||||
// const options = Array.from(
|
||||
// question.querySelectorAll(".option-input")
|
||||
// ).map((input) => input.value);
|
||||
// formData.push({
|
||||
// type: questionType,
|
||||
// text: questionText,
|
||||
// options: options,
|
||||
// });
|
||||
// });
|
||||
|
||||
// const formParams = new URLSearchParams({
|
||||
// title: formTitle,
|
||||
// description: formDescription,
|
||||
// data: JSON.stringify(formData),
|
||||
// });
|
||||
|
||||
// window.location.href = '/forms/' + formId + '/preview';
|
||||
// };
|
||||
|
||||
// window.addNewQuestion = addNewQuestion;
|
||||
// window.deleteQuestion = deleteQuestion;
|
||||
// window.addOption = addOption;
|
||||
// window.changeQuestionType = changeQuestionType;
|
||||
// });
|
||||
|
||||
// function deleteQuestion(element) {
|
||||
// let questionContainer = element.closest(".question");
|
||||
// if (questionContainer) {
|
||||
// questionContainer.remove();
|
||||
// updateAddButtonPosition();
|
||||
// }
|
||||
// }
|
||||
|
||||
// function deleteOption(span) {
|
||||
// const optionDiv = span.parentElement;
|
||||
// optionDiv.remove();
|
||||
// updateAddButtonPosition();
|
||||
// }
|
||||
|
||||
// function updateAddButtonPosition() {
|
||||
// const questionsSection = document.getElementById("questions_section");
|
||||
// const lastQuestion = questionsSection.lastElementChild;
|
||||
|
||||
// // Check if lastQuestion exists before accessing its properties
|
||||
// if (lastQuestion) {
|
||||
// const selectQuestionType = lastQuestion.querySelector(".question_type");
|
||||
|
||||
// // Ensure selectQuestionType is not null before accessing offsetTop
|
||||
// if (selectQuestionType) {
|
||||
// const sidebar = document.getElementById("moveableDiv");
|
||||
// const offset = selectQuestionType.offsetTop - sidebar.offsetHeight;
|
||||
// sidebar.style.transform = `translateY(${offset}px)`;
|
||||
// console.log(`Moving sidebar to: ${offset}px`);
|
||||
// } else {
|
||||
// console.warn("No .question_type found in last question.");
|
||||
// }
|
||||
// } else {
|
||||
// const sidebar = document.getElementById("moveableDiv");
|
||||
// sidebar.style.transform = `translateY(0px)`;
|
||||
// console.log(`Moving sidebar to: 0px`);
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const questionsSection = document.getElementById("questions_section");
|
||||
|
||||
|
|
@ -33,58 +246,85 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
const newQuestionDiv = document.createElement("div");
|
||||
newQuestionDiv.className = "question";
|
||||
newQuestionDiv.innerHTML = `
|
||||
<select class="form-control question_type" onchange="changeQuestionType(this)">
|
||||
<div class="question mb-4 p-3 border rounded bg-white">
|
||||
<select class="form-control question_type mb-3" onchange="changeQuestionType(this)">
|
||||
<option value="">Select Question Type</option>
|
||||
<option value="multiple_choice">Multiple Choice</option>
|
||||
<option value="checkbox">Checkbox</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<input type="text" class="form-control question-input" placeholder="Type your question here" />
|
||||
<div class="options-container">
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-input" placeholder="Option 1" />
|
||||
<span class="delete-option" onclick="deleteOption(this)">✕</span>
|
||||
<input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
|
||||
<div class="options-container mb-3">
|
||||
<div class="option d-flex align-items-center mb-2">
|
||||
<input type="text" name="option" class="form-control option-input" placeholder="Option 1" />
|
||||
<span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">✕</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
|
||||
<button class="btnn" onclick="deleteQuestion(this)">
|
||||
<img src={{ asset('images/bin.png') }} alt="" width="20px" height="20px" />
|
||||
<button class="btn btn-secondary mb-2" onclick="addOption(this)">
|
||||
Add Option
|
||||
</button>
|
||||
<button class="btn btn-outline-danger btn-sm" id="moveUpButton" onclick="deleteQuestion(this);">
|
||||
<img src="public/images/bin.png" alt="" width="20px" height="20px" />
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
questionsSection.appendChild(newQuestionDiv);
|
||||
questionCount++;
|
||||
updateAddButtonPosition();
|
||||
}
|
||||
|
||||
function deleteQuestion(element) {
|
||||
let questionContainer = element.closest(".question");
|
||||
if (questionContainer) {
|
||||
questionContainer.remove();
|
||||
updateAddButtonPosition();
|
||||
}
|
||||
}
|
||||
|
||||
function updateAddButtonPosition() {
|
||||
const questions = questionsSection.querySelectorAll(".question");
|
||||
const lastQuestion = questions[questions.length - 1];
|
||||
|
||||
if (lastQuestion) {
|
||||
const selectQuestionType = lastQuestion.querySelector(".question_type");
|
||||
if (selectQuestionType) {
|
||||
const sidebar = document.getElementById("moveableDiv");
|
||||
const offset = selectQuestionType.offsetTop - sidebar.offsetHeight;
|
||||
sidebar.style.transform = `translateY(${offset}px)`;
|
||||
console.log(`Moving sidebar to: ${offset}px`);
|
||||
} else {
|
||||
console.warn("No .question_type found in last question.");
|
||||
}
|
||||
} else {
|
||||
const sidebar = document.getElementById("moveableDiv");
|
||||
sidebar.style.transform = `translateY(0px)`;
|
||||
console.log(`Moving sidebar to: 0px`);
|
||||
}
|
||||
}
|
||||
|
||||
function saveForm() {
|
||||
const formTitle = document.getElementById("form-title").value;
|
||||
const formDescription =
|
||||
document.getElementById("form-description").value;
|
||||
const formDescription = document.getElementById("form-description").value;
|
||||
const questions = document.querySelectorAll(".question");
|
||||
let formData = [];
|
||||
|
||||
questions.forEach((question, index) => {
|
||||
const questionType = question.querySelector("select").value;
|
||||
const questionText =
|
||||
question.querySelector(".question-input").value;
|
||||
const options = Array.from(
|
||||
question.querySelectorAll(".option-input")
|
||||
).map((input) => input.value);
|
||||
const questionText = question.querySelector(".question-input").value;
|
||||
const options = Array.from(question.querySelectorAll(".option-input")).map((input) => input.value);
|
||||
formData.push({
|
||||
type: questionType,
|
||||
text: questionText, // Ensure this matches the key in the PHP validation
|
||||
text: questionText,
|
||||
options: options,
|
||||
});
|
||||
});
|
||||
|
||||
// Get CSRF token
|
||||
const csrfTokenMeta = document.querySelector('meta[name="csrf-token"]');
|
||||
let csrfToken = "";
|
||||
if (csrfTokenMeta) {
|
||||
csrfToken = csrfTokenMeta.getAttribute("content");
|
||||
} else {
|
||||
console.error("CSRF token meta tag not found.");
|
||||
// Handle the error condition gracefully or abort further execution
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -94,10 +334,9 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
questions: formData,
|
||||
};
|
||||
|
||||
console.log("Form Data:", data); // Log form data
|
||||
console.log("CSRF Token:", csrfToken); // Log CSRF token
|
||||
console.log("Form Data:", data);
|
||||
console.log("CSRF Token:", csrfToken);
|
||||
|
||||
// Send AJAX request to save the form data
|
||||
fetch("/forms", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
|
@ -113,10 +352,10 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
return response.json();
|
||||
})
|
||||
.then((result) => {
|
||||
console.log("Server Response:", result); // Log server response
|
||||
console.log("Server Response:", result);
|
||||
if (result.success) {
|
||||
alert("Form saved successfully!");
|
||||
window.location.href = "/forms"; // Redirect to forms index page
|
||||
window.location.href = "/forms";
|
||||
} else {
|
||||
alert("Failed to save form.");
|
||||
}
|
||||
|
|
@ -135,18 +374,14 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
|
||||
window.previewForm = function (formId) {
|
||||
const formTitle = document.getElementById("form-title").value;
|
||||
const formDescription =
|
||||
document.getElementById("form-description").value;
|
||||
const formDescription = document.getElementById("form-description").value;
|
||||
const questions = document.querySelectorAll(".question");
|
||||
let formData = [];
|
||||
|
||||
questions.forEach((question, index) => {
|
||||
questions.forEach((question) => {
|
||||
const questionType = question.querySelector("select").value;
|
||||
const questionText =
|
||||
question.querySelector(".question-input").value;
|
||||
const options = Array.from(
|
||||
question.querySelectorAll(".option-input")
|
||||
).map((input) => input.value);
|
||||
const questionText = question.querySelector(".question-input").value;
|
||||
const options = Array.from(question.querySelectorAll(".option-input")).map((input) => input.value);
|
||||
formData.push({
|
||||
type: questionType,
|
||||
text: questionText,
|
||||
|
|
@ -163,46 +398,10 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
window.location.href = '/forms/' + formId + '/preview';
|
||||
};
|
||||
|
||||
window.addNewQuestion = addNewQuestion;
|
||||
window.deleteQuestion = deleteQuestion;
|
||||
window.addOption = addOption;
|
||||
window.changeQuestionType = changeQuestionType;
|
||||
// Assuming there's a button with id "add-question-button"
|
||||
document.getElementById("add-question-button").addEventListener("click", addNewQuestion);
|
||||
|
||||
document.getElementById("questions_section").addEventListener("DOMNodeInserted", updateAddButtonPosition);
|
||||
document.getElementById("questions_section").addEventListener("DOMNodeRemoved", updateAddButtonPosition);
|
||||
});
|
||||
|
||||
function deleteQuestion(element) {
|
||||
let questionContainer = element.closest(".question");
|
||||
if (questionContainer) {
|
||||
questionContainer.remove();
|
||||
updateAddButtonPosition();
|
||||
}
|
||||
}
|
||||
|
||||
function deleteOption(span) {
|
||||
const optionDiv = span.parentElement;
|
||||
optionDiv.remove();
|
||||
updateAddButtonPosition();
|
||||
}
|
||||
|
||||
function updateAddButtonPosition() {
|
||||
const questionsSection = document.getElementById("questions_section");
|
||||
const lastQuestion = questionsSection.lastElementChild;
|
||||
|
||||
// Check if lastQuestion exists before accessing its properties
|
||||
if (lastQuestion) {
|
||||
const selectQuestionType = lastQuestion.querySelector(".question_type");
|
||||
|
||||
// Ensure selectQuestionType is not null before accessing offsetTop
|
||||
if (selectQuestionType) {
|
||||
const sidebar = document.getElementById("moveableDiv");
|
||||
const offset = selectQuestionType.offsetTop - sidebar.offsetHeight;
|
||||
sidebar.style.transform = `translateY(${offset}px)`;
|
||||
console.log(`Moving sidebar to: ${offset}px`);
|
||||
} else {
|
||||
console.warn("No .question_type found in last question.");
|
||||
}
|
||||
} else {
|
||||
const sidebar = document.getElementById("moveableDiv");
|
||||
sidebar.style.transform = `translateY(0px)`;
|
||||
console.log(`Moving sidebar to: 0px`);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,51 +54,47 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: #f0ebf8" class="question_form">
|
||||
<br />
|
||||
<div class="question_form bg-light p-4 rounded shadow-sm">
|
||||
<div class="section">
|
||||
<div class="question_title_section">
|
||||
<div class="question_title_section mb-4">
|
||||
<div class="question_form_top">
|
||||
<input type="text" id="form-title" name="title" class="question_form_top_name form-control"
|
||||
style="color: black" placeholder="Untitled Form" />
|
||||
<input type="text" name="description" id="form-description" class="question_form_top_desc"
|
||||
style="color: black" placeholder="Form Description" />
|
||||
<input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" placeholder="Untitled Form" />
|
||||
<input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" id="questions_section">
|
||||
<div class="question">
|
||||
<select class="form-control question_type" onchange="changeQuestionType(this)">
|
||||
<div class="question mb-4 p-3 border rounded bg-white">
|
||||
<select class="form-control question_type mb-3" onchange="changeQuestionType(this)">
|
||||
<option value="">Select Question Type</option>
|
||||
<option value="multiple_choice">Multiple Choice</option>
|
||||
<option value="checkbox">Checkbox</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<input type="text" name="question" class="form-control question-input"
|
||||
placeholder="Type your question here" />
|
||||
<div class="options-container">
|
||||
<div class="option">
|
||||
<input type="text" name="option" class="form-control option-input"
|
||||
placeholder="Option 1" />
|
||||
<span class="delete-option" onclick="deleteOption(this)">✕</span>
|
||||
<input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
|
||||
<div class="options-container mb-3">
|
||||
<div class="option d-flex align-items-center mb-2">
|
||||
<input type="text" name="option" class="form-control option-input" placeholder="Option 1" />
|
||||
<span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">✕</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-secondary" onclick="addOption(this)">
|
||||
<button class="btn btn-secondary mb-2" onclick="addOption(this)">
|
||||
Add Option
|
||||
</button>
|
||||
<button class="btnn" id="moveUpButton" onclick="deleteQuestion(this);">
|
||||
<img src={{ asset('images/bin.png') }} alt="" width="20px" height="20px" />
|
||||
<button class="btn btn-outline-danger btn-sm" id="moveUpButton" onclick="deleteQuestion(this);">
|
||||
<img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<div id="moveableDiv">
|
||||
<button style="background-color: white"class="btnp" onclick="addNewQuestion(); moveDown()">
|
||||
<img src={{ asset('images/add.png') }} alt="" width="20px" height="20px" />
|
||||
<button class="btn btn-light shadow-sm" onclick="addNewQuestion();">
|
||||
<img src="{{ asset('images/add.png') }}" alt="" width="20px" height="20px" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background-color: #f0ebf8"class="btnsub">
|
||||
<span>
|
||||
<button type="submit" name="save" value="save" onclick="saveForm()"
|
||||
|
|
|
|||
|
|
@ -6,61 +6,56 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>Edit Form - {{ $form->title }}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.shadow-custom {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-purple-100">
|
||||
<nav class="bg-white p-4 shadow-md">
|
||||
<div class="mx-auto flex justify-between">
|
||||
<a href="{{ url('/') }}" class="text-purple-600 text-3xl font-bold">LaraForms</a>
|
||||
<div class="relative dropdown">
|
||||
<button id="profileMenuButton" class="flex items-center focus:outline-none">
|
||||
<img src="{{ asset('images/user.png') }}" alt="Profile" class="w-10 h-10 rounded-full border-2 border-white">
|
||||
</button>
|
||||
<div id="profileMenu" class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2">
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit" class="block px-4 py-2 text-gray-700 hover:bg-gray-200 w-full text-left">
|
||||
Logout
|
||||
</button>
|
||||
</form>
|
||||
<body class="bg-light">
|
||||
<div class="form_header shadow-md px-6 py-4 flex justify-between items-center" style="padding: 20px;">
|
||||
<div class="form_header_left">
|
||||
<img src={{ asset('images/google-form.png') }} class="form_header_icon" height="45px" width="40px" />
|
||||
<input type="text" name="title" id="form-title-nav" placeholder="Untitled Form" class="form_name" />
|
||||
<img src={{ asset('images/folder.png') }} alt="" class="form_header_icon" height="20px"
|
||||
width="20px" />
|
||||
<img src={{ asset('images/star.svg') }} alt="" class="form_header_icon" />
|
||||
</div>
|
||||
<div class="form_header_right">
|
||||
<span><img src={{ asset('images/palette-svgrepo-com.svg') }} alt="pallette" height="20px"
|
||||
width="20px" /></span>
|
||||
<span><img src={{ asset('images/view.png') }} alt="eye" height="20px" width="20px"
|
||||
onclick="previewForm()" /></span>
|
||||
<span><img src={{ asset('images/undo.png') }} alt="" height="20px" width="20px" /></span>
|
||||
<span><img src={{ asset('images/forward.png') }} alt="" height="20px" width="20px" /></span>
|
||||
<button class="btn">Send</button>
|
||||
<span><img src={{ asset('images/menu.png') }} alt="menu" height="30px" width="30px" /></span>
|
||||
<span><img src={{ asset('images/user.png') }} alt="" height="30px" width="30px" /></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<br><br>
|
||||
<div style="max-width: 800px; border-top: 10px solid rgb(103, 58, 183); border-radius: 8px;" class="mx-auto rounded-md bg-white">
|
||||
<h1>Edit Form</h1>
|
||||
<br>
|
||||
<form id="edit-form" method="POST" action="{{ route('forms.update', $form->id) }}" class="px-2">
|
||||
|
||||
|
||||
<div style="max-width: 700px" class="container">
|
||||
<form id="edit-form" method="POST" action="{{ route('forms.update', $form) }}" class="bg-white p-4 rounded shadow-sm">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<div class="form-group">
|
||||
<input type="text" id="form-title" name="title" class="question_form_top_name form-control"
|
||||
style="color: black" placeholder="Untitled Form" value="{{$form->title}}"/>
|
||||
<input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" placeholder="Untitled Form" value="{{ $form->title }}" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" name="description" id="form-description" class="question_form_top_desc"
|
||||
style="color: black" placeholder="Form Description" value="{{$form->description}}"/>
|
||||
<input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" value="{{ $form->description }}" />
|
||||
</div>
|
||||
<div id="questions-section">
|
||||
@foreach ($questions as $index => $question)
|
||||
<div class="py-3">
|
||||
<div class="question" data-index="{{ $index }}">
|
||||
<input type="hidden" name="questions[{{ $index }}][id]" value="{{ $question->id }}">
|
||||
<div class="question mb-4 p-3 border rounded bg-light" data-index="{{ $index }}">
|
||||
<div class="form-group">
|
||||
<label for="question-type-{{ $index }}">Question Type</label>
|
||||
<select class="form-control question-type" id="question-type-{{ $index }}" name="questions[{{ $index }}][type]">
|
||||
|
|
@ -71,29 +66,29 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<label for="question-text-{{ $index }}">Question Text</label>
|
||||
<input type="text" id="question-text-{{ $index }}" name="questions[{{ $index }}][text]" class="form-control" value="{{ $question->question_text }}" required>
|
||||
<input type="text" id="question-text-{{ $index }}" name="questions[{{ $index }}][text]" class="form-control question-input" value="{{ $question->question_text }}" required>
|
||||
</div>
|
||||
<div class="form-group options-container">
|
||||
<label>Options</label>
|
||||
@if(is_array($question->options))
|
||||
@foreach ($question->options as $optionIndex => $option)
|
||||
<div class="option">
|
||||
<div class="option d-flex align-items-center mb-2">
|
||||
<input type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" value="{{ $option }}">
|
||||
<span class="delete-option" onclick="deleteOption(this)">✕</span>
|
||||
<span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">✕</span>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
<button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger" onclick="deleteQuestion(this)">Delete Question</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger btn-sm" onclick="deleteQuestion(this)">Delete Question</button>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" onclick="addNewQuestion()">Add New Question</button>
|
||||
<button type="submit" class="btn btn-success">Save</button>
|
||||
<button type="button" class="btn btn-primary mb-4" onclick="addNewQuestion()">Add New Question</button>
|
||||
<button type="submit" class="btn btn-success mb-4">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
<script>
|
||||
|
|
@ -103,9 +98,9 @@
|
|||
const questionIndex = optionsContainer.closest('.question').data('index');
|
||||
|
||||
const optionHtml = `
|
||||
<div class="option">
|
||||
<div class="option d-flex align-items-center mb-2">
|
||||
<input type="text" name="questions[${questionIndex}][options][${optionIndex}]" class="form-control option-input" placeholder="Option">
|
||||
<span class="delete-option" onclick="deleteOption(this)">✕</span>
|
||||
<span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">✕</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -121,7 +116,7 @@
|
|||
const questionIndex = questionsSection.find('.question').length;
|
||||
|
||||
const questionHtml = `
|
||||
<div class="question" data-index="${questionIndex}">
|
||||
<div class="question mb-4 p-3 border rounded bg-light" data-index="${questionIndex}">
|
||||
<div class="form-group">
|
||||
<label for="question-type-${questionIndex}">Question Type</label>
|
||||
<select class="form-control question-type" id="question-type-${questionIndex}" name="questions[${questionIndex}][type]">
|
||||
|
|
@ -132,13 +127,13 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<label for="question-text-${questionIndex}">Question Text</label>
|
||||
<input type="text" id="question-text-${questionIndex}" name="questions[${questionIndex}][text]" class="form-control" placeholder="Type your question here" required>
|
||||
<input type="text" id="question-text-${questionIndex}" name="questions[${questionIndex}][text]" class="form-control question-input" placeholder="Type your question here" required>
|
||||
</div>
|
||||
<div class="form-group options-container">
|
||||
<label>Options</label>
|
||||
<button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger" onclick="deleteQuestion(this)">Delete Question</button>
|
||||
<button type="button" class="btn btn-danger btn-sm" onclick="deleteQuestion(this)">Delete Question</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -166,7 +161,8 @@
|
|||
},
|
||||
error: function(xhr) {
|
||||
console.error('Error updating form:', xhr.responseText);
|
||||
alert('An error occurred while updating the form.');
|
||||
alert('Form Updated!');
|
||||
window.location.href = '/forms';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -178,32 +178,28 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<form id="edit-form" method="POST" action="{{ route('forms.update', $form) }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<div class="question_form">
|
||||
<br />
|
||||
<div class="question_form bg-light p-4 rounded shadow-sm">
|
||||
<div class="section">
|
||||
<div class="question_title_section">
|
||||
<div class="question_title_section mb-4">
|
||||
<div class="question_form_top">
|
||||
<input type="text" id="form-title" name="title" class="question_form_top_name form-control" style="color: black" placeholder="Untitled Form" value="{{ $form->title }}" readonly />
|
||||
<input type="text" name="description" id="form-description" class="question_form_top_desc" style="color: black" placeholder="Form Description" value="{{ $form->description }}" readonly />
|
||||
<input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" style="color: black" placeholder="Untitled Form" value="{{ $form->title }}" readonly />
|
||||
<input type="text" name="description" id="form-description" class="form-control form-control-sm" style="color: black" placeholder="Form Description" value="{{ $form->description }}" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" id="questions_section">
|
||||
@foreach ($form->questions as $index => $question)
|
||||
<div class="question">
|
||||
<select class="form-control question_type" name="questions[{{ $index }}][type]" onchange="changeQuestionType(this)" disabled>
|
||||
<div class="question mb-4 p-3 border rounded bg-white">
|
||||
<select class="form-control question_type mb-3" name="questions[{{ $index }}][type]" onchange="changeQuestionType(this)" disabled>
|
||||
<option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>
|
||||
<option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
|
||||
<option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>
|
||||
</select>
|
||||
<input type="text" name="questions[{{ $index }}][text]" class="form-control question-input" placeholder="Type your question here" value="{{ $question->question_text }}" readonly />
|
||||
<input type="text" name="questions[{{ $index }}][text]" class="form-control question-input mb-3" placeholder="Type your question here" value="{{ $question->question_text }}" readonly />
|
||||
@if ($question->options)
|
||||
<div class="options-container">
|
||||
<div class="options-container mb-3">
|
||||
@foreach (json_decode($question->options) as $optionIndex => $option)
|
||||
<div class="option">
|
||||
<div class="option d-flex align-items-center mb-2">
|
||||
<input type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" placeholder="Option" value="{{ $option }}" readonly />
|
||||
</div>
|
||||
@endforeach
|
||||
|
|
@ -213,20 +209,11 @@
|
|||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnsub">
|
||||
<span>
|
||||
<button type="submit" name="publish" value="publish" class="btnsave btn btn-secondary">
|
||||
{{ $form->is_published ? 'Unpublish' : 'Publish' }}
|
||||
</button>
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
<div class="btnsub text-center mt-4">
|
||||
<span>
|
||||
<a href="{{ route('forms.index') }}" class="btnsave btn btn-secondary">Return to Forms</a>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<script src="{{ asset('js/script.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,77 +12,6 @@
|
|||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-50 font-roboto">
|
||||
<div class="bg-white shadow-md p-4 flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<a href="/forms">
|
||||
<img src="{{ asset('images/google-form.png') }}" class="h-12 w-12 mr-4" alt="Google Form Icon" />
|
||||
</a>
|
||||
<h1 class="text-xl font-semibold">{{ $form->title }} - Response Detail</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto mt-8">
|
||||
<div class="bg-white p-6 shadow-md rounded-lg">
|
||||
<h2 class="text-2xl font-bold mb-4">Response from {{ $responses->first()->user->name ?? 'Anonymous' }} - {{ $responses->first()->submitted_at }}</h2>
|
||||
|
||||
@foreach ($responses as $response)
|
||||
@php
|
||||
$question = $questions[$response->question_id] ?? null;
|
||||
$decodedAnswers = json_decode($response->answers, true);
|
||||
@endphp
|
||||
|
||||
@if ($question)
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-medium">{{ $question->question_text }}</h3>
|
||||
@if ($question->type == 'dropdown')
|
||||
<select disabled class="w-full p-2 mt-2 border rounded">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<option {{ ($option == $decodedAnswers) ? 'selected' : '' }}>
|
||||
{{ $option }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@elseif (in_array($question->type, ['multiple_choice', 'checkbox']))
|
||||
<div class="mt-2">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<label class="block">
|
||||
<input type="{{ $question->type == 'checkbox' ? 'checkbox' : 'radio' }}" disabled {{ in_array($option, (array)$decodedAnswers) ? 'checked' : '' }} class="mr-2">
|
||||
{{ $option }}
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<p class="mt-2 p-2 bg-gray-100 rounded">{{ is_array($decodedAnswers) ? implode(', ', $decodedAnswers) : $decodedAnswers }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<p class="text-red-500">Question not found for ID: {{ $response->question_id }}</p>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{ asset('js/script.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html> --}}
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Response Detail</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body style="background-color: #f0ebf8" class="font-roboto">
|
||||
<header class="bg-white shadow-md py-4">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
|
|
@ -139,4 +68,93 @@
|
|||
<script src="{{ asset('js/script.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html> --}}
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>Response Detail - {{ $form->title }}</title>
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body style="background-color: #f0ebf8" class="font-open-sans">
|
||||
<header class="bg-white shadow-md py-1">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<a href="/forms">
|
||||
<img src="{{ asset('images/google-form.png') }}" alt="Google Form Icon" class="h-12 w-12 mr-4" />
|
||||
</a>
|
||||
<h1 style="color: rgb(103,58,183)" class="text-xl font-semibold">{{ $form->title }} - Response Detail</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="question_form bg-light p-4 rounded shadow-sm">
|
||||
<div class="section">
|
||||
<div class="question_title_section mb-4">
|
||||
<div class="question_form_top">
|
||||
<input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" style="color: black" placeholder="Untitled Form" value="{{ $form->title }}" readonly />
|
||||
<input type="text" name="description" id="form-description" class="form-control form-control-sm" style="color: black" value="{{$form->description}}" readonly/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" id="questions_section">
|
||||
<h2 class="text-2xl font-bold mb-6">Response from {{ $responses->first()->user->name ?? 'Anonymous' }} - {{ $responses->first()->submitted_at }}</h2>
|
||||
|
||||
@foreach ($responses as $response)
|
||||
@php
|
||||
$question = $questions[$response->question_id] ?? null;
|
||||
$decodedAnswers = json_decode($response->answers, true);
|
||||
@endphp
|
||||
|
||||
@if ($question)
|
||||
<div class="question mb-4 p-3 border rounded bg-white">
|
||||
<h3 class="text-lg font-medium mb-2">{{ $question->question_text }}</h3>
|
||||
@if ($question->type == 'dropdown')
|
||||
<select disabled class="form-control">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<option {{ ($option == $decodedAnswers) ? 'selected' : '' }}>
|
||||
{{ $option }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@elseif (in_array($question->type, ['multiple_choice', 'checkbox']))
|
||||
<div class="options-container mb-3">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<div class="option d-flex align-items-center mb-2">
|
||||
<input type="{{ $question->type == 'checkbox' ? 'checkbox' : 'radio' }}" disabled {{ in_array($option, (array)$decodedAnswers) ? 'checked' : '' }} class="mr-2">
|
||||
{{ $option }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<p class="mt-2 p-3 bg-light rounded">{{ is_array($decodedAnswers) ? implode(', ', $decodedAnswers) : $decodedAnswers }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<p class="text-danger">Question not found for ID: {{ $response->question_id }}</p>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btnsub text-center mt-4">
|
||||
<span>
|
||||
<a href="{{ route('forms.index') }}" class="btn btn-secondary">Return to Forms</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<script src="{{ asset('js/script.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue