Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kill Sondage (1/2) [NGC-571] #1447

Merged
merged 1 commit into from
Mar 14, 2024
Merged

Kill Sondage (1/2) [NGC-571] #1447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion nosgestesclimat
Open in desktop
Submodule nosgestesclimat updated from 433f69 to 553913
349 changes: 15 additions & 334 deletions source/sites/publicodes/conference/Instructions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,346 +1,27 @@
import QRCode from 'qrcode.react'
import { useContext, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { Link, useNavigate } from 'react-router-dom'
import ShareButton from '../../../components/ShareButton'
import { ThemeColorsContext } from '../../../components/utils/colors'
import { useQuery } from '../../../utils'
import LoadingButton from './LoadingButton'
import NamingBlock from './NamingBlock'
import Button from '@/components/groupe/Button'
import ButtonLink from '@/components/groupe/ButtonLink'
import { Trans } from 'react-i18next'

/* The conference mode can be used with two type of communication between users : P2P or database. The P2P mode was implemented first, then we decided that we needed a survey mode, with permanent data. But YJS is not yet designed plug and play for persistence, hence our survey mode will be implemented using Supabase/Postgre.
*
* However, the database mode for Conference could still be usefull for restricted networks (e.g. entreprise) where P2P is forbidden. We could then have a server handling the yjs-websocket server. It could crash without any persistence garantee : some users would have the backup anyway (rehydratation in case of server crash to be tested).
*
* */

export default ({
room,
newRoom,
setNewRoom,
mode: defaultMode = 'sondage',
started = false,
}) => {
const URLMode = useQuery().get('mode')
const navigate = useNavigate()
const [mode, setModeState] = useState(URLMode || defaultMode)
const setMode = (mode) => {
setModeState(mode)

navigate(`/?mode=${mode}`, { replace: true })
}
const { color } = useContext(ThemeColorsContext)
const URLbase = `https://${window.location.hostname}`
const URLPath = `/${mode}/${room || newRoom}`,
shareURL = URLbase + URLPath
const URLGuide = '/guide'

const { t } = useTranslation()

export default () => {
return (
<div>
{!room && (
<Trans i18nKey={'publicodes.conference.Instructions.intro'}>
<p>
Le test d'empreinte climat est individuel, mais nous vous proposons
ici de le faire à plusieurs. Chacun sera derrière son écran, mais
pourra voir en temps réel les résultats des autres.
</p>
<p>
C'est l'occasion de réfléchir ensemble aux enjeux de notre propre
impact en comparant nos modes de vie.
</p>
</Trans>
)}
<h2 className="mt-4">{t('📘 Comment ça marche ?')}</h2>
{!started && (
<InstructionBlock
index="1"
title={<span>{t('💡 Choisissez un nom de salle')}</span>}
>
{!room && <NamingBlock {...{ newRoom, setNewRoom }} />}
{room && <p>{t("✅ C'est fait")}</p>}
</InstructionBlock>
)}
{!started && newRoom !== '' && !room && (
<InstructionBlock
index="2"
title={<span>{t('⏲️ Choisissez votre mode de simulation')}</span>}
>
<div
css={`
display: flex;
flex-wrap: wrap;
label {
flex: auto !important;
max-width: 16rem !important;
cursor: pointer;
}
`}
>
<label
className={`ui__ card box interactive ${
mode === 'sondage' ? 'selected' : ''
}`}
>
<input
type="radio"
name="mode"
value="sondage"
checked={mode === 'sondage'}
onChange={(e) => setMode(e.target.value)}
/>
<h3>
💾 <Trans>Sondage</Trans>
</h3>
<p>
<Trans
i18nKey={
'publicodes.conference.Instructions.descriptionModeSondage'
}
>
Mode persistant : les données des participants sont stockées
sur notre serveur et restent accessibles et téléchargeables{' '}
<strong>pendant deux mois</strong>.
</Trans>
</p>
</label>
<label
className={`ui__ card box interactive ${
mode === 'conférence' ? 'selected' : ''
}`}
>
<input
type="radio"
name="mode"
value="conférence"
checked={mode === 'conférence'}
onChange={(e) => setMode(e.target.value)}
/>
<h3>
🌠 <Trans>Conférence</Trans>
</h3>
<p>
<Trans
i18nKey={
'publicodes.conference.Instructions.descriptionModeConference'
}
>
Mode éphémère : parfait pour l'animation d'un atelier, une
présentation interactive ou entre amis. Les données restent
entre les participants (pair-à-pair sans serveur),{' '}
<strong>juste le temps de la conférence</strong>.
</Trans>
</p>
</label>
</div>
<div
css={`
margin-top: 1rem;
`}
>
{mode == 'conférence' && (
<p>
⚠️{' '}
<Trans
i18nKey={
'publicodes.conference.Instructions.avertissementModeConference'
}
>
<strong
css={`
background: yellow;
`}
>
Attention
</strong>
, il est possible que votre organisation bloque le
pair-à-pair, et donc l'utilisation du mode conférence. Faites
le test au préalable sur site et en duo : en cas de problème,
vous pouvez utiliser le mode sondage.
</Trans>
</p>
)}
{mode == 'sondage' && (
<p>
<Trans
i18nKey={
'publicodes.conference.Instructions.contextualisationLink'
}
>
💡 Vous souhaitez ajouter des questions pour obtenir des
informations supplémentaires sur les répondants ?{' '}
<Link to={'/groupe/documentation-contexte'}>
Découvrez la fonctionnalité "contextualisation de sondage !"{' '}
</Link>
</Trans>
</p>
)}
</div>
</InstructionBlock>
)}
{newRoom !== '' && !room && (
<InstructionBlock index="3" title={t('Prêt à démarrer ?')}>
<LoadingButton {...{ mode, URLPath, room: room || newRoom }} />
</InstructionBlock>
)}
<InstructionBlock
index="4"
noIndex={started}
title={
<span>{t('🔗 Partagez le lien à vos amis, collègues, etc.')}</span>
}
>
{!newRoom && !room ? (
<p>
<Trans>Choisissez d'abord un nom</Trans>
</p>
) : newRoom && !room ? null : (
<div
css={`
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
`}
>
<QRCode
value={shareURL}
size={200}
bgColor={'#ffffff'}
fgColor={color}
level={'L'}
includeMargin={false}
renderAs={'svg'}
role={'img'}
aria-label={'QR code'}
/>
<ShareButton
text={t("Faites un test d'empreinte climat avec moi")}
label={t('Partager le lien')}
url={shareURL}
title={t('Nos Gestes Climat Conférence')}
/>
</div>
)}
</InstructionBlock>
<InstructionBlock
index="5"
noIndex={started}
title={<span>{t('🎰 Faites toutes et tous votre simulation')}</span>}
<Trans>
<p>
Vous souhaitez réaliser une enquête sur le bilan carbone de votre organisation ? Un nouveau mode sondage est disponible.
</p>
</Trans>
<br/>
<ButtonLink
href='https://nosgestesclimat.fr/organisations?mtm_campaign=sondages.nosgestesclimat.fr'
>
{!room ? null : mode === 'conférence' ? (
<>
<p>
<Trans
i18nKey={
'publicodes.conference.Instructions.liensSimulationConference'
}
>
Au moment convenu, ouvrez ce lien tous en même temps et faites
chacun de votre côté votre simulation.
</Trans>
</p>
<Link to={'/simulateur/bilan'}>
<button className="ui__ button plain">
{t('Faites votre test')}
</button>
</Link>
</>
) : (
<>
<Link to={'/simulateur/bilan'}>
<button className="ui__ button plain">
{t('Faites votre test')}
</button>
</Link>
</>
)}
</InstructionBlock>
<InstructionBlock
index="6"
noIndex={started}
title={
<span>
{t('🧮 Visualisez à tout moment les résultats de votre groupe')}
</span>
}
>
<Trans i18nKey={'publicodes.conference.Instructions.resultatInfos'}>
Les résultats pour chaque catégorie (alimentation, transport, logement
...) s'affichent progressivement et en temps réel pour l'ensemble du
groupe sur{' '}
</Trans>
{!started ? (
t("la page à partager à l'étape 3")
) : (
<span>
{t('cette page')} <Link to={URLPath}>{URLPath}</Link>
</span>
)}
.
</InstructionBlock>
{room && (
<InstructionBlock
noIndex={started}
title={
<span>
<Trans>
📊 Analysez les résultats et animez les discussions !
</Trans>
</span>
}
>
<Trans i18nKey={'publicodes.conference.Instructions.guideLien'}>
Les résultats sont là, que faire ? Notre guide vous accompagne dans
vos réflexions et vos discussions sur cette page
</Trans>
&nbsp;
<Link to={URLGuide}>{URLGuide}</Link> !
</InstructionBlock>
)}
✨ Accéder au nouveau mode organisation
</ButtonLink>
</div>
)
}

const InstructionBlock = ({ title, index, children, noIndex }) => (
<div
className="ui__ card !mx-0"
css={`
display: flex;
justify-content: start;
align-items: center;
margin: 1rem;
padding-bottom: 0.6rem;
@media (max-width: 800px) {
flex-direction: column;
}
`}
>
{!noIndex && (
<div
css={`
font-size: 300%;
padding: 1rem;
width: 4rem;
background: var(--lightercolor);
border-radius: 5rem;
margin: 0 1rem;
`}
>
{index}
</div>
)}
<div
css={`
width: calc(100% - 3rem);
@media (max-width: 800px) {
width: 100%;
}
`}
>
<h3>{title}</h3>
{children}
</div>
</div>
)
}
15 changes: 15 additions & 0 deletions source/sites/publicodes/conference/Survey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import NoSurveyCreatedWarning from './NoSurveyCreatedWarning'
import NoTestMessage from './NoTestMessage'
import { answersURL, surveysURL } from './useDatabase'
import { defaultThreshold } from './utils'
import IllustratedMessage from '@/components/ui/IllustratedMessage'
import ButtonLink from '@/components/groupe/ButtonLink'

export default () => {
const [surveyIds] = usePersistingState('surveyIds', {})
Expand Down Expand Up @@ -85,6 +87,19 @@ export default () => {
/>
<AutoCanonicalTag />
<Title title={t('Sondage')} />
<IllustratedMessage
emoji="⚠️"
message={
<div>
<p>Ce sondage ne sera bientôt plus accessible, vous pouvez en recréer un sur notre nouveau mode organisation.</p>
<ButtonLink
href='https://nosgestesclimat.fr/organisations?mtm_campaign=sondages.nosgestesclimat.fr'
>
✨ Accéder au nouveau mode organisation
</ButtonLink>
</div>
}
/>
{isRegisteredSurvey == false && (
<div css="margin-bottom: 3rem">
<NoSurveyCreatedWarning />
Expand Down
Loading