From a8fd9dfd5f85febe32bb3cd15abb560c31850564 Mon Sep 17 00:00:00 2001
From: nicrausaz <n.crausaz99@gmail.com>
Date: Wed, 10 Oct 2018 13:48:13 +0200
Subject: [PATCH] form almost done
---
canapEPFL/form.php | 197 +++++++++++++++---------------
canapEPFL/script.js | 32 ++---
canapEPFL/templates/errorText.php | 24 ++--
3 files changed, 125 insertions(+), 128 deletions(-)
diff --git a/canapEPFL/form.php b/canapEPFL/form.php
index 548fa64..709c962 100644
--- a/canapEPFL/form.php
+++ b/canapEPFL/form.php
@@ -161,6 +161,7 @@
</div>
</div>
<!-- / Infos perso -->
+ <!-- Représentants -->
<h5>2.2 Représentants légaux</h5>
<div class="form-group">
<label>Avez vous plus de 18 ans ?*:</label>
@@ -210,7 +211,9 @@
<label for="telRep2">Téléphone</label>
<input type="text" name="telRep2" id="telRep2" class="form-control" placeholder="+41 79 123 45 67" value="<?php echo $_SESSION['postedForm']['telRep2'] != '' ? $_SESSION['postedForm']['telRep2'] : ''; ?>"/>
</div>
+ <!-- Représentants -->
<hr>
+ <!-- Activités pro -->
<h3>3. Activités</h3>
<h5>3.1 Scolarité</h5>
<table id="scolaire">
@@ -336,17 +339,99 @@
<input type="text" name="dejaCandAnnee" id="dejaCandAnneeInput" class="form-control" placeholder="Année de candidature" value="<?php echo $_SESSION['postedForm']['dejaCandAnnee'] != '' ? $_SESSION['postedForm']['dejaCandAnnee'] : ''; ?>" maxlength="4"/>
<small id="dejaCandError" class="form-text text-muted"></small>
</div>
-
+ <!-- / Activités pro -->
<hr>
<h3>4. Annexes</h3>
<small>Merci de joindre tous les fichiers demandés, en respectant les formats (si les formats ne sont pas respectés, les fichiers ne seront pas pris en compte).</small>
- <div class="form-group" id="files">
- <!-- <label for="photo">Photo passeport <strong>couleur:*</strong></label>
- <input type="file" name="photo" class="upload-input" id="photo" />
- <label for="photo" class="btn btn-secondary btn-sm icon-right">
- Choisir...
- </label>
- <div class="upload-preview">No file</div>-->
+ <br>
+ <small>Formats autorisés: <b>PDF, JPG, JPEG, PNG</b></small>
+
+ <div class="form-group mt-3" id="files">
+ <div class="form-group">
+ <label for="photo">Photo passeport <strong>couleur: *</strong></label>
+ <input type="file" name="photo" class="upload-input" id="photo" onchange="changeTitleFile(this)"/>
+ <br>
+ <label for="photo" class="btn btn-secondary btn-sm icon-right">
+ Choisir...
+ </label>
+ <br>
+ <small class="error" class="form-text text-muted"></small>
+ </div>
+
+ <div class="form-group">
+ <label for="idCard">Copie carte d'indentité / passeport: *</label>
+ <input type="file" name="idCard" class="upload-input" id="idCard" onchange="changeTitleFile(this)"/>
+ <br>
+ <label for="idCard" class="btn btn-secondary btn-sm icon-right">
+ Choisir...
+ </label>
+ <br>
+ <small class="error" class="form-text text-muted"></small>
+ </div>
+
+ <div class="form-group">
+ <label for="cv">Curriculum Vitae: *</label>
+ <input type="file" name="cv" class="upload-input" id="cv" onchange="changeTitleFile(this)"/>
+ <br>
+ <label for="cv" class="btn btn-secondary btn-sm icon-right">
+ Choisir...
+ </label>
+ <br>
+ <small class="error" class="form-text text-muted"></small>
+ </div>
+
+ <div class="form-group">
+ <label for="lettre">Lettre de motivation: *</label>
+ <input type="file" name="lettre" class="upload-input" id="lettre" onchange="changeTitleFile(this)"/>
+ <br>
+ <label for="lettre" class="btn btn-secondary btn-sm icon-right">
+ Choisir...
+ </label>
+ <br>
+ <small class="error" class="form-text text-muted"></small>
+ </div>
+
+ <div class="form-group" id="polyOnly">
+ <label for="gimch">Attestation de tests d'aptitudes GIM-CH (polymécanicien):</label>
+ <input type="file" name="gimch" class="upload-input" id="gimch" onchange="changeTitleFile(this)"/>
+ <br>
+ <label for="gimch" class="btn btn-secondary btn-sm icon-right">
+ Choisir...
+ </label>
+ <br>
+ <small class="error" class="form-text text-muted"></small>
+ </div>
+
+ <div class="form-group" id="griTest">
+ <label for="griTestInput">Attestation de tests d'aptitudes GRI (informaticien):</label>
+ <input type="file" name="griTestInput" class="upload-input" id="griTestInput" onchange="changeTitleFile(this)"/>
+ <br>
+ <label for="griTestInput" class="btn btn-secondary btn-sm icon-right">
+ Choisir...
+ </label>
+ <br>
+ <small class="error" class="form-text text-muted"></small>
+ </div>
+
+
+ <div class="form-group">
+ <table id="newCertifZone">
+ <tr>
+ <td>
+ <label for="certifs1">Certificats, diplômes et bulletins de notes des derniers 3-4 semestres: *</label>
+ <input type="file" name="certifs1" class="upload-input" id="certifs1" onchange="changeTitleFile(this)"/>
+ <br>
+ <label for="certifs1" class="btn btn-secondary btn-sm icon-right">
+ Choisir...
+ </label>
+ <br>
+ <small class="error" class="form-text text-muted"></small>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <button type="button" class="btn btn-primary btn-sm mt-3 mb-2" id="addInputFile">Ajouter une annexe</button>
+
</div>
<div class="form-group">
<div class="custom-control custom-checkbox" id="condDiv">
@@ -356,102 +441,16 @@
</div>
<button type="submit" class="btn btn-primary btn-block" type="submit">Terminer</button>
- </div> <!-- end div all -->
+ </div>
+ <!-- / div all -->
</form>
</main>
<script> lieu='<?php echo $_SESSION['postedForm']['lieu'] ;?>';</script>
<?php
if ($_SESSION['formError']) {
- echo "<script>showOnFormReturn(lieu);</script>";
+ echo "<script>showOnFormReturn(lieu);</script>";
}
- // require_once('templates/footer.php');
+ require_once('templates/footer.php');
?>
- <!-- use this for errors messages
- <small id="awesome-input-help" class="form-text text-muted">
- Help text about the text field.
- </small>
- -->
- <fieldset id="files">
- <legend><span class="number">4</span> Annexes </legend>
-
- <label for="photo">Photo passeport <strong>couleur:*</strong></label>
- <div class="tooltip">
- <label class="file" title="" id="photoLabel">
- <input type="file" name="photo" id="photo" onchange="changeTitleFile(this)" data-required/>
- </label>
- <span class="tooltiptext tooltip-right">Formats autorisés: pdf-jpg-jpeg-png</span>
- <p></p>
- <section id="formatErrorZone1"></section>
- </div>
- <label for="idCard">Copie carte d'indentité / passeport:*</label>
- <div class="tooltip">
- <label class="file" title="" id="idCardLabel">
- <input type="file" name="idCard" id="idCard" onchange="changeTitleFile(this)" data-required/>
- </label>
- <span class="tooltiptext tooltip-right">Formats autorisés: pdf-jpg-jpeg-png</span>
- <p></p>
- <section id="formatErrorZone2"></section>
- </div>
- <label for="cv">Curriculum Vitae:*</label>
- <div class="tooltip">
- <label class="file" title="" id="CVLabel" >
- <input type="file" name="cv" id="cv" onchange="changeTitleFile(this)" data-required/>
- </label>
- <span class="tooltiptext tooltip-right">Formats autorisés: pdf-jpg-jpeg-png</span>
- <p></p>
- <section id="formatErrorZone3"></section>
- </div>
- <label for="lettre">Lettre de motivation:*</label>
- <div class="tooltip">
- <label class="file" title="" id="lettreLabel" >
- <input type="file" name="lettre" id="lettre" onchange="changeTitleFile(this)" data-required/>
- </label>
- <span class="tooltiptext tooltip-right">Formats autorisés: pdf-jpg-jpeg-png</span>
- <p></p>
- <section id="formatErrorZone4"></section>
- </div>
-
- <label for="certifs1">Certificats, diplômes et bulletins de notes des derniers 3-4 semestres:</label>
- <table id="newCertifZone">
- <tr><td>
- <div class="tooltip">
- <label class="file" title="" id="certifLabel1">
- <input type="file" name="certifs1" id="certifs1" onchange="changeTitleFile(this)" />
- </label>
- <span class="tooltiptext tooltip-right">Formats autorisés: pdf-jpg-jpeg-png</span>
- <p></p>
- <section id="formatErrorZone7"></section>
- </div>
- </td></tr>
- </table>
- <button type ="button" id="addInputFile" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent buttonRight">
- Ajouter une annexe
- </button>
- <div id="polyOnly">
- <label for="gimch">Attestation de tests d'aptitudes GIM-CH (polymécanicien):</label>
- <div class="tooltip">
- <label class="file" title="" id="gimchLabel" >
- <input type="file" name="gimch" id="gimch" onchange="changeTitleFile(this)"/>
- </label>
- <span class="tooltiptext tooltip-right">Formats autorisés: pdf-jpg-jpeg-png</span>
- <p></p>
- <section id="formatErrorZone5"></section>
- </div>
- </div>
- <div id="griTest">
- <label for="griTestInput">Attestation de tests d'aptitudes GRI (informaticien):</label>
- <div class="tooltip">
- <label class="file" title="" id="griTestInputLabel" >
- <input type="file" name="griTestInput" id="griTestInput" onchange="changeTitleFile(this)"/>
- </label>
- <span class="tooltiptext tooltip-right">Formats autorisés: pdf-jpg-jpeg-png</span>
- <p></p>
- <section id="formatErrorZone6"></section>
- </div>
- </div>
- </fieldset>
- </div>
- </fieldset>
- </form>
- </body>
+ </body>
</html>
\ No newline at end of file
diff --git a/canapEPFL/script.js b/canapEPFL/script.js
index f120312..3db8c3d 100644
--- a/canapEPFL/script.js
+++ b/canapEPFL/script.js
@@ -7,8 +7,8 @@ $(document).ready(function () {
initAddRadioButtonEvent();
initDateChecker();
initDatepicker();
- clearFiles();
- checkRequired();
+ // clearFiles();
+ // checkRequired();
}
});
@@ -51,21 +51,23 @@ function addChildren(parentId, maxItems, childTemplate, addButtonId) {
}
function changeTitleFile(objFile) {
- objFile.parentNode.setAttribute('title', objFile.value.replace(/^.*[\\/]/, ''));
- checkFileFormat(objFile);
+ var filename = $(objFile)[0].value.replace(/^.*[\\/]/, '')
+ $(objFile.parentElement)[0].children[3].innerHTML = filename
+ checkFileFormat($(objFile)[0]);
}
function checkFileFormat(obj) {
- var errorSection = obj.parentElement.nextElementSibling.nextElementSibling.nextElementSibling;
- var fileExtension = ['pdf', 'jpeg', 'png', 'jpg'];
+ var errorZone = $(obj.parentElement)[0].children[5]
+ var allowedExtensions = ['pdf', 'jpeg', 'png', 'jpg'];
+ var fileExtension = obj.value.split('.').pop().toLowerCase()
- if (fileExtension.indexOf(obj.value.split('.').pop().toLowerCase()) == -1) {
+ if (allowedExtensions.indexOf(fileExtension) == -1) {
// extension invalide
- errorSection.innerHTML = '<p class ="errorMsgs">Format invalide</p>';
+ errorZone.innerHTML = 'Format invalide'
clearFileInput(obj);
} else {
// extension valide
- errorSection.innerHTML = '';
+ errorZone.innerHTML = '';
}
}
@@ -119,14 +121,12 @@ function initAddChildButtons() {
});
$('#addInputFile').click(function () {
- var nextIndex = $('#newCertifZone > tbody').children().size() + 1;
- var zoneId = nextIndex + 7;
+ var nextIndex = $('#newCertifZone > tbody').children().length + 1;
if (nextIndex < 10) {
- $('#newCertifZone').append('<tr><td><div class="tooltip"><label class="file" title="" id="certifLabel' + nextIndex
- + '"><input type="file" name="certifs' + nextIndex
- + '" id="certifs' + nextIndex
- + '" onchange="changeTitleFile(this)" /></label><span class="tooltiptext tooltip-right">Formats autorisés: pdf-jpg-jpeg-png</span><p></p><section id="formatErrorZone' + zoneId
- + '"></section></div></td></tr>');
+ $('#newCertifZone').append('<tr><td><label for="certifs'+ nextIndex +'">Annexe supplémentaire</label><br>'
+ + '<input type="file" name="certifs'+ nextIndex +'" class="upload-input" id="certifs'+ nextIndex +'" onchange="changeTitleFile(this)"/>'
+ + '<label for="certifs'+ nextIndex +'" class="btn btn-secondary btn-sm icon-right">Choisir...</label><br>'
+ + '<small class="error" class="form-text text-muted"></small></td></tr>');
if (nextIndex == 9) {
$('#addInputFile').hide(750);
}
diff --git a/canapEPFL/templates/errorText.php b/canapEPFL/templates/errorText.php
index d974cb9..dc83909 100644
--- a/canapEPFL/templates/errorText.php
+++ b/canapEPFL/templates/errorText.php
@@ -1,13 +1,11 @@
-<p style="color:red; font-size: 25px;">Des erreurs se sont produites, merci de remplir tous les champs obligatoires!</p>
-<div id="formErrorsDiv" style="padding-bottom: 20px;">
- <?php
- foreach($validator->errors() as $error => $errorVal) {
- echo "<li>$errorVal</li>";
- }
- ?>
-</div>
-<footer>
- <button type="button" id="retourFormulaire" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
- Retour au formulaire
- </button>
-</footer>
\ No newline at end of file
+<main id="main" role="main" class="content container-grid">
+ <h5 style="color: red;">Des erreurs se sont produites, merci de remplir tous les champs obligatoires!</h5>
+ <div id="formErrorsDiv" style="padding-bottom: 20px;">
+ <?php
+ foreach($validator->errors() as $error => $errorVal) {
+ echo "<li>$errorVal</li>";
+ }
+ ?>
+ </div>
+ <button type="button" class="btn btn-primary btn-sm mt-3 mb-2" id="retourFormulaire">Retour au formulaire</button>
+</main>
\ No newline at end of file
--
GitLab