qais_seosoft/SurveyVista
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

response frontend completed

Browse source
This commit is contained in:
Qais Yousuf 2024-04-10 19:26:03 +02:00
parent a399126e3b
commit 31faec4f73
5 changed files with 308 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
Web/Areas/Admin/Controllers/QuestionnaireController.cs
View file

@ -513,9 +513,7 @@ namespace Web.Areas.Admin.Controllers
body {{ body {{
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
}} }}
.text-danger {{
color:red;
}}
.container {{ .container {{
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
@ -543,13 +541,13 @@ namespace Web.Areas.Admin.Controllers
<h5>{subject}</h5> <h5>{subject}</h5>
<p>Thank you for participating in our survey. Your feedback is valuable to us.</p> <p>Thank you for participating in our survey. Your feedback is valuable to us.</p>
<p>Please click the button below to start the survey:</p> <p>Please click the button below to start the survey:</p>
<p class=""text-danger"">The survey will be expire in Date:{expiryDateTime.ToLongDateString()} Time: {expiryDateTime.ToShortTimeString()} </p> <p class=""text-danger"">The survey will be expire :{expiryDateTime.ToLongDateString()} Time: {expiryDateTime.ToShortTimeString()} </p>
<div style='text-align: center;'> <div style='text-align: center;'>
<a href='{completeUrl}' class='button'>Start Survey</a> <a href='{completeUrl}' class='button'>Start Survey</a>
<br> <br>
</div><br> </div><br>
<p><strong>Søren Eggert Lundsteen Olsen</strong> <p><strong>Søren Eggert Lundsteen Olsen</strong><br>
Seosoft ApS<br> Seosoft ApS<br>
<hr> <hr>
Hovedgaden 3 Hovedgaden 3

42
Web/Controllers/QuestionnaireResponseController.cs
View file

@ -71,48 +71,6 @@ namespace Web.Controllers
} }
//public IActionResult DisplayQuestionnaire(int id, string token)
//{
// // Check if the token is null or empty
// if (string.IsNullOrEmpty(token))
// {
// ViewBag.ErrorMessage = "The URL is invalid. Please provide a valid token.";
// return View("Error");
// }
// // Split the token to extract the expiration date and time
// string[] tokenParts = token.Split('|');
// if (tokenParts.Length != 2)
// {
// ViewBag.ErrorMessage = "The URL is invalid. Please provide a valid token.";
// return View("Error");
// }
// string expiryDateTimeString = tokenParts[1];
// // Parse the expiration datetime in UTC format
// if (!DateTime.TryParseExact(expiryDateTimeString, "yyyy-MM-ddTHH:mm:ssZ", CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal, out DateTime expiryDateTimeUtc))
// {
// ViewBag.ErrorMessage = "The URL is invalid. Please provide a valid token.";
// return View("Error");
// }
// // Convert the expiration datetime to local time
// DateTime expiryDateTimeLocal = expiryDateTimeUtc.ToLocalTime();
// // Check if the token is expired (accounting for time zone offset)
// if (expiryDateTimeLocal >= DateTime.Now.AddHours(1))
// {
// return RedirectToAction(nameof(Error));
// }
// // Retrieve the questionnaire using the numeric ID
// var questionnaire = _questionnaireRepository.GetQuestionnaireWithQuestionAndAnswer(id);
// return View(questionnaire);
//}
} }
} }

234
Web/Views/QuestionnaireResponse/DisplayQuestionnaire.cshtml
View file

@ -5,15 +5,42 @@
} }
<style> <style>
body { body {
height: 100% !important;
background-repeat:no-repeat; background-color:#141c27 !important;
background: linear-gradient(119deg, rgba(47,82,131,1) 0%, rgba(29,33,59,1) 34%, rgba(27,54,61,1) 67%, rgba(58,82,116,1) 100%) !important
} }
#QuestionCard{
height:auto;
padding:15px;
}
#rowSectionError {
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
align-content: center;
width: 100%;
flex-direction: row;
}
output{
color:white !important;
font-weight:bold;
}
#boxBanner {
display: block;
width: auto;
margin: 5px;
}
.QuestionContainer{ .QuestionContainer{
background-color:transparent !important; padding-top:100px;
margin-top:100px; padding-bottom:100px;
} }
.stepper { .stepper {
display: flex; display: flex;
@ -21,6 +48,7 @@
align-items: center; align-items: center;
} }
.step-indicator { .step-indicator {
width: 150px; width: 150px;
height: 30px; height: 30px;
@ -52,19 +80,16 @@
} }
.hero {
background-color:transparent !important;
}
section {
margin-top:30px;
}
.card{ .card{
box-shadow: 0px 0px 36px -12px rgba(20,101,230,1); box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
-webkit-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1); -webkit-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
-moz-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1); -moz-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
border-radius:10px; border-radius:10px;
background-color:transparent; background-color:transparent;
padding:30px padding:50px;
} }
@ -73,20 +98,40 @@
margin: 15px 0px 0px 0px; margin: 15px 0px 0px 0px;
} }
.rating {
display: inline-flex;
flex-direction: row-reverse; /* Set the direction to row-reverse */
}
.rating {
display: inline-block;
}
.rating i {
font-size: 25px;
cursor: pointer;
}
.rating i {
color: white; /* Set default color to white */
}
.rating i.selected {
color: orange;
}
</style> </style>
<div class="QuestionContainer"> <div class="QuestionContainer">
<div class="container card"> <section class="hero container card">
<div class="container">
<h3 class="text-danger">@ViewBag.ErrorMessage</h3>
<h4>@Model.Title</h4> <h4>@Model.Title</h4>
<p>@Html.Raw(Model.Description) </p> <p>@Html.Raw(Model.Description) </p>
</div>
<div class="container mt-5"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<!-- Stepper --> <!-- Stepper -->
<div class="col-md-3"> <div class="col-md-3">
@ -110,7 +155,75 @@
var question = Model.Questions[i]; var question = Model.Questions[i];
<div class="step @(i == 0 ? "active" : "")"> <div class="step @(i == 0 ? "active" : "")">
<p class="font-weight-normal">@(i + 1). @question.Text</p> <p class="font-weight-normal">@(i + 1). @question.Text</p>
<div id="QuestionCard">
@switch (question.Type) @switch (question.Type)
{
case QuestionType.Text:
<div class="form-group">
<input type="text" class="form-control" name="question@(i + 1)" placeholder="Enter answer">
</div>
break;
case QuestionType.CheckBox:
case QuestionType.Multiple_choice:
case QuestionType.Likert:
case QuestionType.Matrix:
case QuestionType.Demographic:
case QuestionType.Ranking:
<div class="form-group">
@foreach (var answer in question.Answers)
{
<div class="form-check">
<input class="form-check-input" type="checkbox" id="question@(i + 1)_answer@(answer.Id)" name="question@(i + 1)" value="@answer.Id">
<label class="form-check-label" for="question@(i + 1)_answer@(answer.Id)">
@answer.Text
</label>
</div>
}
</div>
break;
case QuestionType.TrueFalse:
<div class="form-check">
<input class="form-check-input" type="radio" id="question@(i + 1)_true" name="question@(i + 1)" value="true">
<label class="form-check-label" for="question@(i + 1)_true">True</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="question@(i + 1)_false" name="question@(i + 1)" value="false">
<label class="form-check-label" for="question@(i + 1)_false">False</label>
</div>
break;
case QuestionType.Open_ended:
<textarea class="form-control" id="question@(i + 1)" name="question@(i + 1)" rows="3" placeholder="Enter answer"></textarea>
break;
case QuestionType.Image:
<input type="file" class="form-control-file" id="question@(i + 1)" name="question@(i + 1)">
break;
case QuestionType.Slider:
<input type="range" class="form-range" id="question@(i + 1)" name="question@(i + 1)" min="0" max="100" step="1">
<output id="question@(i + 1)_output">50</output>
<script>
document.getElementById('question@(i + 1)').addEventListener('input', function () {
document.getElementById('question@(i + 1)_output').value = this.value;
});
</script>
break;
case QuestionType.Rating:
<div class="rating" data-question="@i">
@foreach (var answer in question.Answers)
{
@* <span class="text-white">@answer.Id</span> *@
<i class="bi bi-star ml-3" data-value="@answer.Id"></i>
}
</div>
break;
default:
<div class="alert alert-danger" role="alert">
Unsupported question type.
</div>
break;
}
@* @switch (question.Type)
{ {
case QuestionType.Text: case QuestionType.Text:
<div class="form-group"> <div class="form-group">
@ -161,12 +274,16 @@
}); });
</script> </script>
break; break;
default: default:
<div class="alert alert-danger" role="alert"> <div class="alert alert-danger" role="alert">
Unsupported question type. Unsupported question type.
</div> </div>
break; break;
} } *@
</div>
<div class="mt-3"> <div class="mt-3">
@if (i > 0) @if (i > 0)
{ {
@ -186,7 +303,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</div> </div>
@ -274,63 +391,32 @@
showStep(currentStep); showStep(currentStep);
updateStepper(); updateStepper();
function toggleCheckbox(labelElement) { $('.rating i').on('click', function() {
var checkbox = labelElement.previousElementSibling; // Find the nearest preceding checkbox var value = $(this).data('value');
checkbox.checked = !checkbox.checked; var questionIndex = $(this).closest('.rating').data('question');
checkbox.focus(); // Focus the checkbox after clicking on the label var selectedStars = $(this).closest('.rating').find('i.selected').length;
}
// Unselect all stars
$(this).closest('.rating').find('i').removeClass('selected');
// Select the clicked star and all preceding stars
$(this).addClass('selected').prevAll().addClass('selected');
// Update the hidden input value if needed
$('input[name="question' + questionIndex + '_rating"]').val(value);
// Update the label with the number of selected stars
$(this).closest('.rating').next('.selected-count').text(selectedStars);
}); });
// Prevent the default action for the anchor tags within the rating
$('.rating a').on('click', function(e) {
e.preventDefault();
});
});
</script> </script>
@* <script>
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById('questionnaireForm');
const steps = form.querySelectorAll('.step');
const submitButton = form.querySelector('.submit');
let currentStep = 0;
function showStep(index) {
steps.forEach((step, i) => {
if (i === index) {
step.style.display = 'block';
} else {
step.style.display = 'none';
}
});
if (index === steps.length - 1) {
submitButton.style.display = 'block';
} else {
submitButton.style.display = 'none';
}
}
function goToNextStep() {
if (currentStep < steps.length - 1) {
currentStep++;
showStep(currentStep);
}
}
function goToPrevStep() {
if (currentStep > 0) {
currentStep--;
showStep(currentStep);
}
}
const nextButtons = form.querySelectorAll('.next');
nextButtons.forEach(button => {
button.addEventListener('click', goToNextStep);
});
const prevButtons = form.querySelectorAll('.prev');
prevButtons.forEach(button => {
button.addEventListener('click', goToPrevStep);
});
showStep(currentStep);
});
</script> *@
} }

146
Web/Views/QuestionnaireResponse/Error.cshtml
View file

@ -12,13 +12,18 @@
background: linear-gradient(119deg, rgba(47,82,131,1) 0%, rgba(29,33,59,1) 34%, rgba(27,54,61,1) 67%, rgba(58,82,116,1) 100%) !important background: linear-gradient(119deg, rgba(47,82,131,1) 0%, rgba(29,33,59,1) 34%, rgba(27,54,61,1) 67%, rgba(58,82,116,1) 100%) !important
} }
.containerError { #rowSectionError {
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
align-content: center;
width: 100%;
margin-top:150px; flex-direction: row;
height:600px;
} }
.card{ #Errocard{
position: relative; position: relative;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -27,23 +32,142 @@
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: row; flex-direction: row;
min-width: 0;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 36px -12px rgba(20,101,230,1); box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
-webkit-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1); -webkit-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
-moz-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1); -moz-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
border-radius: 10px; border-radius: 10px;
background-color: transparent; background-color: transparent;
height:400px;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
height: 500px; padding:0 50px 0 50px;
padding-left: 50px; margin:150px 30px 0px 30px;
padding-right: 50px;
} }
@@media (max-width: 792px) {
#Errocard {
display: flex;
flex-direction:column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
height: 70vh;
padding: 0 20px 0 20px;
}
#boxError {
width: auto;
height: 30%;
margin: 5px;
}
}
@@media (max-width: 800px) {
#Errocard {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: center;
height: 70vh;
padding: 0 20px 0 20px;
}
#boxError {
width: auto;
height: 30%;
margin: 5px;
}
}
@@media (max-width: 1300px) {
#Errocard {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: row;
word-wrap: break-word;
box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
-webkit-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
-moz-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
border-radius: 10px;
background-color: transparent;
height: 400px;
flex-wrap: nowrap;
align-items: center;
padding: 0 50px 0 50px;
margin: 50px 30px 0px 30px;
}
#boxError {
width: auto;
margin: 5px;
}
#boxBanner {
display: block;
width: auto;
margin: 5px;
}
</style> </style>
<div class="containerError">
<div class="d-flex flex-column" id="BannerBackground">
<!-- FOR DEMO PURPOSE -->
<section class=" text-white">
<div class="container py-1">
<div class="card" id="Errocard">
<div class="col-lg-6" id="boxError">
<h5 class="text-danger">@ViewBag.ErrorMessage</h5>
@* <p class="fst-italic text-muted">@Html.Raw(Model.Content) <a class="text-primary" href="@Model.Sitecopyright" target="_blank">SeoSoft</a></p> *@
<a href="#" class="btn btn-sm mt-3" id="BannerButon"> Contact <i class="bi bi-ui-checks"></i></a>
</div>
<div class="col-lg-6" id="boxError">
<script src="https://unpkg.com/@@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
<dotlottie-player src="https://lottie.host/e3084d59-5df1-44e9-a0fe-0a015257fba7/LVAJX2PbZo.json" class="img-fluid" speed="1" style="width: auto; height: auto;" direction="1" playMode="normal" loop autoplay></dotlottie-player>
</div>
</div>
</div>
</section>
</div>
@* <div class="containerError">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="card"> <div class="card">
@ -64,7 +188,7 @@
</div> </div>
</div> </div> *@

3
Web/wwwroot/css/site.css
View file

@ -53,6 +53,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
width: 100%; width: 100%;
} }
#MainContent{ #MainContent{
@ -183,7 +184,7 @@
.hero { .hero {
background-color: #141c27; background-color: #141c27;
/* background-image: linear-gradient(119deg, rgba(14,12,56,1) 0%, rgba(20,26,35,1) 35%, rgba(24,35,51,1) 66%, rgba(34,49,70,1) 100%);*/
} }