PAYDAY/PayDayCSharpFrontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Форма третья секция

Browse Source
This commit is contained in:
Vsevo;od
2023-07-29 23:07:15 +03:00
parent 202ba42bb5
commit 1afcb17845
12 changed files with 492 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
PaydayFrontend/wwwroot/css/style.css
View File

File diff suppressed because one or more lines are too long

2
PaydayFrontend/wwwroot/css/style.css.map
View File

File diff suppressed because one or more lines are too long

52
PaydayFrontend/wwwroot/img/form/spinner.svg Normal file
View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="38px" height="38px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(30 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(60 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(90 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(120 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(150 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(210 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(240 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(270 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(300 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(330 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</rect>
</g>
<!-- [ldio] generated by https://loading.io/ --></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

5
PaydayFrontend/wwwroot/img/icons/arrow.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="maki:arrow">
<path id="Vector" d="M21.9096 41.5095C21.297 42.1219 20.4662 42.466 19.6 42.466C18.7338 42.466 17.9031 42.1219 17.2905 41.5095L2.5905 26.8095C1.9781 26.197 1.63407 25.3662 1.63407 24.5C1.63407 23.6338 1.9781 22.8031 2.5905 22.1905L17.2905 7.49047C17.9066 6.89542 18.7318 6.56616 19.5883 6.57361C20.4448 6.58105 21.2641 6.9246 21.8698 7.53026C22.4754 8.13593 22.819 8.95526 22.8264 9.81176C22.8339 10.6683 22.5046 11.4934 21.9096 12.1095L13.0667 21.2333L44.1 21.2333C44.9664 21.2333 45.7973 21.5775 46.4099 22.1901C47.0225 22.8027 47.3667 23.6336 47.3667 24.5C47.3667 25.3664 47.0225 26.1973 46.4099 26.8099C45.7973 27.4225 44.9664 27.7667 44.1 27.7667L13.0667 27.7667L21.9096 36.8905C22.522 37.5031 22.866 38.3338 22.866 39.2C22.866 40.0662 22.522 40.8969 21.9096 41.5095Z" fill="black"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 917 B

BIN
PaydayFrontend/wwwroot/img/logo/esia.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

9
PaydayFrontend/wwwroot/js/dist/script.dev.js vendored Normal file
View File

@ -0,0 +1,9 @@
"use strict";
var menuActive = document.querySelector('.menu');
var hamburgerActive = document.querySelector('.hamburger');
console.log(menuActive);
hamburgerActive.addEventListener('click', function (el) {
el.currentTarget.classList.toggle('hamburger_active');
menuActive.classList.toggle('menu_active');
});

116
PaydayFrontend/wwwroot/js/modules/forms.js Normal file
View File

@ -0,0 +1,116 @@
import {eventModalClose, eventModalOpen} from './modal';
function forms(formSelector) {
// Forms
const forms = document.querySelectorAll(formSelector);
const message = {
loading: 'img/form/spinner.svg',
success: 'Спасибо! Сокро мы с вами свяжемся',
failure: 'Что-то пошло не так...'
};
forms.forEach(form => {
console.log(form);
bindpostData(form);
});
// const getResurses = async (url) => {
// const res = await fetch(url);
// if (!res.ok) {
// new Error(`Could not fetch ${url}, status: ${res.status}`);
// }
// return await res.json();
// };
function bindpostData(form) {
form.addEventListener('submit', (el) => {
el.preventDefault();
const statusMessage = document.createElement('img');
statusMessage.src = message.loading;
// const request = new XMLHttpRequest();
// request.open('POST', 'server.php');
// request.setRequestHeader('Content-type', 'application/json');
const formData = new FormData(form);
// request.send(json);
statusMessage.style.cssText = `
display: block;
margin: 0 auto;
`
form.insertAdjacentElement('afterend', statusMessage);
const json = JSON.stringify(Object.fromEntries(formData.entries()));
postData('http://localhost:3000/requests', json)
.then(data => {
console.log(data);
showTanksModal(message.success);
form.reset();
statusMessage.remove();
}).catch(() => {
showTanksModal(message.failure);
}).finally(() => {
form.reset();
});
// request.addEventListener('load', () => {
// if (request.status === 200) {
// console.log(request.response);
// showTanksModal(message.success);
// form.reset();
// statusMessage.remove();
// }
// else {
// showTanksModal(message.failure);
// }
// });
});
function showTanksModal(message) {
const previosModalDialog = document.querySelector('.modal__dialog');
previosModalDialog.classList.add('hide');
eventModalOpen('.modal');
const thanksModal = document.createElement('div');
thanksModal.classList.add('modal__dialog');
thanksModal.innerHTML = `
<div class="modal__content">
<div class="modal__close" data-close>×</div>
<div class="modal__title">${message}</div>
</div>
`;
document.querySelector('.modal').append(thanksModal);
setTimeout(() => {
thanksModal.remove();
previosModalDialog.classList.add('show');
previosModalDialog.classList.remove('hide');
modalClose();
}, 4000);
}
}
}
export default forms;

63
PaydayFrontend/wwwroot/js/modules/modal.js Normal file
View File

@ -0,0 +1,63 @@
function eventModalOpen (modalSelector) {
const modal = document.querySelector(modalSelector);
modal.classList.add('show');
modal.classList.remove('hide');
document.body.style.overflow = 'hidden';
}
function eventModalClose(modalSelector) {
const modal = document.querySelector(modalSelector);
modal.classList.add('hide');
modal.classList.remove('show');
document.body.style.overflow = '';
}
function modal(triggerSelector, modalSelector) {
//Modal
const modalOpenForm = document.querySelectorAll(triggerSelector),
modal = document.querySelector(modalSelector);
console.log(modal, modalOpenForm);
function modalOpen(event) {
event.forEach(elem => {
elem.addEventListener('click', () => {
eventModalOpen(modalSelector);
});
})
}
function modalClose() {
modal.addEventListener('click', (e) => {
if (e.target === modal || e.target.getAttribute('data-close') == '') {
eventModalClose(modalSelector);
}
});
document.addEventListener('keydown', (e) => {
if (e.code === 'Escape' && modal.classList.contains('show')) {
eventModalClose(modalSelector);
}
});
}
function showModalByScroll() {
if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight - 1) {
console.log('da');
eventModalOpen(modalSelector);
window.removeEventListener('scroll', showModalByScroll);
}
}
console.log(window.scrollY);
window.addEventListener('scroll', showModalByScroll);
modalOpen(modalOpenForm);
modalClose();
}

189
PaydayFrontend/wwwroot/js/script.js Normal file
View File

@ -0,0 +1,189 @@
const menuActive = document.querySelector('.menu');
const hamburgerActive = document.querySelector('.menu_hamburger');
console.log(menuActive);
hamburgerActive.addEventListener('click', el => {
el.currentTarget.classList.toggle('hamburger_active');
menuActive.classList.toggle('menu_active');
})
window.addEventListener('DOMContentLoaded', () => {
function eventModalOpen () {
const modal = document.querySelector('.my_modal');
modal.classList.add('show');
modal.classList.remove('hide');
document.body.style.overflow = 'hidden';
}
function eventModalClose() {
const modal = document.querySelector('.my_modal');
modal.classList.add('hide');
modal.classList.remove('show');
document.body.style.overflow = '';
}
function modal() {
//Modal
const modalOpenForm = document.querySelectorAll('[data-modal]'),
modal = document.querySelector(['.my_modal']);
console.log(modal, modalOpenForm);
function modalOpen(event) {
event.forEach(elem => {
elem.addEventListener('click', () => {
eventModalOpen('.my_modal');
});
})
}
function modalClose() {
modal.addEventListener('click', (e) => {
if (e.target === modal || e.target.getAttribute('data-close') == '') {
eventModalClose('.my_modal');
}
});
document.addEventListener('keydown', (e) => {
if (e.code === 'Escape' && modal.classList.contains('show')) {
eventModalClose('.my_modal');
}
});
}
function showModalByScroll() {
if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight - 1) {
console.log('da');
eventModalOpen('.my_modal');
window.removeEventListener('scroll', showModalByScroll);
}
}
console.log(window.scrollY);
window.addEventListener('scroll', showModalByScroll);
modalOpen(modalOpenForm);
modalClose();
}
function forms() {
// Forms
const forms = document.querySelectorAll("form");
const message = {
loading: 'img/form/spinner.svg',
success: 'Спасибо! Сокро мы с вами свяжемся',
failure: 'Что-то пошло не так...'
};
forms.forEach(form => {
console.log(form);
bindpostData(form);
});
// const getResurses = async (url) => {
// const res = await fetch(url);
// if (!res.ok) {
// new Error(`Could not fetch ${url}, status: ${res.status}`);
// }
// return await res.json();
// };
function bindpostData(form) {
form.addEventListener('submit', (el) => {
el.preventDefault();
const statusMessage = document.createElement('img');
statusMessage.src = message.loading;
// const request = new XMLHttpRequest();
// request.open('POST', 'server.php');
// request.setRequestHeader('Content-type', 'application/json');
const formData = new FormData(form);
// request.send(json);
statusMessage.style.cssText = `
display: block;
margin: 0 auto;
`
form.insertAdjacentElement('afterend', statusMessage);
const json = JSON.stringify(Object.fromEntries(formData.entries()));
postData('http://localhost:3000/requests', json)
.then(data => {
console.log(data);
showTanksModal(message.success);
form.reset();
statusMessage.remove();
}).catch(() => {
showTanksModal(message.failure);
}).finally(() => {
form.reset();
});
// request.addEventListener('load', () => {
// if (request.status === 200) {
// console.log(request.response);
// showTanksModal(message.success);
// form.reset();
// statusMessage.remove();
// }
// else {
// showTanksModal(message.failure);
// }
// });
});
function showTanksModal(message) {
const previosModalDialog = document.querySelector('.my_modal__dialog');
previosModalDialog.classList.add('hide');
eventModalOpen('.my_modal');
const thanksModal = document.createElement('div');
thanksModal.classList.add('my_modal__dialog');
thanksModal.innerHTML = `
<div class="my_modal__content">
<div class="my_modal__close" data-close>×</div>
<div class="my_modal__title">${message}</div>
</div>
`;
document.querySelector('.my_modal').append(thanksModal);
setTimeout(() => {
thanksModal.remove();
previosModalDialog.classList.add('show');
previosModalDialog.classList.remove('hide');
modalClose();
}, 4000);
}
}
}
forms();
modal();
});