This commit is contained in:
SavaletDev
2022-05-24 22:22:54 +02:00
parent 175605ea6d
commit a2dd80277d
6 changed files with 363 additions and 111 deletions

BIN
assets/images/payement.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 515 KiB

View File

@@ -0,0 +1,261 @@
(function () {
"use strict";
async function postData(url = '', data = {}) {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
return response.json()
}
var form1
var form2
var form
/*---------------------------------------------------------------------
Fieldset
-----------------------------------------------------------------------*/
let currentTab =0;
const ActiveTab=(n)=>{
if(n==0){
document.getElementById("account").classList.add("active");
document.getElementById("account").classList.remove("done");
document.getElementById("personal").classList.remove("done");
document.getElementById("personal").classList.remove("active");
}
if(n==1){
form1 = {
"cycle": document.getElementById("cycle-fac").value,
"srv-name": document.getElementById("srv-name").value,
"db-sup": document.getElementById("db-sup").value,
"bkp-sup": document.getElementById("bkp-sup").value
}
document.getElementById("account").classList.add("done");
document.getElementById("personal").classList.add("active");
document.getElementById("personal").classList.remove("done");
document.getElementById("payment").classList.remove("active");
document.getElementById("payment").classList.remove("done");
document.getElementById("confirm").classList.remove("done");
document.getElementById("confirm").classList.remove("active");
}
if(n==2){
form2 = {
"first-name": document.getElementById("first-name").value,
"last-name": document.getElementById("last-name").value,
"mail": document.getElementById("mail").value,
"tel": document.getElementById("tel").value,
"address-1": document.getElementById("address-1").value,
"address-2": document.getElementById("address-2").value,
"city": document.getElementById("city").value,
"zip": document.getElementById("zip").value,
"country": document.getElementById("country").value,
"state": document.getElementById("state").value
}
document.getElementById("account").classList.add("done");
document.getElementById("personal").classList.add("done");
document.getElementById("payment").classList.add("active");
document.getElementById("payment").classList.remove("done");
document.getElementById("confirm").classList.remove("done");
document.getElementById("confirm").classList.remove("active");
}
if(n==3){
var form_array = []
form_array.push(form1)
form_array.push(form2)
form = {"order": form_array}
console.log(form)
postData('http://localhost:400/api/order-form', form).catch(function(error) {
console.log('[ERROR] ' + error.message);
location.href = "../errors/error500.html";
})
document.getElementById("account").classList.add("done");
document.getElementById("personal").classList.add("done");
document.getElementById("payment").classList.add("done");
document.getElementById("confirm").classList.add("active");
document.getElementById("confirm").classList.remove("done");
}
}
const showTab=(n)=>{
var x = document.getElementsByTagName("fieldset");
x[n].style.display = "block";
console.log(n);
ActiveTab(n);
}
const nextBtnFunction= (n) => {
var x = document.getElementsByTagName("fieldset");
x[currentTab].style.display = "none";
currentTab = currentTab + n;
showTab(currentTab);
}
const nextbtn= document.querySelectorAll('.next')
Array.from(nextbtn, (nbtn) => {
nbtn.addEventListener('click',function()
{
if (currentTab == 0) {
var ok = 0
var no = 0
if(document.getElementById('cycle-fac').value > 0) {
document.getElementById('cycle-fac').classList.remove('is-invalid')
document.getElementById('cycle-fac').classList.add('is-valid')
ok++
} else {
document.getElementById('cycle-fac').classList.remove('is-valid')
document.getElementById('cycle-fac').classList.add('is-invalid')
document.getElementById('cycle-fac').value = "0"
no++
}
if(document.getElementById('srv-name').value.length > 2) {
document.getElementById('srv-name').classList.remove('is-invalid')
document.getElementById('srv-name').classList.add('is-valid')
ok++
} else {
document.getElementById('srv-name').classList.remove('is-valid')
document.getElementById('srv-name').classList.add('is-invalid')
document.getElementById('srv-name').value = ""
no++
}
if(ok ==2 && no == 0) {
nextBtnFunction(1);
}
}
if (currentTab == 1) {
var ok = 0
var no = 0
if(document.getElementById("first-name").value.length > 2) {
document.getElementById("first-name").classList.remove('is-invalid')
document.getElementById("first-name").classList.add('is-valid')
ok++
} else {
document.getElementById("first-name").classList.remove('is-valid')
document.getElementById("first-name").classList.add('is-invalid')
document.getElementById("first-name").value = ""
no++
}
if(document.getElementById("last-name").value.length > 2) {
document.getElementById("last-name").classList.remove('is-invalid')
document.getElementById("last-name").classList.add('is-valid')
ok++
} else {
document.getElementById("last-name").classList.remove('is-valid')
document.getElementById("last-name").classList.add('is-invalid')
document.getElementById("last-name").value = ""
no++
}
if(document.getElementById("mail").value.length > 2) {
document.getElementById("mail").classList.remove('is-invalid')
document.getElementById("mail").classList.add('is-valid')
ok++
} else {
document.getElementById("mail").classList.remove('is-valid')
document.getElementById("mail").classList.add('is-invalid')
document.getElementById("mail").value = ""
no++
}
if(document.getElementById("tel").value.length > 2) {
document.getElementById("tel").classList.remove('is-invalid')
document.getElementById("tel").classList.add('is-valid')
ok++
} else {
document.getElementById("tel").classList.remove('is-valid')
document.getElementById("tel").classList.add('is-invalid')
document.getElementById("tel").value = ""
no++
}
if(document.getElementById("address-1").value.length > 2) {
document.getElementById("address-1").classList.remove('is-invalid')
document.getElementById("address-1").classList.add('is-valid')
ok++
} else {
document.getElementById("address-1").classList.remove('is-valid')
document.getElementById("address-1").classList.add('is-invalid')
document.getElementById("address-1").value = ""
no++
}
if(document.getElementById("city").value.length > 2) {
document.getElementById("city").classList.remove('is-invalid')
document.getElementById("city").classList.add('is-valid')
ok++
} else {
document.getElementById("city").classList.remove('is-valid')
document.getElementById("city").classList.add('is-invalid')
document.getElementById("city").value = ""
no++
}
if(document.getElementById("zip").value.length > 2) {
document.getElementById("zip").classList.remove('is-invalid')
document.getElementById("zip").classList.add('is-valid')
ok++
} else {
document.getElementById("zip").classList.remove('is-valid')
document.getElementById("zip").classList.add('is-invalid')
document.getElementById("zip").value = ""
no++
}
if(document.getElementById("country").value > 0) {
document.getElementById("country").classList.remove('is-invalid')
document.getElementById("country").classList.add('is-valid')
ok++
} else {
document.getElementById("country").classList.remove('is-valid')
document.getElementById("country").classList.add('is-invalid')
document.getElementById("country").value = ""
no++
}
if(document.getElementById("state").value.length > 2) {
document.getElementById("state").classList.remove('is-invalid')
document.getElementById("state").classList.add('is-valid')
ok++
} else {
document.getElementById("state").classList.remove('is-valid')
document.getElementById("state").classList.add('is-invalid')
document.getElementById("state").value = ""
no++
}
if(ok > 2 && no == 0) {
nextBtnFunction(1);
}
}
})
});
// previousbutton
const prebtn= document.querySelectorAll('.previous')
Array.from(prebtn, (pbtn) => {
pbtn.addEventListener('click',function()
{
nextBtnFunction(-1);
})
});
})()

View File

@@ -1,73 +0,0 @@
(function () {
"use strict";
/*---------------------------------------------------------------------
Fieldset
-----------------------------------------------------------------------*/
let currentTab =0;
const ActiveTab=(n)=>{
if(n==0){
document.getElementById("account").classList.add("active");
document.getElementById("account").classList.remove("done");
document.getElementById("personal").classList.remove("done");
document.getElementById("personal").classList.remove("active");
}
if(n==1){
document.getElementById("account").classList.add("done");
document.getElementById("personal").classList.add("active");
document.getElementById("personal").classList.remove("done");
document.getElementById("payment").classList.remove("active");
document.getElementById("payment").classList.remove("done");
document.getElementById("confirm").classList.remove("done");
document.getElementById("confirm").classList.remove("active");
}
if(n==2){
document.getElementById("account").classList.add("done");
document.getElementById("personal").classList.add("done");
document.getElementById("payment").classList.add("active");
document.getElementById("payment").classList.remove("done");
document.getElementById("confirm").classList.remove("done");
document.getElementById("confirm").classList.remove("active");
}
if(n==3){
document.getElementById("account").classList.add("done");
document.getElementById("personal").classList.add("done");
document.getElementById("payment").classList.add("done");
document.getElementById("confirm").classList.add("active");
document.getElementById("confirm").classList.remove("done");
}
}
const showTab=(n)=>{
var x = document.getElementsByTagName("fieldset");
x[n].style.display = "block";
console.log(n);
ActiveTab(n);
}
const nextBtnFunction= (n) => {
var x = document.getElementsByTagName("fieldset");
x[currentTab].style.display = "none";
currentTab = currentTab + n;
showTab(currentTab);
}
const nextbtn= document.querySelectorAll('.next')
Array.from(nextbtn, (nbtn) => {
nbtn.addEventListener('click',function()
{
nextBtnFunction(1);
})
});
// previousbutton
const prebtn= document.querySelectorAll('.previous')
Array.from(prebtn, (pbtn) => {
pbtn.addEventListener('click',function()
{
nextBtnFunction(-1);
})
});
})()

View File

@@ -1095,8 +1095,8 @@
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Cycle de facturation *</label>
<select class="form-select mb-3 shadow-none">
<option selected="">Choisissez un cycle de facturation</option>
<select id="cycle-fac" class="form-select mb-3 shadow-none">
<option selected="" value="0">Choisissez un cycle de facturation</option>
<option value="1">Mensuel</option>
<option value="2">Semi-annuel (-20%)</option>
<option value="3">Annuel (-35%)</option>
@@ -1106,13 +1106,13 @@
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Nom du serveur *</label>
<input type="text" class="form-control" name="uname" placeholder="Nom" />
<input id="srv-name" type="text" class="form-control" name="uname" placeholder="Nom" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Bases de données suplémentaire</label>
<select class="form-select mb-3 shadow-none">
<select id="db-sup" class="form-select mb-3 shadow-none">
<option selected="">Bases de données suplémentaire</option>
<option value="1">5 Bases de données suplémentaire (+2€)</option>
<option value="2">10 Bases de données suplémentaire (+4€)</option>
@@ -1123,7 +1123,7 @@
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Backups suplémentaire</label>
<select class="form-select mb-3 shadow-none">
<select id="bkp-sup" class="form-select mb-3 shadow-none">
<option selected="">Backups suplémentaire</option>
<option value="1">5 Backups suplémentaire (+4€)</option>
<option value="2">10 Backups suplémentaire (+8€)</option>
@@ -1149,25 +1149,25 @@
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Prénom *</label>
<input type="text" class="form-control" name="fname" placeholder="Prénom" />
<input id="first-name" type="text" class="form-control" name="fname" placeholder="Prénom" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Nom *</label>
<input type="text" class="form-control" name="lname" placeholder="Nom" />
<input id="last-name" type="text" class="form-control" name="lname" placeholder="Nom" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Adresse courriel *</label>
<input type="text" class="form-control" name="phno" placeholder="Adresse courriel" />
<input id="mail" type="text" class="form-control" name="phno" placeholder="Adresse courriel" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Téléphone *</label>
<input type="text" class="form-control" name="phno_2" placeholder="Téléphone" />
<input id="tel" type="text" class="form-control" name="phno_2" placeholder="Téléphone" />
</div>
</div>
<div class="col-7">
@@ -1176,26 +1176,32 @@
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Adresse *</label>
<input type="text" class="form-control" name="phno_2" placeholder="Adresse" />
<input id="address-1" type="text" class="form-control" name="phno_2" placeholder="Adresse" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Adresse 2 (Optionnel)</label>
<input type="text" class="form-control" name="phno_2" placeholder="Adresse 2 (Optionnel)" />
<input id="address-2" type="text" class="form-control" name="phno_2" placeholder="Adresse 2 (Optionnel)" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Ville *</label>
<input type="text" class="form-control" name="phno_2" placeholder="Ville" />
<input id="city" type="text" class="form-control" name="phno_2" placeholder="Ville" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Code postal *</label>
<input id="zip" type="text" class="form-control" name="phno_2" placeholder="Code postal" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Pays</label>
<select class="form-select mb-3 shadow-none">
<option selected="">--</option>
<select id="country" class="form-select mb-3 shadow-none">
<option selected="" value="0">--</option>
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
@@ -1397,13 +1403,7 @@
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Province *</label>
<input type="text" class="form-control" name="phno_2" placeholder="Province" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Code postal *</label>
<input type="text" class="form-control" name="phno_2" placeholder="Code postal" />
<input id="state" type="text" class="form-control" name="phno_2" placeholder="Province" />
</div>
</div>
</div>
@@ -1413,22 +1413,7 @@
</fieldset>
<fieldset>
<div class="form-card text-start">
<div class="row">
<div class="col-7">
<h3 class="mb-4">Image Upload:</h3>
</div>
<div class="col-5">
<h2 class="steps">Etape 3 - 4</h2>
</div>
</div>
<div class="form-group">
<label class="form-label">Upload Your Photo:</label>
<input type="file" class="form-control" name="pic" accept="image/*">
</div>
<div class="form-group">
<label class="form-label">Upload Signature Photo:</label>
<input type="file" class="form-control" name="pic-2" accept="image/*">
</div>
<image src="../../assets/images/payement.gif"></image>
</div>
<button type="button" name="next" class="btn btn-primary next action-button float-end" value="Submit" >Valider</button>
<button type="button" name="previous" class="btn btn-dark previous action-button-previous float-end me-1" value="Previous" >Précedent</button>
@@ -1710,7 +1695,7 @@
<script src="../../assets/js/plugins/slider-tabs.js"></script>
<!-- Form Wizard Script -->
<script src="../../assets/js/plugins/form-wizard.js"></script>
<script src="../../assets/js/pages/order-form.js"></script>
<!-- AOS Animation Plugin-->

View File

@@ -577,3 +577,77 @@
[2022-05-22 18:51:50] [DEBUG] GET from : undefined
[2022-05-22 18:53:9] [DEBUG] GET from : undefined
[2022-05-22 18:54:15] [DEBUG] GET from : undefined
[2022-05-24 17:40:47] [DEBUG] GET from : undefined
[2022-05-24 17:40:51] [DEBUG] GET from : undefined
[2022-05-24 17:40:58] [DEBUG] GET from : undefined
[2022-05-24 17:48:37] [DEBUG] GET from : undefined
[2022-05-24 17:48:58] [DEBUG] GET from : undefined
[2022-05-24 17:50:12] [DEBUG] GET from : undefined
[2022-05-24 17:52:4] [DEBUG] GET from : undefined
[2022-05-24 17:55:12] [DEBUG] GET from : undefined
[2022-05-24 18:2:13] [DEBUG] GET from : undefined
[2022-05-24 18:2:15] [DEBUG] GET from : undefined
[2022-05-24 18:2:25] [DEBUG] GET from : undefined
[2022-05-24 18:3:7] [DEBUG] GET from : undefined
[2022-05-24 18:3:44] [DEBUG] GET from : undefined
[2022-05-24 18:4:50] [DEBUG] GET from : undefined
[2022-05-24 18:8:2] [DEBUG] GET from : undefined
[2022-05-24 18:8:23] [DEBUG] GET from : undefined
[2022-05-24 18:8:35] [DEBUG] GET from : undefined
[2022-05-24 18:34:51] [DEBUG] GET from : undefined
[2022-05-24 18:35:10] [DEBUG] GET from : undefined
[2022-05-24 18:35:20] [DEBUG] GET from : undefined
[2022-05-24 18:35:39] [DEBUG] GET from : undefined
[2022-05-24 18:37:18] [DEBUG] GET from : undefined
[2022-05-24 18:37:35] [DEBUG] GET from : undefined
[2022-05-24 18:37:48] [DEBUG] GET from : undefined
[2022-05-24 18:38:15] [DEBUG] GET from : undefined
[2022-05-24 18:46:42] [DEBUG] GET from : undefined
[2022-05-24 18:58:16] [DEBUG] GET from : undefined
[2022-05-24 18:59:18] [DEBUG] GET from : undefined
[2022-05-24 19:0:27] [DEBUG] GET from : undefined
[2022-05-24 19:5:15] [DEBUG] GET from : undefined
[2022-05-24 19:7:40] [DEBUG] GET from : undefined
[2022-05-24 19:8:5] [DEBUG] GET from : undefined
[2022-05-24 19:8:14] [DEBUG] GET from : undefined
[2022-05-24 19:10:51] [DEBUG] GET from : undefined
[2022-05-24 19:10:53] [DEBUG] GET from : undefined
[2022-05-24 19:11:13] [DEBUG] GET from : undefined
[2022-05-24 19:11:36] [DEBUG] GET from : undefined
[2022-05-24 19:14:29] [DEBUG] GET from : undefined
[2022-05-24 19:14:49] [DEBUG] GET from : undefined
[2022-05-24 19:16:39] [DEBUG] GET from : undefined
[2022-05-24 19:27:16] [DEBUG] GET from : 127.0.0.1
[2022-05-24 19:27:20] [DEBUG] GET from : 127.0.0.1
[2022-05-24 19:27:35] [DEBUG] GET from : undefined
[2022-05-24 19:27:55] [DEBUG] GET from : undefined
[2022-05-24 19:28:42] [DEBUG] GET from : undefined
[2022-05-24 19:29:10] [DEBUG] GET from : undefined
[2022-05-24 19:29:19] [DEBUG] GET from : 127.0.0.1
[2022-05-24 19:29:30] [DEBUG] GET from : undefined
[2022-05-24 19:31:44] [DEBUG] GET from : undefined
[2022-05-24 19:32:47] [DEBUG] GET from : undefined
[2022-05-24 19:35:32] [DEBUG] GET from : undefined
[2022-05-24 19:39:51] [DEBUG] GET from : undefined
[2022-05-24 19:40:45] [DEBUG] GET from : undefined
[2022-05-24 19:41:2] [DEBUG] GET from : undefined
[2022-05-24 19:41:25] [DEBUG] GET from : undefined
[2022-05-24 19:42:21] [DEBUG] GET from : undefined
[2022-05-24 19:46:43] [DEBUG] GET from : undefined
[2022-05-24 19:47:22] [DEBUG] GET from : undefined
[2022-05-24 19:47:57] [DEBUG] GET from : undefined
[2022-05-24 19:49:28] [DEBUG] GET from : undefined
[2022-05-24 19:49:43] [DEBUG] GET from : undefined
[2022-05-24 19:50:5] [DEBUG] GET from : undefined
[2022-05-24 19:51:1] [DEBUG] GET from : undefined
[2022-05-24 20:0:40] [DEBUG] GET from : undefined
[2022-05-24 20:1:2] [DEBUG] GET from : undefined
[2022-05-24 20:1:34] [DEBUG] GET from : undefined
[2022-05-24 20:1:52] [DEBUG] GET from : undefined
[2022-05-24 20:2:24] [DEBUG] GET from : undefined
[2022-05-24 20:3:7] [DEBUG] GET from : undefined
[2022-05-24 20:3:38] [DEBUG] GET from : undefined
[2022-05-24 20:4:47] [DEBUG] GET from : undefined
[2022-05-24 20:44:33] [DEBUG] GET from : undefined
[2022-05-24 20:45:2] [DEBUG] GET from : undefined
[2022-05-24 20:46:38] [DEBUG] GET from : undefined

View File

@@ -76,6 +76,11 @@ app.post('/api/create_ptero_services', jsonParser, function (req, res) {
.catch(err => console.error(err)).then(() => {res.send("OK !")})
})
app.post('/api/order-form', jsonParser, function (req, res) {
console.log(req.body)
res.json({"response": "OK"})
})
app.get('/', (req, res) => {
ipInfo = getIP(req);
logger()