Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3018 | Rev 3020 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3018 Rev 3019
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React, { useMemo } from 'react'
2 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form'
3 
import { styled, Typography } from '@mui/material'
 3 
import { styled, Typography } from '@mui/material'
4 
import { Public, LockClock } from '@mui/icons-material'
 4 
import { Public, LockClock } from '@mui/icons-material'
Línea 5... Línea 5...
5 
 
 5 
 
Línea 36... Línea 36...
36 
  votes = [],
 36 
  votes = [],
37 
  time = 0,
 37 
  time = 0,
38 
  voteUrl = '/feed/vote/d454717c-ba6f-485c-b94c-4fbb5f5bed94',
 38 
  voteUrl = '/feed/vote/d454717c-ba6f-485c-b94c-4fbb5f5bed94',
39 
  resultType = 'pu'
 39 
  resultType = 'pu'
40 
}) => {
 40 
}) => {
- 
 
 41 
  const totalVotes = useMemo(
- 
 
 42 
    () =>
- 
 
 43 
      votes.reduce((acc, cur) => {
- 
 
 44 
        if (!cur) return acc
- 
 
 45 
        return acc + cur
- 
 
 46 
      }, 0),
- 
 
 47 
    [votes]
- 
 
 48 
  )
- 
 
 49 
 
41 
  const { control, handleSubmit } = useForm()
 50 
  const { control, handleSubmit } = useForm()
Línea 42... Línea 51...
42 
 
 51 
 
43 
  const sendVote = handleSubmit(({ vote }) => {
 52 
  const sendVote = handleSubmit(({ vote }) => {
44 
    const formData = new FormData()
 53 
    const formData = new FormData()
Línea 63... Línea 72...
63 
      .catch((err) => {
 72 
      .catch((err) => {
64 
        addNotification({ style: 'danger', msg: err.message })
 73 
        addNotification({ style: 'danger', msg: err.message })
65 
      })
 74 
      })
66 
  })
 75 
  })
Línea 67... Línea 76...
67 
 
 76 
 
68 
  console.log({
 77 
  function getTimeDiff(segundos) {
- 
 
 78 
    const currentDate = new Date()
69 
    active,
 79 
    const futureDate = new Date(currentDate.getTime() + segundos * 1000)
- 
 
 80 
    const diff = futureDate - currentDate
- 
 
 81 
 
- 
 
 82 
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
- 
 
 83 
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
- 
 
 84 
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
- 
 
 85 
 
70 
    question,
 86 
    return `${addZero(days)}d ${addZero(hours)}h ${addZero(minutes)}m`
- 
 
 87 
  }
71 
    answers,
 88 
 
- 
 
 89 
  function addZero(unit) {
72 
    votes,
 90 
    return String(unit).padStart(2, '0')
- 
 
 91 
  }
73 
    time,
 92 
 
74 
    voteUrl,
 93 
  function getPorcentage(n, total) {
75 
    resultType
 94 
    return (n / total) * 100
Línea 76... Línea 95...
76 
  })
 95 
  }
77 
 
 96 
 
78 
  return (
 97 
  return (
79 
    <Widget>
 98 
    <Widget>
Línea 80... Línea 99...
80 
      <Widget.Body>
 99 
      <Widget.Body>
81 
        <Typography variant='h3'>{question}</Typography>
 100 
        <Typography variant='h3'>{question}</Typography>
82 
 
 101 
 
83 
        {resultType === 'pu' ? (
 102 
        {resultType === 'pu' ? (
- 
 
 103 
          <Typography
84 
          <Typography
 104 
            variant='overline'
85 
            variant='overline'
 105 
            title='El número de votos es visible para todos los usuarios'
86 
            title='El número de votos es visible para todos los usuarios'
 106 
            sx={{ paddingBottom: (theme) => theme.spacing(0.5) }}
87 
          >
 107 
          >
88 
            <Public /> Público
 108 
            <Public /> Público
89 
          </Typography>
 109 
          </Typography>
90 
        ) : (
 110 
        ) : (
- 
 
 111 
          <Typography
91 
          <Typography
 112 
            variant='overline'
92 
            variant='overline'
 113 
            title='Los resultados de la votación son privados'
93 
            title='Los resultados de la votación son privados'
 114 
            sx={{ paddingBottom: (theme) => theme.spacing(0.5) }}
94 
          >
 115 
          >
Línea 95... Línea 116...
95 
            <LockClock /> Privado
 116 
            <LockClock /> Privado
96 
          </Typography>
 117 
          </Typography>
97 
        )}
 118 
        )}
Línea 98... Línea 119...
98 
 
 119 
 
99 
        <form onChange={sendVote} className={styles.survey_form}>
 120 
        <form onChange={sendVote} className={styles.survey_form}>
- 
 
 121 
          {answers.map((answer, index) => {
- 
 
 122 
            if (answer === null) return null
- 
 
 123 
 
- 
 
 124 
            return (
- 
 
 125 
              <AnswerContainer
- 
 
 126 
                key={answer}
- 
 
 127 
                sx={{
- 
 
 128 
                  '::before': {
- 
 
 129 
                    content: '',
- 
 
 130 
                    position: 'absolute',
- 
 
 131 
                    left: 0,
- 
 
 132 
                    top: 0,
- 
 
 133 
                    height: '100%',
- 
 
 134 
                    backgroundColor: '#0002',
- 
 
 135 
                    zIndex: 4,
- 
 
 136 
                    width: totalVotes
100 
          {answers.map((answer, index) => {
 137 
                      ? `${getPorcentage(votes[index], totalVotes)}%`
101 
            if (answer === null) return null
 138 
                      : 0
102 
 
 139 
                  }
103 
            return (
 140 
                }}
104 
              <AnswerContainer key={answer}>
 141 
              >
- 
 
 142 
                <CheckboxInput
- 
 
 143 
                  name='vote'
- 
 
 144 
                  value={index + 1}
- 
 
 145 
                  label={answer}
- 
 
 146 
                  control={control}
105 
                <CheckboxInput
 147 
                  styles={{
Línea 106... Línea 148...
106 
                  name='vote'
 148 
                    display: 'flex',
107 
                  value={index + 1}
 149 
                    alignItems: 'center',
108 
                  label={answer}
 150 
                    gap: 0.5
109 
                  control={control}
 151 
                  }}
110 
                />
 152 
                />
111 
 
 153 
 
112 
                {/*  {!!totalVotes && (
 154 
                {totalVotes && (
113 
              <span className='mb-0'>
 155 
                  <Typography variant='overline'>
Línea 114... Línea 156...
114 
                {getPorcentage(votes[index], totalVotes)}%
 156 
                    {getPorcentage(votes[index], totalVotes)}%