Skip to content

Commit

Permalink
Tech: ré-implémentation de la pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidbgk @ronnix
davidbgk authored and ronnix committed Sep 11, 2020
1 parent 02a2f1a commit d706fc8
Show file tree
Hide file tree
Showing 24 changed files with 1,356 additions and 1,068 deletions.
228 changes: 118 additions & 110 deletions src/scripts/actions.js
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,132 @@
import { ICS } from './ics.js'
import { hideElement, showElement } from './affichage.js'
import { getCurrentPageName } from './pagination.js'
import { ICS } from './ics'
import affichage from './affichage'
import pagination from './pagination'

module.exports = {
bindCalendar: function (element, profil) {
const ics = new ICS(navigator.appVersion)
const duration = 1 // heures bloquées sur le calendrier.
const urlSuivi = 'https://mesconseilscovid.sante.gouv.fr/#suiviintroduction'
function bindCalendar(element, profil) {
const ics = new ICS(navigator.appVersion)
const duration = 1 // heures bloquées sur le calendrier.
const urlSuivi = 'https://mesconseilscovid.sante.gouv.fr/#suiviintroduction'

// Définition de l'évènement de début des symptômes (pas de récurrence).
ics.addEvent(
'Début symptômes Covid-19',
`Vous pouvez faire votre suivi quotidien sur ${urlSuivi}`,
profil.symptomes_start_date,
duration,
undefined
)
// Définition de l'évènement de début des symptômes (pas de récurrence).
ics.addEvent(
'Début symptômes Covid-19',
`Vous pouvez faire votre suivi quotidien sur ${urlSuivi}`,
profil.symptomes_start_date,
duration,
undefined
)

// Définition de l'évènement récurrent à partir du premier suivi.
const occurences = 15 // entrées dans le calendrier.
const rrule = {
// Le rappel est quotidien.
freq: 'DAILY',
interval: 1,
count: occurences,
}
ics.addEvent(
'Suivi Covid-19',
`Aller faire mon suivi quotidien sur ${urlSuivi}`,
profil.suivi_start_date,
duration,
rrule
)
// Définition de l'évènement récurrent à partir du premier suivi.
const occurences = 15 // entrées dans le calendrier.
const rrule = {
// Le rappel est quotidien.
freq: 'DAILY',
interval: 1,
count: occurences,
}
ics.addEvent(
'Suivi Covid-19',
`Aller faire mon suivi quotidien sur ${urlSuivi}`,
profil.suivi_start_date,
duration,
rrule
)

const calendar = ics.generateCalendar()
const calendar = ics.generateCalendar()

// eslint-disable-next-line no-extra-semi
;[].forEach.call(element.querySelectorAll('.js-calendar'), (calendarButton) => {
const href =
'data:text/x-vCalendar;charset=utf-8,' + encodeURIComponent(calendar)
calendarButton.setAttribute('href', href)
})
},
bindFeedback: function (component) {
function opacityTransition(component, delay, callback) {
component.style.transition = `opacity ${delay / 1000}s`
component.style.opacity = '0'
window.setTimeout(() => {
component.style.opacity = '1'
callback(component)
}, delay)
}
// eslint-disable-next-line no-extra-semi
;[].forEach.call(element.querySelectorAll('.js-calendar'), (calendarButton) => {
const href =
'data:text/x-vCalendar;charset=utf-8,' + encodeURIComponent(calendar)
calendarButton.setAttribute('href', href)
})
}

function askForMoreFeedback(feedback, component) {
const transitionDelay = component.dataset.feedbackTransitionDelay
function bindFeedback(component) {
function opacityTransition(component, delay, callback) {
component.style.transition = `opacity ${delay / 1000}s`
component.style.opacity = '0'
window.setTimeout(() => {
component.style.opacity = '1'
callback(component)
}, delay)
}

opacityTransition(component, transitionDelay, (component) => {
hideElement(component.querySelector('.feedback-question'))
showElement(component.querySelector('.feedback-form'))
component.parentElement.classList.add('js-feedback-submitted')
const form = component.querySelector('.feedback-form form')
form.addEventListener('submit', (event) => {
event.preventDefault()
const feedbackHost = document.body.dataset.statsUrl
const payload = {
kind: feedback,
message: event.target.elements.message.value,
page: getCurrentPageName(),
}
const request = new XMLHttpRequest()
request.open('POST', feedbackHost + '/feedback', true)
request.setRequestHeader('Content-Type', 'application/json')
request.send(JSON.stringify(payload))
function askForMoreFeedback(feedback, component) {
const transitionDelay = component.dataset.feedbackTransitionDelay

opacityTransition(component, transitionDelay, (component) => {
hideElement(component.querySelector('.feedback-form'))
showElement(component.querySelector('.feedback-thankyou'))
})
})
})
}
// eslint-disable-next-line no-extra-semi
;[].forEach.call(component.querySelectorAll('.button-feedback'), (button) => {
button.addEventListener('click', (event) => {
opacityTransition(component, transitionDelay, (component) => {
affichage.hideElement(component.querySelector('.feedback-question'))
affichage.showElement(component.querySelector('.feedback-form'))
component.parentElement.classList.add('js-feedback-submitted')
const form = component.querySelector('.feedback-form form')
form.addEventListener('submit', (event) => {
event.preventDefault()
const feedback = event.target.dataset.feedback
window.plausible(`Avis ${feedback}`)
askForMoreFeedback(feedback, component)
const feedbackHost = document.body.dataset.statsUrl
const payload = {
kind: feedback,
message: event.target.elements.message.value,
page: pagination.getCurrentPageName(),
}
const request = new XMLHttpRequest()
request.open('POST', feedbackHost + '/feedback', true)
request.setRequestHeader('Content-Type', 'application/json')
request.send(JSON.stringify(payload))

opacityTransition(component, transitionDelay, (component) => {
affichage.hideElement(component.querySelector('.feedback-form'))
affichage.showElement(component.querySelector('.feedback-thankyou'))
})
})
})
document.addEventListener('pageChanged', () => {
// Display again the question if the user change page.
hideElement(component.querySelector('.feedback-form'))
hideElement(component.querySelector('.feedback-thankyou'))
showElement(component.querySelector('.feedback-question'))
})
},
bindImpression: function (element) {
const printButton = element.querySelector('.js-impression')
printButton.addEventListener('click', (event) => {
event.preventDefault()
try {
window.print()
} catch (e) {
alert('Cette fonctionnalité n’est pas présente sur votre appareil')
}
})
},
bindSuppressionTotale: function (element, app) {
element.addEventListener('click', (event) => {
}
// eslint-disable-next-line no-extra-semi
;[].forEach.call(component.querySelectorAll('.button-feedback'), (button) => {
button.addEventListener('click', (event) => {
event.preventDefault()
if (confirm('Êtes-vous sûr·e de vouloir supprimer tous les profils ?')) {
app.supprimerTout().then(() => {
if (app.router.lastRouteResolved().url === 'introduction') {
window.location.reload(true)
} else {
app.router.navigate('introduction')
}
})
}
const feedback = event.target.dataset.feedback
window.plausible(`Avis ${feedback}`)
askForMoreFeedback(feedback, component)
})
},
})
document.addEventListener('pageChanged', () => {
// Display again the question if the user change page.
affichage.hideElement(component.querySelector('.feedback-form'))
affichage.hideElement(component.querySelector('.feedback-thankyou'))
affichage.showElement(component.querySelector('.feedback-question'))
})
}

function bindImpression(element) {
const printButton = element.querySelector('.js-impression')
printButton.addEventListener('click', (event) => {
event.preventDefault()
try {
window.print()
} catch (e) {
alert('Cette fonctionnalité n’est pas présente sur votre appareil')
}
})
}

function bindSuppressionTotale(element, app) {
element.addEventListener('click', (event) => {
event.preventDefault()
if (confirm('Êtes-vous sûr·e de vouloir supprimer tous les profils ?')) {
app.supprimerTout().then(() => {
if (app.router.lastRouteResolved().url === 'introduction') {
window.location.reload(true)
} else {
app.router.navigate('introduction')
}
})
}
})
}

export default {
bindImpression,
bindFeedback,
bindCalendar,
bindSuppressionTotale,
}
2 changes: 1 addition & 1 deletion src/scripts/affichage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ function safeHtml(literals, ...substitutions) {
return result
}

module.exports = {
export default {
showMeOrThem,
hideElement,
showElement,
Expand Down
2 changes: 1 addition & 1 deletion src/scripts/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Profil from './profil'
import { StockageLocal } from './stockage.js'
import { Profil } from './profil.js'
import { joursAvant } from './utils.js'

var Router = require('./router.js')
Expand Down
Loading

0 comments on commit d706fc8

Please sign in to comment.