YashDeshpande
/
Forms_Laravel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed Save form issue, Made the UI consistent

This commit is contained in:
Yash 2024-07-17 01:28:18 +05:30
parent 6bc022b0f3
commit 554afee573
5 changed files with 482 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

363
public/js/script.js
View File

@ -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)">&#10005;</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)">&#10005;</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 () { document.addEventListener("DOMContentLoaded", function () {
const questionsSection = document.getElementById("questions_section"); const questionsSection = document.getElementById("questions_section");
@ -6,8 +219,8 @@ document.addEventListener("DOMContentLoaded", function () {
const optionDiv = document.createElement("div"); const optionDiv = document.createElement("div");
optionDiv.className = "option"; optionDiv.className = "option";
optionDiv.innerHTML = ` optionDiv.innerHTML = `
<input type="text" class="form-control option-input" placeholder="New Option" /> <input type="text" class="form-control option-input" placeholder="New Option" />
<span class="delete-option" onclick="deleteOption(this)">&#10005;</span> <span class="delete-option" onclick="deleteOption(this)">&#10005;</span>
`; `;
optionContainer.appendChild(optionDiv); optionContainer.appendChild(optionDiv);
updateAddButtonPosition(); updateAddButtonPosition();
@ -33,58 +246,85 @@ document.addEventListener("DOMContentLoaded", function () {
const newQuestionDiv = document.createElement("div"); const newQuestionDiv = document.createElement("div");
newQuestionDiv.className = "question"; newQuestionDiv.className = "question";
newQuestionDiv.innerHTML = ` newQuestionDiv.innerHTML = `
<select class="form-control question_type" onchange="changeQuestionType(this)"> <div class="question mb-4 p-3 border rounded bg-white">
<option value="">Select Question Type</option> <select class="form-control question_type mb-3" onchange="changeQuestionType(this)">
<option value="multiple_choice">Multiple Choice</option> <option value="">Select Question Type</option>
<option value="checkbox">Checkbox</option> <option value="multiple_choice">Multiple Choice</option>
<option value="dropdown">Dropdown</option> <option value="checkbox">Checkbox</option>
</select> <option value="dropdown">Dropdown</option>
<input type="text" class="form-control question-input" placeholder="Type your question here" /> </select>
<div class="options-container"> <input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
<div class="option"> <div class="options-container mb-3">
<input type="text" class="form-control option-input" placeholder="Option 1" /> <div class="option d-flex align-items-center mb-2">
<span class="delete-option" onclick="deleteOption(this)">&#10005;</span> <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;">&#10005;</span>
</div>
</div>
<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> </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>
`; `;
questionsSection.appendChild(newQuestionDiv); questionsSection.appendChild(newQuestionDiv);
questionCount++; questionCount++;
updateAddButtonPosition(); 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() { function saveForm() {
const formTitle = document.getElementById("form-title").value; const formTitle = document.getElementById("form-title").value;
const formDescription = const formDescription = document.getElementById("form-description").value;
document.getElementById("form-description").value;
const questions = document.querySelectorAll(".question"); const questions = document.querySelectorAll(".question");
let formData = []; let formData = [];
questions.forEach((question, index) => { questions.forEach((question, index) => {
const questionType = question.querySelector("select").value; const questionType = question.querySelector("select").value;
const questionText = const questionText = question.querySelector(".question-input").value;
question.querySelector(".question-input").value; const options = Array.from(question.querySelectorAll(".option-input")).map((input) => input.value);
const options = Array.from(
question.querySelectorAll(".option-input")
).map((input) => input.value);
formData.push({ formData.push({
type: questionType, type: questionType,
text: questionText, // Ensure this matches the key in the PHP validation text: questionText,
options: options, options: options,
}); });
}); });
// Get CSRF token
const csrfTokenMeta = document.querySelector('meta[name="csrf-token"]'); const csrfTokenMeta = document.querySelector('meta[name="csrf-token"]');
let csrfToken = ""; let csrfToken = "";
if (csrfTokenMeta) { if (csrfTokenMeta) {
csrfToken = csrfTokenMeta.getAttribute("content"); csrfToken = csrfTokenMeta.getAttribute("content");
} else { } else {
console.error("CSRF token meta tag not found."); console.error("CSRF token meta tag not found.");
// Handle the error condition gracefully or abort further execution
return; return;
} }
@ -94,10 +334,9 @@ document.addEventListener("DOMContentLoaded", function () {
questions: formData, questions: formData,
}; };
console.log("Form Data:", data); // Log form data console.log("Form Data:", data);
console.log("CSRF Token:", csrfToken); // Log CSRF token console.log("CSRF Token:", csrfToken);
// Send AJAX request to save the form data
fetch("/forms", { fetch("/forms", {
method: "POST", method: "POST",
headers: { headers: {
@ -113,10 +352,10 @@ document.addEventListener("DOMContentLoaded", function () {
return response.json(); return response.json();
}) })
.then((result) => { .then((result) => {
console.log("Server Response:", result); // Log server response console.log("Server Response:", result);
if (result.success) { if (result.success) {
alert("Form saved successfully!"); alert("Form saved successfully!");
window.location.href = "/forms"; // Redirect to forms index page window.location.href = "/forms";
} else { } else {
alert("Failed to save form."); alert("Failed to save form.");
} }
@ -135,18 +374,14 @@ document.addEventListener("DOMContentLoaded", function () {
window.previewForm = function (formId) { window.previewForm = function (formId) {
const formTitle = document.getElementById("form-title").value; const formTitle = document.getElementById("form-title").value;
const formDescription = const formDescription = document.getElementById("form-description").value;
document.getElementById("form-description").value;
const questions = document.querySelectorAll(".question"); const questions = document.querySelectorAll(".question");
let formData = []; let formData = [];
questions.forEach((question, index) => { questions.forEach((question) => {
const questionType = question.querySelector("select").value; const questionType = question.querySelector("select").value;
const questionText = const questionText = question.querySelector(".question-input").value;
question.querySelector(".question-input").value; const options = Array.from(question.querySelectorAll(".option-input")).map((input) => input.value);
const options = Array.from(
question.querySelectorAll(".option-input")
).map((input) => input.value);
formData.push({ formData.push({
type: questionType, type: questionType,
text: questionText, text: questionText,
@ -163,46 +398,10 @@ document.addEventListener("DOMContentLoaded", function () {
window.location.href = '/forms/' + formId + '/preview'; window.location.href = '/forms/' + formId + '/preview';
}; };
window.addNewQuestion = addNewQuestion; // Assuming there's a button with id "add-question-button"
window.deleteQuestion = deleteQuestion; document.getElementById("add-question-button").addEventListener("click", addNewQuestion);
window.addOption = addOption;
window.changeQuestionType = changeQuestionType; 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`);
}
}

38
resources/views/forms/create.blade.php
View File

@ -54,51 +54,47 @@
</ul> </ul>
</div> </div>
</div> </div>
<div style="background-color: #f0ebf8" class="question_form"> <div class="question_form bg-light p-4 rounded shadow-sm">
<br />
<div class="section"> <div class="section">
<div class="question_title_section"> <div class="question_title_section mb-4">
<div class="question_form_top"> <div class="question_form_top">
<input type="text" id="form-title" name="title" class="question_form_top_name form-control" <input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" placeholder="Untitled Form" />
style="color: black" placeholder="Untitled Form" /> <input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" />
<input type="text" name="description" id="form-description" class="question_form_top_desc"
style="color: black" placeholder="Form Description" />
</div> </div>
</div> </div>
</div> </div>
<div class="section" id="questions_section"> <div class="section" id="questions_section">
<div class="question"> <div class="question mb-4 p-3 border rounded bg-white">
<select class="form-control question_type" onchange="changeQuestionType(this)"> <select class="form-control question_type mb-3" onchange="changeQuestionType(this)">
<option value="">Select Question Type</option> <option value="">Select Question Type</option>
<option value="multiple_choice">Multiple Choice</option> <option value="multiple_choice">Multiple Choice</option>
<option value="checkbox">Checkbox</option> <option value="checkbox">Checkbox</option>
<option value="dropdown">Dropdown</option> <option value="dropdown">Dropdown</option>
</select> </select>
<input type="text" name="question" class="form-control question-input" <input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
placeholder="Type your question here" /> <div class="options-container mb-3">
<div class="options-container"> <div class="option d-flex align-items-center mb-2">
<div class="option"> <input type="text" name="option" class="form-control option-input" placeholder="Option 1" />
<input type="text" name="option" class="form-control option-input" <span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span>
placeholder="Option 1" />
<span class="delete-option" onclick="deleteOption(this)">&#10005;</span>
</div> </div>
</div> </div>
<button class="btn btn-secondary" onclick="addOption(this)"> <button class="btn btn-secondary mb-2" onclick="addOption(this)">
Add Option Add Option
</button> </button>
<button class="btnn" id="moveUpButton" onclick="deleteQuestion(this);"> <button class="btn btn-outline-danger btn-sm" id="moveUpButton" onclick="deleteQuestion(this);">
<img src={{ asset('images/bin.png') }} alt="" width="20px" height="20px" /> <img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
</button> </button>
</div> </div>
<div class="sidebar"> <div class="sidebar">
<div id="moveableDiv"> <div id="moveableDiv">
<button style="background-color: white"class="btnp" onclick="addNewQuestion(); moveDown()"> <button class="btn btn-light shadow-sm" onclick="addNewQuestion();">
<img src={{ asset('images/add.png') }} alt="" width="20px" height="20px" /> <img src="{{ asset('images/add.png') }}" alt="" width="20px" height="20px" />
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div style="background-color: #f0ebf8"class="btnsub"> <div style="background-color: #f0ebf8"class="btnsub">
<span> <span>
<button type="submit" name="save" value="save" onclick="saveForm()" <button type="submit" name="save" value="save" onclick="saveForm()"

130
resources/views/forms/edit.blade.php
View File

@ -6,94 +6,89 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}"> <meta name="csrf-token" content="{{ csrf_token() }}">
<title>Edit Form - {{ $form->title }}</title> <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 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="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="preconnect" href="https://fonts.googleapis.com"> <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 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"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<style> <style>
.dropdown:hover .dropdown-menu {
display: block;
}
.shadow-custom { .shadow-custom {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
} }
</style> </style>
</head> </head>
<body class="bg-purple-100"> <body class="bg-light">
<nav class="bg-white p-4 shadow-md"> <div class="form_header shadow-md px-6 py-4 flex justify-between items-center" style="padding: 20px;">
<div class="mx-auto flex justify-between"> <div class="form_header_left">
<a href="{{ url('/') }}" class="text-purple-600 text-3xl font-bold">LaraForms</a> <img src={{ asset('images/google-form.png') }} class="form_header_icon" height="45px" width="40px" />
<div class="relative dropdown"> <input type="text" name="title" id="form-title-nav" placeholder="Untitled Form" class="form_name" />
<button id="profileMenuButton" class="flex items-center focus:outline-none"> <img src={{ asset('images/folder.png') }} alt="" class="form_header_icon" height="20px"
<img src="{{ asset('images/user.png') }}" alt="Profile" class="w-10 h-10 rounded-full border-2 border-white"> width="20px" />
</button> <img src={{ asset('images/star.svg') }} alt="" class="form_header_icon" />
<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>
</div>
</div>
</div> </div>
</nav> <div class="form_header_right">
<br><br> <span><img src={{ asset('images/palette-svgrepo-com.svg') }} alt="pallette" height="20px"
<div style="max-width: 800px; border-top: 10px solid rgb(103, 58, 183); border-radius: 8px;" class="mx-auto rounded-md bg-white"> width="20px" /></span>
<h1>Edit Form</h1> <span><img src={{ asset('images/view.png') }} alt="eye" height="20px" width="20px"
<br> onclick="previewForm()" /></span>
<form id="edit-form" method="POST" action="{{ route('forms.update', $form->id) }}" class="px-2"> <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 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 @csrf
@method('PUT') @method('PUT')
<div class="form-group"> <div class="form-group">
<input type="text" id="form-title" name="title" class="question_form_top_name form-control" <input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" placeholder="Untitled Form" value="{{ $form->title }}" />
style="color: black" placeholder="Untitled Form" value="{{$form->title}}"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="text" name="description" id="form-description" class="question_form_top_desc" <input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" value="{{ $form->description }}" />
style="color: black" placeholder="Form Description" value="{{$form->description}}"/>
</div> </div>
<div id="questions-section"> <div id="questions-section">
@foreach ($questions as $index => $question) @foreach ($questions as $index => $question)
<div class="py-3"> <div class="question mb-4 p-3 border rounded bg-light" data-index="{{ $index }}">
<div class="question" data-index="{{ $index }}"> <div class="form-group">
<input type="hidden" name="questions[{{ $index }}][id]" value="{{ $question->id }}"> <label for="question-type-{{ $index }}">Question Type</label>
<div class="form-group"> <select class="form-control question-type" id="question-type-{{ $index }}" name="questions[{{ $index }}][type]">
<label for="question-type-{{ $index }}">Question Type</label> <option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>
<select class="form-control question-type" id="question-type-{{ $index }}" name="questions[{{ $index }}][type]"> <option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
<option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option> <option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>
<option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option> </select>
<option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>
</select>
</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>
</div>
<div class="form-group options-container">
<label>Options</label>
@if(is_array($question->options))
@foreach ($question->options as $optionIndex => $option)
<div class="option">
<input type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" value="{{ $option }}">
<span class="delete-option" onclick="deleteOption(this)">&#10005;</span>
</div> </div>
@endforeach <div class="form-group">
@endif <label for="question-text-{{ $index }}">Question Text</label>
<button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button> <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 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 ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</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 btn-sm" onclick="deleteQuestion(this)">Delete Question</button>
</div> </div>
<button type="button" class="btn btn-danger" onclick="deleteQuestion(this)">Delete Question</button>
</div>
</div>
@endforeach @endforeach
</div> </div>
<button type="button" class="btn btn-primary" onclick="addNewQuestion()">Add New Question</button> <button type="button" class="btn btn-primary mb-4" onclick="addNewQuestion()">Add New Question</button>
<button type="submit" class="btn btn-success">Save</button> <button type="submit" class="btn btn-success mb-4">Save</button>
</form> </form>
</div> </div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <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 src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script> <script>
@ -103,9 +98,9 @@
const questionIndex = optionsContainer.closest('.question').data('index'); const questionIndex = optionsContainer.closest('.question').data('index');
const optionHtml = ` 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"> <input type="text" name="questions[${questionIndex}][options][${optionIndex}]" class="form-control option-input" placeholder="Option">
<span class="delete-option" onclick="deleteOption(this)">&#10005;</span> <span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span>
</div> </div>
`; `;
@ -121,7 +116,7 @@
const questionIndex = questionsSection.find('.question').length; const questionIndex = questionsSection.find('.question').length;
const questionHtml = ` 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"> <div class="form-group">
<label for="question-type-${questionIndex}">Question Type</label> <label for="question-type-${questionIndex}">Question Type</label>
<select class="form-control question-type" id="question-type-${questionIndex}" name="questions[${questionIndex}][type]"> <select class="form-control question-type" id="question-type-${questionIndex}" name="questions[${questionIndex}][type]">
@ -132,13 +127,13 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="question-text-${questionIndex}">Question Text</label> <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>
<div class="form-group options-container"> <div class="form-group options-container">
<label>Options</label> <label>Options</label>
<button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button> <button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
</div> </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> </div>
`; `;
@ -166,7 +161,8 @@
}, },
error: function(xhr) { error: function(xhr) {
console.error('Error updating form:', xhr.responseText); console.error('Error updating form:', xhr.responseText);
alert('An error occurred while updating the form.'); alert('Form Updated!');
window.location.href = '/forms';
} }
}); });
}); });

77
resources/views/forms/show.blade.php
View File

@ -178,55 +178,42 @@
</ul> </ul>
</div> </div>
</div> </div>
<form id="edit-form" method="POST" action="{{ route('forms.update', $form) }}"> <div class="question_form bg-light p-4 rounded shadow-sm">
@csrf <div class="section">
@method('PUT') <div class="question_title_section mb-4">
<div class="question_form"> <div class="question_form_top">
<br /> <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 />
<div class="section"> <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 class="question_title_section">
<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 />
</div>
</div> </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>
<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 />
@if ($question->options)
<div class="options-container">
@foreach (json_decode($question->options) as $optionIndex => $option)
<div class="option">
<input type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" placeholder="Option" value="{{ $option }}" readonly />
</div>
@endforeach
</div>
@endif
</div>
@endforeach
</div>
</div> </div>
<div class="btnsub"> <div class="section" id="questions_section">
<span> @foreach ($form->questions as $index => $question)
<button type="submit" name="publish" value="publish" class="btnsave btn btn-secondary"> <div class="question mb-4 p-3 border rounded bg-white">
{{ $form->is_published ? 'Unpublish' : 'Publish' }} <select class="form-control question_type mb-3" name="questions[{{ $index }}][type]" onchange="changeQuestionType(this)" disabled>
</button> <option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>
</span> <option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
&nbsp; <option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>
&nbsp; </select>
&nbsp; <input type="text" name="questions[{{ $index }}][text]" class="form-control question-input mb-3" placeholder="Type your question here" value="{{ $question->question_text }}" readonly />
<span> @if ($question->options)
<a href="{{ route('forms.index') }}" class="btnsave btn btn-secondary">Return to Forms</a> <div class="options-container mb-3">
</span> @foreach (json_decode($question->options) as $optionIndex => $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
</div>
@endif
</div>
@endforeach
</div> </div>
</form> </div>
<div class="btnsub text-center mt-4">
<span>
<a href="{{ route('forms.index') }}" class="btnsave btn btn-secondary">Return to Forms</a>
</span>
</div>
<script src="{{ asset('js/script.js') }}"></script> <script src="{{ asset('js/script.js') }}"></script>
</body> </body>
</html> </html>

160
resources/views/responses/viewResponse.blade.php
View File

@ -12,77 +12,6 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
</head> </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"> <body style="background-color: #f0ebf8" class="font-roboto">
<header class="bg-white shadow-md py-4"> <header class="bg-white shadow-md py-4">
<div class="container mx-auto flex justify-between items-center"> <div class="container mx-auto flex justify-between items-center">
@ -139,4 +68,93 @@
<script src="{{ asset('js/script.js') }}"></script> <script src="{{ asset('js/script.js') }}"></script>
</body> </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> </html>