Conversion_Kitchen_Code/kitchen_counter/institutional/templates/institutional/WaitForInstituteStudentDash...

596 lines
17 KiB
HTML
Raw Normal View History

2024-04-27 09:33:09 +00:00
{%extends "mnfapp/base.html"%} {%load static%} {%block content%}
<style>
@import url("https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght@100;300;400;500;600;700&display=swap");
body{
background: #FFF !important;
font-family: "Poppins", sans-serif !important;
margin-top: 100px !important;
}
.heading-2 {
padding: 4px;
display: flex;
justify-content: center;
width: auto;
color: #252525;
letter-spacing: 0em;
font-size: 24px;
font-weight: 600;
margin-top: 25px;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.spanNew {
color: #616161;
font-size: 14px;
font-weight: 500;
font-family: 'POPPINS';
letter-spacing: 0em;
}
.info_block_item:first-child {
grid-column: 1 / span 2;
}
.info_block_item {
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 5px,
rgba(0, 0, 0, 0.12) 0px -6px 15px,
rgba(0, 0, 0, 0.12) 0px 2px 3px,
rgba(0, 0, 0, 0.17) 0px 6px 6px,
rgba(0, 0, 0, 0.09) 0px -2px 2px;
color: black;
padding: 5px;
font-size: 14px;
border: 2px solid white;
border-radius: 12px;
padding: 2px 0 0 20px;
}
.info_block {
width: 80vw;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 10px;
margin: 20px auto;
}
.info_block1 {
width: 80vw;
margin: 4px auto;
}
.heading_secondary {
display: flex;
justify-content: center;
background-color: #EE3C4D;
border-radius: 25px;
letter-spacing: 1px;
color: white;
font-size: 20px;
width: 40vw;
transform: translate(20vw, 0vh);
padding: 3px 3px;
}
.newText {
text-align: center !important;
font-size: 16px !important;
font-weight: 600 !important;
color:#252525;
}
/* ------------------------------Responsive CSS for mobile-------------------------------------------------------------------------------- */
@media only screen and (max-width: 333px) and (min-width: 320px) {
.info_block {
width: 80vw;
display: block;
margin: 20px auto;
}
.heading-2 {
display: flex;
justify-content: center;
margin-top: 25px;
font-size: 16px;
font-weight: 500;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.info_block_item {
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 5px, rgba(0, 0, 0, 0.12) 0px -6px 15px, rgba(0, 0, 0, 0.12) 0px 2px 3px, rgba(0, 0, 0, 0.17) 0px 6px 6px, rgba(0, 0, 0, 0.09) 0px -2px 2px;
color: black;
padding: 5px;
font-size: 12px;
border: 2px solid white;
border-radius: 12px;
padding: 0 0 0 7px;
height: 24px;
align-items: left;
margin: 5px 0px;
overflow: hidden;
white-space: nowrap;
}
}
@media only screen and (max-width: 344px) and (min-width: 320px) {
.info_block {
width: 80vw;
display: block;
margin: 20px auto;
}
.heading-2 {
display: flex;
justify-content: center;
width: 86vw;
margin-top: 25px;
font-size: 16px;
font-weight: 500;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.info_block_item {
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 5px, rgba(0, 0, 0, 0.12) 0px -6px 15px, rgba(0, 0, 0, 0.12) 0px 2px 3px, rgba(0, 0, 0, 0.17) 0px 6px 6px, rgba(0, 0, 0, 0.09) 0px -2px 2px;
color: black;
padding: 5px;
font-size: 12px;
border: 2px solid white;
border-radius: 12px;
padding: 0 0 0 7px;
height: 24px;
align-items: left;
margin: 5px 0px;
overflow: hidden;
white-space: nowrap;
}
}
@media only screen and (max-width: 423px) and (min-width: 345px) {
.info_block {
width: 80vw;
display: block;
margin: 20px auto;
}
.heading-2 {
display: flex;
justify-content: center;
width: 86vw;
margin-top: 25px;
font-size: 16px;
font-weight: 500;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.info_block_item {
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 5px, rgba(0, 0, 0, 0.12) 0px -6px 15px, rgba(0, 0, 0, 0.12) 0px 2px 3px, rgba(0, 0, 0, 0.17) 0px 6px 6px, rgba(0, 0, 0, 0.09) 0px -2px 2px;
color: black;
padding: 5px;
font-size: 12px;
border: 2px solid white;
border-radius: 12px;
padding: 0 0 0 7px;
height: 24px;
align-items: left;
margin: 5px 0px;
overflow: hidden;
white-space: nowrap;
}
}
@media only screen and (max-width: 566px) and (min-width: 424px) {
.info_block {
width: 80vw;
display: block;
margin: 20px auto;
}
.heading-2 {
display: flex;
justify-content: center;
width: 86vw;
margin-top: 25px;
font-size: 16px;
font-weight: 700;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.info_block_item {
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 5px, rgba(0, 0, 0, 0.12) 0px -6px 15px, rgba(0, 0, 0, 0.12) 0px 2px 3px, rgba(0, 0, 0, 0.17) 0px 6px 6px, rgba(0, 0, 0, 0.09) 0px -2px 2px;
color: black;
padding: 5px;
font-size: 12px;
border: 2px solid white;
border-radius: 12px;
padding: 0 0 0 7px;
height: 24px;
align-items: left;
margin: 5px 0px;
overflow: hidden;
white-space: nowrap;
}
}
@media only screen and (max-width: 767px) and (min-width: 567px) {
.info_block {
width: 80vw;
display: block;
margin: 20px auto;
}
.heading-2 {
display: flex;
justify-content: center;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.info_block_item {
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 5px, rgba(0, 0, 0, 0.12) 0px -6px 15px, rgba(0, 0, 0, 0.12) 0px 2px 3px, rgba(0, 0, 0, 0.17) 0px 6px 6px, rgba(0, 0, 0, 0.09) 0px -2px 2px;
color: black;
padding: 5px;
font-size: 12px;
border: 2px solid white;
border-radius: 12px;
padding: 0 0 0 7px;
height: 24px;
align-items: left;
margin: 10px 0px;
overflow: hidden;
white-space: nowrap;
}
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
.info_block {
width: 80vw;
/* display: block; */
/* margin: 1px auto; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.heading-2 {
padding: 4px;
display: flex;
justify-content: center;
margin-top: 25px;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.info_block_item {
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 5px, rgba(0, 0, 0, 0.12) 0px -6px 15px, rgba(0, 0, 0, 0.12) 0px 2px 3px, rgba(0, 0, 0, 0.17) 0px 6px 6px, rgba(0, 0, 0, 0.09) 0px -2px 2px;
color: black;
padding: 5px;
font-size: 14px;
border: 2px solid white;
border-radius: 12px;
padding: 0px 12px;
/* height: 24px; */
align-items: left;
margin: 1px 0px;
overflow: hidden;
white-space: nowrap;
width: 500px;
}
}
@media only screen and (max-width: 1439px) and (min-width: 1024px) {
.info_block {
width: 80vw;
/* display: block; */
/* margin: 1px auto; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.heading-2 {
padding: 4px;
display: flex;
justify-content: center;
margin-top: 25px;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.info_block_item {
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 5px, rgba(0, 0, 0, 0.12) 0px -6px 15px, rgba(0, 0, 0, 0.12) 0px 2px 3px, rgba(0, 0, 0, 0.17) 0px 6px 6px, rgba(0, 0, 0, 0.09) 0px -2px 2px;
color: black;
padding: 5px;
font-size: 14px;
border: 2px solid white;
border-radius: 12px;
padding: 0px 12px;
height: 30px;
align-items: left;
margin: 1px 0px;
overflow: hidden;
white-space: nowrap;
width: 500px;
}
}
@media only screen and (min-width: 1440px) {
.info_block {
width: 80vw;
/* display: block; */
/* margin: 1px auto; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.heading-2 {
padding: 4px;
display: flex;
justify-content: center;
margin-top: 25px;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.info_block_item {
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 5px, rgba(0, 0, 0, 0.12) 0px -6px 15px, rgba(0, 0, 0, 0.12) 0px 2px 3px, rgba(0, 0, 0, 0.17) 0px 6px 6px, rgba(0, 0, 0, 0.09) 0px -2px 2px;
color: black;
padding: 5px;
font-size: 14px;
border: 2px solid white;
border-radius: 12px;
padding: 0px 12px;
height: 30px;
align-items: left;
margin: 1px 0px;
overflow: hidden;
white-space: nowrap;
width: 500px;
}
}
.justify-content-center {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
text-align: center;
}
.swtichbutton {
color: #ffffff;
background-color: #33B0CA;
border-radius: 8px;
font-size: 14px;
padding: 4px 14px;
height: 34px;
border: none;
outline: none;
}
.swtichbutton:hover {
-webkit-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.25);
box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.25);
}
.noborder {
border: none;
}
.tabdata {
font-size: 14px;
text-align: left;
color: #252525;
font-weight: 500;
letter-spacing: 0em;
}
.CorporateTableDiv {
width: 66vw;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 20px;
}
.buttonstate {
background-color: yellow;
}
.footer {
/* position: absolute !important;
bottom: 0;
width: 100%; */
}
</style>
<body>
<div class="heading-2">{{userdetails.name}}'s Dashboard</div>
<div class="CorporateTableDiv">
<table border="0" style="border:hidden; box-shadow:none; width: 100% !important;">
<tr class="noborder">
<td class=tabdata>
<label>Institution Email: &nbsp;</label>
<span class="spanNew">{{userdetails.student_institute_email}}</span>
</td>
<td class=tabdata>
<label>Alternative Email: &nbsp;</label>
<span class="spanNew">{{userdetails.email}}</span>
</td>
</tr>
<tr class="noborder">
<td class=tabdata>
<label>Phone Number: &nbsp;</label>
<span
class="spanNew">+{{userdetails.wait_for_institute_student_phone_number_country_code}}{{userdetails.wait_for_institute_student_phone_number}}</span>
</td>
<td class=tabdata>
<label>Free Bonus Points : &nbsp;</label>
<span class="spanNew">{{userdetails.free_credits}}</span>
</td>
</tr>
</table>
</div>
<div style="margin-top: 100px;">
<div class="d-flex justify-content-center">
<button id="buttonswitch" class="swtichbutton"
onclick="switchToAffiliated('{{userdetails.wait_for_institute_student_uuid}}', '{{userdetails.institute_email}}')">Switch
to Affiliated Student</button>
</div><br>
<p class="newText">You are a verified member</p>
<p class="newText">and entitled to mnf services at 50% student Discount!!!</p>
</div>
</div>
<script>
function getCookie(name) {
const cookieValue = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
return cookieValue ? cookieValue.pop() : '';
}
function downloadFile(url) {
return fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`Failed to download file: ${url}`);
}
return response.arrayBuffer();
});
}
function switchToAffiliated(student_uuid, institute_email) {
console.log(student_uuid);
var acesTok = localStorage.getItem("accessToken");
console.log(institute_email);
const formData = new FormData();
formData.append('email', institute_email);
console.log(formData);
var buttonswitch = document.getElementById('buttonswitch');
const csrftoken = getCookie('csrftoken');
fetch('/institute/check-institute-exists/', {
method: 'POST',
headers: {
'X-CSRFToken': csrftoken, // Include the CSRF token in the request headers
},
body: formData,
credentials: 'same-origin',
})
.then(response => response.json())
.then(data => {
console.log(data.userExists)
if (data.userExists) {
fetch('/institute/api/waiting-for-institute-student/' + student_uuid, {
method: 'GET',
headers: {
'Authorization': `Bearer ${acesTok}`
}
})
.then(response => response.json())
.then(data1 => {
console.log(data1);
console.log(data);
console.log(data1.kyc)
downloadFile(data1.kyc).then(kycFile => {
// Create a File object from the downloaded blob
const file = new File([kycFile], "kyc.png", { type: "image/png" }); // Adjust the filename and type as needed
var formData1 = new FormData();
formData1.append("name", data1.name);
formData1.append("user", data1.user);
formData1.append("email", data1.email);
formData1.append("student_institute_email", data1.student_institute_email);
formData1.append("affiliated_student_phone_number_country_code", data1.wait_for_institute_student_phone_number_country_code);
formData1.append("affiliated_student_phone_number", data1.wait_for_institute_student_phone_number);
formData1.append("affiliated_student_alternate_phone_number_country_code", data1.wait_for_institute_student_alternate_phone_number_country_code);
formData1.append("affiliated_student_alternate_phone_number", data1.wait_for_institute_student_alternate_phone_number);
formData1.append("institute", data.uuid);
formData1.append("kyc", file);
formData1.append("end_date", data1.end_date);
formData1.append("is_approved", "approved");
fetch('api/affiliated-student/', {
method: 'POST',
headers: {
'Authorization': `Bearer ${acesTok}`
},
body: formData1
})
.then(response => {
if (response.ok) {
fetch('/institute/api/waiting-for-institute-student/' + student_uuid, {
method: 'DELETE',
})
.then(response => {
if (response.ok) {
// Request succeeded, perform further operations if needed
console.log('Student deleted successfully.');
location.reload();
} else {
// Request failed, handle the error
console.error('Error:', response.status, response.statusText);
}
})
.catch(error => {
console.error('Error:', error);
});
}
})
.then(data => {
console.log(data);
})
.catch(error => console.error(error));
})
.catch(error => console.error(error));
});
}
else {
buttonswitch.style.backgroundColor = "#9A9A9A";
buttonswitch.style.boxShadow = "none";
alert("Your institute have not yet registered. Please tell your institute to register to access the MNF platform for free of cost!!");
}
})
.catch(error => {
console.error('Error:', error);
});
}
</script>
</body>
{%endblock%}