UI changes
This commit is contained in:
Yash
parent
2f7529ce2e
commit
e747614bd3
|
|
@ -20,7 +20,7 @@ class FormController extends Controller
|
|||
$publishedForms = Form::where('is_published', true)->count();
|
||||
$totalResponses = Response::count();
|
||||
|
||||
$forms = Form::where('user_id', Auth::id())->get();
|
||||
$forms = Form::where('user_id', Auth::id())->orderBy('created_at', 'desc')->get();
|
||||
return view('forms.index', [
|
||||
'forms' => $forms,
|
||||
'totalForms' => $totalForms,
|
||||
|
|
@ -54,6 +54,55 @@ class FormController extends Controller
|
|||
}
|
||||
|
||||
|
||||
public function createWithTemplate($template)
|
||||
{
|
||||
$data = [];
|
||||
|
||||
switch ($template) {
|
||||
case 'contact':
|
||||
$data = [
|
||||
'title' => 'Contact Information',
|
||||
'description' => 'Template for collecting contact information.',
|
||||
'questions' => [
|
||||
['type' => 'text', 'question_text' => 'Name'],
|
||||
['type' => 'text', 'question_text' => 'Email'],
|
||||
// Add more questions as needed
|
||||
],
|
||||
];
|
||||
break;
|
||||
|
||||
case 'rsvp':
|
||||
$data = [
|
||||
'title' => 'RSVP',
|
||||
'description' => 'Event Address: 123 Your Street Your City, ST 12345
|
||||
Contact us at (123) 456-7890 or no_reply@example.com
|
||||
',
|
||||
'questions' => [
|
||||
['type' => 'text', 'question_text' => 'Can you attend?'],
|
||||
['type' => 'text', 'question_text' => 'Number of Guests'],
|
||||
// Add more questions as needed
|
||||
],
|
||||
];
|
||||
break;
|
||||
|
||||
case 'party':
|
||||
$data = [
|
||||
'title' => 'Party Invite',
|
||||
'description' => 'Template for party invitations.',
|
||||
'questions' => [
|
||||
['type' => 'text', 'question_text' => 'Name'],
|
||||
['type' => 'text', 'question_text' => 'RSVP Status'],
|
||||
// Add more questions as needed
|
||||
],
|
||||
];
|
||||
break;
|
||||
}
|
||||
|
||||
return view('forms.create', ['data' => $data]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
public function store(Request $request)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -21,6 +21,12 @@ class ResponseController extends Controller
|
|||
return view('responses.index', compact('form', 'responses'));
|
||||
}
|
||||
|
||||
public function showSuccess(Form $form)
|
||||
{
|
||||
return view('responses.success', compact('form'));
|
||||
}
|
||||
|
||||
|
||||
// Display a specific response
|
||||
public function viewResponse(Form $form, $responseId)
|
||||
{
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 959 B |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 1.1 KiB |
|
|
@ -48,8 +48,8 @@
|
|||
<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 p-2 mb-2" placeholder="Untitled Form" />
|
||||
<input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" />
|
||||
<input type="text" id="form-title" name="title" value="{{ $data['title'] ?? '' }}" class="form-control form-control-lg p-2 mb-2" placeholder="Untitled Form" />
|
||||
<input type="text" name="description" id="form-description" value="{{ $data['description'] ?? '' }}" class="form-control form-control-sm" placeholder="Form Description" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@
|
|||
<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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
|
||||
rel="stylesheet">
|
||||
<style>
|
||||
|
|
@ -110,6 +112,49 @@
|
|||
<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>
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$('#edit-form').on('submit', function (e) {
|
||||
e.preventDefault(); // Prevent the default form submission
|
||||
|
||||
// Get the form action and data
|
||||
var form = $(this);
|
||||
var url = form.attr('action');
|
||||
var formData = form.serialize();
|
||||
|
||||
// Send an AJAX request to submit the form data
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: url,
|
||||
data: formData,
|
||||
success: function (response) {
|
||||
// Show SweetAlert on success
|
||||
Swal.fire({
|
||||
title: 'Success!',
|
||||
text: 'Form edited successfully.',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'OK'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Redirect to the show page
|
||||
window.location.href = "{{ route('forms.show', $form) }}";
|
||||
}
|
||||
});
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
// Handle any errors
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: 'An error occurred while editing the form. Please try again.',
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function addOption(button) {
|
||||
const optionsContainer = $(button).closest('.options-container');
|
||||
const optionIndex = optionsContainer.find('.option').length;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
{{-- <!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
<p class="font-normal text-gray-700 dark:text-gray-400">{{ $totalResponses }}</p>
|
||||
</a>
|
||||
</div>
|
||||
<h2 class="text-3xl font-semibold text-gray-800 font-sans">Created Forms</h2>
|
||||
<h2 class="text-3xl font-semibold text-gray-800 font-sans">Recent Forms</h2>
|
||||
<br>
|
||||
<div class="shadow-custom rounded-lg p-6 bg-gray-100">
|
||||
@if ($forms->isEmpty())
|
||||
|
|
@ -163,3 +163,164 @@
|
|||
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.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">
|
||||
<title>Forms</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
|
||||
<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-gray-100">
|
||||
<nav class="bg-white p-4 shadow-lg">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<a href="{{ url('/') }}" style="color: rgb(103,58,183)"
|
||||
class="text-3xl font-bold font-sans">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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<br>
|
||||
@if (session('success'))
|
||||
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-2 rounded relative mt-4" role="alert">
|
||||
<span class="block sm:inline">{{ session('success') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if (session('delete'))
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded relative mt-4" role="alert">
|
||||
<span class="block sm:inline">{{ session('delete') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
<div class="container mx-auto mt-10">
|
||||
<div class="flex justify-between mb-6 items-center grid grid-cols-4 gap-20">
|
||||
<a href="{{ route('forms.create') }}"
|
||||
class="inline-block px-6 py-3 text-white font-semibold rounded-md shadow bg-purple-700 hover:bg-purple-900 transition duration-200">Start
|
||||
a new form</a>
|
||||
|
||||
<a href="{{ route('forms.template', 'contact') }}" style="color: rgb(103,58,183)"
|
||||
class="block max-w-md p-5 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-50 transition duration-200">
|
||||
<h5 class="mb-2 text-gray-800 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Contact Information</h5>
|
||||
<p class="font-normal text-gray-700 dark:text-gray-400">Use this template to create a contact information form.</p>
|
||||
</a>
|
||||
<a href="{{ route('forms.template', 'rsvp') }}" class="block max-w-md p-5 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-50 transition duration-200">
|
||||
<h5 class="mb-2 text-gray-800 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">RSVP</h5>
|
||||
<p class="font-normal text-gray-700 dark:text-gray-400">Use this template to create an RSVP form for events.</p>
|
||||
</a>
|
||||
<a href="{{ route('forms.template', 'party') }}" class="block max-w-md p-5 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-50 transition duration-200">
|
||||
<h5 class="mb-2 text-gray-800 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Party Invite</h5>
|
||||
<p class="font-normal text-gray-700 dark:text-gray-400">Use this template to create a party invite form.</p>
|
||||
</a>
|
||||
</div>
|
||||
<hr style="height:30px">
|
||||
<h2 class="text-3xl font-semibold text-gray-800 font-sans">Recent Forms</h2>
|
||||
<br>
|
||||
<div class="shadow-custom rounded-lg p-6 bg-gray-100">
|
||||
@if ($forms->isEmpty())
|
||||
<p class="text-gray-600 text-center">No forms available.</p>
|
||||
@else
|
||||
<table class="min-w-full bg-white rounded-md overflow-hidden">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Form Title</th>
|
||||
<th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Created At</th>
|
||||
<th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Responses</th>
|
||||
<th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Status</th>
|
||||
<th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600"></th>
|
||||
<th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $form)
|
||||
<tr class="hover:bg-gray-50 transition duration-150">
|
||||
<td class="py-4 px-6 border-b border-gray-200">
|
||||
<a href="{{ route('forms.show', $form) }}"
|
||||
class="text-blue-600 font-semibold hover:underline">{{ $form->title }}</a>
|
||||
<p class="text-gray-600">{{ $form->description }}</p>
|
||||
</td>
|
||||
<td class="py-4 px-6 border-b border-gray-200">{{ $form->created_at->format('M d, Y') }}</td>
|
||||
<td class="py-4 px-6 border-b border-gray-200">
|
||||
<a href="{{ route('responses.viewResponses', $form) }}"
|
||||
class="text-blue-500 hover:underline">View Responses</a>
|
||||
</td>
|
||||
<td class="py-4 px-6 border-b border-gray-200">
|
||||
@if ($form->is_published)
|
||||
Published
|
||||
@else
|
||||
Unpublished
|
||||
@endif
|
||||
</td>
|
||||
<td class="py-8 px-6 border-b border-gray-200 flex items-center space-x-10">
|
||||
@if (!$form->is_published)
|
||||
<a href="{{ route('forms.edit', $form) }}" class="text-green-500 hover:underline">Edit</a>
|
||||
@else
|
||||
<a href="#" class="text-gray-500" id="formd" onclick="handle()">Edit</a>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
<form action="{{ route('forms.destroy', $form) }}" method="POST" class="inline-block">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="text-red-500 hover:underline">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function handle() {
|
||||
Swal.fire({
|
||||
title: 'You cannot edit a published form',
|
||||
icon: 'info',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
}
|
||||
setTimeout(function() {
|
||||
var successMessage = document.getElementById('successMessage');
|
||||
if (successMessage) {
|
||||
successMessage.remove();
|
||||
}
|
||||
}, 3000);
|
||||
</script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</form>
|
||||
|
||||
|
||||
<div><button type="submit" name="publish" value="publish" class="btnsave btn btn-secondary">Edit</button></div>
|
||||
<div><button type="submit" name="publish" value="publish" class="btnsave btn btn-secondary"><a href="/forms/{{$form->id}}/edit">Edit</a></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,108 +2,6 @@
|
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto py-8 px-4 md:px-0">
|
||||
<div class="bg-white shadow-md rounded-lg p-6">
|
||||
<h1 class="text-3xl font-semibold text-gray-900">{{ $form->title }}</h1>
|
||||
<p class="text-gray-600 mt-2">{{ $form->description }}</p>
|
||||
|
||||
<form action="{{ route('responses.submitForm', $form) }}" method="POST" class="mt-8">
|
||||
@csrf
|
||||
@foreach ($questions as $question)
|
||||
<div class="mt-6">
|
||||
<label class="block font-medium text-base text-gray-800 mb-2">{{ $question->question_text }}</label>
|
||||
@if ($question->type == 'multiple_choice')
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<label class="flex items-center mt-2">
|
||||
<input class="form-radio text-base text-purple-600 h-4 w-4" type="radio" name="answers[{{ $question->id }}]" value="{{ $option }}">
|
||||
<span class="ml-2 text-gray-700">{{ $option }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
@elseif($question->type == 'checkbox')
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<label class="flex items-center mt-2">
|
||||
<input class="form-checkbox text-purple-600 h-4 w-4" type="checkbox" name="answers[{{ $question->id }}][]" value="{{ $option }}">
|
||||
<span class="ml-2 text-gray-700">{{ $option }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
@elseif($question->type == 'dropdown')
|
||||
<select class="form-select mt-2 block w-full p-2 border border-gray-300 rounded-md bg-white shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" name="answers[{{ $question->id }}]">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<option value="{{ $option }}">{{ $option }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@elseif($question->type == 'text')
|
||||
<textarea name="answers[{{ $question->id }}]" class="form-textarea mt-2 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm"></textarea>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<button type="submit" class="mt-8 w-full md:w-auto inline-flex justify-center items-center px-6 py-3 bg-purple-700 border border-transparent rounded-md font-semibold text-white text-lg uppercase tracking-widest hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('responseForm').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const form = event.target;
|
||||
const formData = new FormData(form);
|
||||
|
||||
fetch(form.action, {
|
||||
method: form.method,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
Swal.fire({
|
||||
title: 'Success!',
|
||||
text: 'Form submitted successfully.',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'OK'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = '/forms';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: 'Failed to submit form.',
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: 'An error occurred while submitting the form.',
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection --}}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@extends('layouts.app')
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto py-8 px-4 md:px-0">
|
||||
<div class="bg-white shadow-md rounded-lg p-6">
|
||||
|
|
@ -191,6 +89,119 @@
|
|||
text: 'Form Submitted Successfully',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'OK'
|
||||
}).then()=>{
|
||||
window.location.href
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection --}}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@extends('layouts.app')
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto py-8 px-4 md:px-0">
|
||||
<div class="bg-white shadow-md rounded-lg p-6">
|
||||
<h1 class="text-3xl font-semibold text-gray-900">{{ $form->title }}</h1>
|
||||
<p class="text-gray-600 mt-2">{{ $form->description }}</p>
|
||||
|
||||
<form id="responseForm" action="{{ route('responses.submitForm', $form) }}" method="POST" class="mt-8">
|
||||
@csrf
|
||||
@foreach ($questions as $question)
|
||||
<div class="mt-6">
|
||||
<label class="block font-medium text-base text-gray-800 mb-2">{{ $question->question_text }}</label>
|
||||
@if ($question->type == 'multiple_choice')
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<label class="flex items-center mt-2">
|
||||
<input class="form-radio text-base text-purple-600 h-4 w-4" type="radio" name="answers[{{ $question->id }}]" value="{{ $option }}">
|
||||
<span class="ml-2 text-gray-700">{{ $option }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
@elseif($question->type == 'checkbox')
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<label class="flex items-center mt-2">
|
||||
<input class="form-checkbox text-purple-600 h-4 w-4" type="checkbox" name="answers[{{ $question->id }}][]" value="{{ $option }}">
|
||||
<span class="ml-2 text-gray-700">{{ $option }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
@elseif($question->type == 'dropdown')
|
||||
<select class="form-select mt-2 block w-full p-2 border border-gray-300 rounded-md bg-white shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" name="answers[{{ $question->id }}]">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<option value="{{ $option }}">{{ $option }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@elseif($question->type == 'text')
|
||||
<textarea name="answers[{{ $question->id }}]" class="form-textarea mt-2 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm"></textarea>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<button type="submit" class="mt-8 w-full md:w-auto inline-flex justify-center items-center px-6 py-3 bg-purple-700 border border-transparent rounded-md font-semibold text-white text-lg uppercase tracking-widest hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('responseForm').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const form = event.target;
|
||||
const formData = new FormData(form);
|
||||
|
||||
fetch(form.action, {
|
||||
method: form.method,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
Swal.fire({
|
||||
title: 'Success!',
|
||||
text: 'Form submitted successfully.',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'OK'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = '{{ route('responses.success', $form) }}';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Success!',
|
||||
text: 'Form submitted successfully.',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'OK'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = '{{ route('responses.success', $form) }}';
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
Swal.fire({
|
||||
title: 'Success!',
|
||||
text: 'Form submitted successfully.',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'OK'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = '{{ route('responses.success', $form) }}';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto py-8 px-4 md:px-0">
|
||||
<div class="bg-white shadow-md rounded-lg p-6 text-center">
|
||||
<h1 class="text-3xl font-semibold text-gray-900">Response Submitted Successfully</h1>
|
||||
<p class="text-gray-600 mt-2">Thank you for your response.</p>
|
||||
<a href="{{ route('responses.showForm', $form) }}" class="mt-8 inline-flex justify-center items-center px-6 py-3 bg-purple-700 border border-transparent rounded-md font-semibold text-white text-lg uppercase tracking-widest hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
|
||||
Fill Another Response
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
@ -141,110 +141,6 @@
|
|||
}, 2000);
|
||||
}
|
||||
|
||||
function showTab(tabId) {
|
||||
document.querySelectorAll('.tab-content').forEach(tab => {
|
||||
tab.classList.add('hidden');
|
||||
});
|
||||
document.getElementById(tabId).classList.remove('hidden');
|
||||
|
||||
document.querySelectorAll('.tab-link').forEach(link => {
|
||||
link.classList.remove('border-purple-600', 'text-purple-600');
|
||||
});
|
||||
document.querySelector(`[onclick="showTab('${tabId}')"]`).classList.add('border-purple-600', 'text-purple-600');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const statistics = @json($statistics);
|
||||
console.log(statistics); // Log statistics for debugging
|
||||
|
||||
Object.keys(statistics).forEach(questionId => {
|
||||
const ctx = document.getElementById(`chart-${questionId}`).getContext('2d');
|
||||
const stat = statistics[questionId];
|
||||
|
||||
let labels = [];
|
||||
let data = [];
|
||||
let backgroundColors = [];
|
||||
|
||||
if (stat.type === 'multiple_choice' || stat.type === 'checkbox' || stat.type === 'dropdown') {
|
||||
const optionCounts = {};
|
||||
stat.responses.forEach(response => {
|
||||
if (Array.isArray(response)) {
|
||||
response.forEach(option => {
|
||||
if (option in optionCounts) {
|
||||
optionCounts[option]++;
|
||||
} else {
|
||||
optionCounts[option] = 1;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (response in optionCounts) {
|
||||
optionCounts[response]++;
|
||||
} else {
|
||||
optionCounts[response] = 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
labels = Object.keys(optionCounts);
|
||||
data = Object.values(optionCounts);
|
||||
backgroundColors = labels.map((_, index) => `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.5)`);
|
||||
}
|
||||
|
||||
if (stat.type === 'multiple_choice' || stat.type === 'dropdown') {
|
||||
new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Responses',
|
||||
data: data,
|
||||
backgroundColor: backgroundColors,
|
||||
borderColor: backgroundColors.map(color => color.replace('0.5', '1')),
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (stat.type === 'checkbox') {
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Responses',
|
||||
data: data,
|
||||
backgroundColor: backgroundColors,
|
||||
borderColor: backgroundColors.map(color => color.replace('0.5', '1')),
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Custom Scripts -->
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ Route::middleware(['auth'])->group(function () {
|
|||
Route::delete('/forms/{form}', [FormController::class, 'destroy'])->name('forms.destroy');
|
||||
Route::get('/forms/{form}/preview', [FormController::class, 'preview'])->name('forms.preview');
|
||||
Route::patch('/forms/{form}/publish', [FormController::class, 'togglePublish'])->name('forms.publish');
|
||||
Route::get('/forms/template/{template}', [FormController::class, 'createWithTemplate'])->name('forms.template');
|
||||
|
||||
});
|
||||
|
||||
// Response routes
|
||||
|
|
@ -30,5 +32,6 @@ Route::middleware(['auth'])->group(function () {
|
|||
Route::get('/forms/respond/{form}', [ResponseController::class, 'showForm'])->name('responses.showForm');
|
||||
Route::post('/forms/respond/{form}', [ResponseController::class, 'submitForm'])->name('responses.submitForm');
|
||||
Route::get('/forms/{form}/responses', [ResponseController::class, 'viewResponses'])->name('responses.viewResponses');
|
||||
Route::get('/forms/{form}/success', [ResponseController::class, 'showSuccess'])->name('responses.success');
|
||||
Route::get('/forms/{form}/responses/{responseId}', [ResponseController::class, 'viewResponse'])->name('responses.viewResponse');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue