onja
/
bodacc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Refactored main.js file to separate functions for initializing column choices and submitting form, and added event listeners for click and submit events

node16
Onja 1 year ago
parent
cbcf011640
commit
4d44483917
3 changed files with 177 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 109
      src/assets/js/main.js
  2. 51
      src/assets/sass/main.scss
  3. 39
      src/views/pages/index.hbs

109
src/assets/js/main.js
View File

@ -1,3 +1,112 @@
import $ from 'jquery';
import 'bootstrap';
import toastr from 'toastr';
/***********************************************
* MAIN JS FILE
***********************************************/
const initColumnsChoices = () => {
const $choicesList = $('#form__choices');
const $selectedList = $('#form__selected');
$(document).on('click', '#form__choices .column-choice', function(e) {
e.preventDefault();
const $this = $(this);
const $input = $this.find('.column-choice__input');
$input.prop('checked', true).attr('checked', 'checked');
$this.detach().appendTo($selectedList);
});
$(document).on('click', '#form__selected .column-choice', function(e) {
e.preventDefault();
const $this = $(this);
const $input = $this.find('.column-choice__input');
$input.prop('checked', false).removeAttr('checked');
$this.detach().appendTo($choicesList);
});
};
const sendRequest = (url, data) => {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
type: 'POST',
data: data,
success: function(data, textStatus, jqXHR) {
// Créez un lien de téléchargement et définissez ses attributs
const blob = new Blob([data], { type: 'text/csv' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'fichier.csv'; // Nom du fichier
document.body.appendChild(a);
// Cliquez sur le lien pour déclencher le téléchargement
a.click();
// Supprimez le lien du DOM
window.URL.revokeObjectURL(url);
resolve({ message: 'Fichier généré' });
},
error: function(jqXHR, textStatus, errorThrown) {
reject( new Error('Erreur lors de la requête Ajax :', errorThrown) );
}
});
});
};
const initSubmitForm = () => {
const $form = $('#form-download');
const $selectedList = $('#form__selected');
$form.on('submit', function(e) {
e.preventDefault();
const $this = $(this);
const $inputs = $selectedList.find('.column-choice__input');
const $urlInput = $this.find('#form__url');
const $submitBtn = $this.find('#form__submit');
const $spinner = $this.find('#form__spinner');
toastr.remove();
$submitBtn.prop('disabled', true);
$spinner.removeClass('d-none');
if ( $inputs.length === 0 ) {
toastr.error('Veuillez sélectionner au moins une colonne');
$submitBtn.prop('disabled', false);
$spinner.addClass('d-none');
return;
}
const data = {
url: $urlInput.val(),
columns: []
};
// Add selected columns to data
$inputs.each(function() {
const $this = $(this);
data.columns.push($this.val());
});
sendRequest($form.attr('action'), data)
.then((response) => {
toastr.success(response.message);
$submitBtn.prop('disabled', false);
$spinner.addClass('d-none');
})
.catch((error) => {
toastr.error(error.message);
$submitBtn.prop('disabled', false);
$spinner.addClass('d-none');
});
});
}
$(document).ready(function() {
initColumnsChoices();
initSubmitForm();
});

51
src/assets/sass/main.scss
View File

@ -3,3 +3,54 @@
@import "toastr";
// --------------------------------------------------------
.column-choices {
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
&__title {
text-align: center;
text-transform: uppercase;
font-size: 1.25rem;
padding: 0.5rem;
background-color: #133172;
color: #fff;
display: block;
width: 100%;
border-radius: 0.25rem;
margin-bottom: 0.5rem;
&--green {
background-color: #1e7e34;
}
}
&__list {
list-style-type: none;
padding: 0px;
margin: 0px;
}
}
.column-choice {
display: block;
width: 100%;
padding: 0.375rem 0.5rem;
border: 1px solid #ddd;
border-radius: 0.25rem;
margin-bottom: 0.5rem;
cursor: pointer;
user-select: none;
transition: background 0.25s ease-in-out;
word-wrap: break-word;
word-break: break-all;
&:hover {
background: rgba(black, 0.075);
}
&__input {
display: none;
}
}

39
src/views/pages/index.hbs
View File

@ -6,20 +6,20 @@
<div class="container-fluid">
<div class="row">
<div class="col-12">
<form method="post" action="">
<form method="post" action="/" id="form-download">
<div class="form-group">
<label for="name">URL</label>
<textarea class="form-control" id="form__url" name="url" rows="3">{{form.url.value}}</textarea>
<textarea class="form-control" id="form__url" name="url" rows="5">{{form.url.value}}</textarea>
</div>
<div class="row my-5">
<div class="col-12 col-md-5">
<div class="form-group">
<label for="name">Colonnes disponibles</label>
<ul id="form__choices">
<div class="col-12 col-md-6">
<div class="form-group form__column column-choices">
<label for="name" class="column-choices__title">Colonnes disponibles</label>
<ul id="form__choices" class="column-choices__list">
{{#each form.columns.options}}
<li class="form__choice column-choice" data-value="{{this}}">
<label class="column-choice__inner">
<input type="checkbox" name="columns[]" value="{{this}}" class="column-choice__input" checked="checked" />
<input type="checkbox" name="columns[]" value="{{this}}" class="column-choice__input" />
<span class="column-choice__text">{{this}}</span>
</label>
</li>
@ -27,27 +27,22 @@
</ul>
</div>
</div>
<div class="col-12 col-md-2">
<div class="row">
<div class="col-6 col-md-12 my-2 d-grid">
<button id="form__add" type="button" class="btn btn-success btn-block">></button>
</div>
<div class="col-6 col-md-12 my-2 d-grid">
<button id="form__remove" type="button" class="btn btn-danger btn-block"><</button>
</div>
</div>
</div>
<div class="col-12 col-md-5">
<div class="form-group">
<label for="name">Colonnes exportées</label>
<ul id="form__selected">
<div class="col-12 col-md-6">
<div class="form-group form__column column-choices">
<label for="name" class="column-choices__title column-choices__title--green">Colonnes exportées</label>
<ul id="form__selected" class="column-choices__list">
</ul>
</div>
</div>
</div>
<hr />
<div class="d-grid gap-2 col-12 col-md-4 mx-auto">
<div class="d-flex justify-content-center">
<div class="spinner-border text-primary d-none" role="status" id="form__spinner" style="">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-grid gap-2 col-12 col-md-4 mx-auto my-3">
<button class="btn btn-primary" id="form__submit" type="submit">Télécharger</button>
</div>
</form>

Write Preview
Loading…
Cancel
Save