libsys
/
jornadas


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
							<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Talleres de invierno</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="node_modules/choices.js/public/assets/styles/choices.min.css">
</head>
<body>
  <div id="container" class="container">
    <?php
    session_start();
    if (isset($_SESSION['response'])):
      $response = json_decode($_SESSION['response']);
    ?>
    <div class="mt-4 alert alert-<?= key($response) ?>">
      <?= current($response) ?>
    </div>
    <?php
    unset($_SESSION['response']);
    endif;
    ?>
    <div class="row">
      <div class="col-sm-12 col-md-6 mt-4">
        <img src="images/posters/2019-09-01.png" class="img-fluid" alt="poster">
        <p class="small text-center">
          &copy; Autor no especifica licencia
          -
          <a href="images/posters/2019-09-01.png">PNG</a>
        </p>
        <img src="images/posters/2019-09-01_2.png" class="img-fluid" alt="poster">
        <p class="small text-center">
          &copy; Autor no especifica licencia
          -
          <a href="images/posters/2019-09-01_2.png">PNG</a>
        </p>
      </div>
      <div class="col-sm-12 col-md-6 pt-4">
        <h1>Talleres de invierno en el Ateneo Anarquista de Santiago</h1>
        <p class="lead">Uso básico de terminal e instalación de Debian GNU/Linux.</p>
        <p>Comienza a utilizar las simples pero poderosas herramientas que hacen a GNU/Linux tan valorado por quienes saben de informática y liberación tecnológica y luego libera tu propio equipo y/o aprende a liberar el de tus amigos.</p>
        <ul style="font-weight: bold">
          <li>No requiere conocimientos previos.</li>
          <li>Puedes asistir a un solo taller o ambos.</li>
          <li>
            Para participar activamente* debes llevar:
            <ul>
              <li>Un pendrive vacío (para ambos talleres).</li>
              <li>Un computador con su info respaldada, si quieres instalar.</li>
              <li>Puntualidad, si llegas atrasado te perderás de contenido.</li>
            </ul>
          </li>
          <li>El evento es gratuito, se recibirán colaboraciones voluntarias en beneficio del Ateneo.</li>
        </ul>
        <p>* También puedes asistir como oyente.</p>
        <p>Conoce más del Ateneo en <a href="https://ateneostgo.org">AteneoStgo.org</a>.</p>
        <h2>Reserva un cupo</h2>
        <form id="bookingForm" action="booking.php" method="POST" novalidate>
          <div class="form-group">
            <label for="name">Nombre o apodo</label>
            <input type="text" name="name" class="form-control" id="name" required>
          </div>
          <div class="form-group">
            <label for="email">E-mail</label>
            <input type="email" name="email" class="form-control" id="email" required>
          </div>
          <div class="form-group">
            <label for="reserves">Talleres a los que asistirás</label>
            <select name="reserves[]" id="reserves" multiple>
              <option value="terminal">Terminal: comandos básicos - 15 hrs</option>
              <option value="debian">Instalación de Debian GNU/Linux - 17 hrs</option>
            </select>
          </div>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" name="mailing" id="mailing">
            <label class="custom-control-label" for="mailing">Deseo recibir correos de otras actividades relacionadas al software libre</label>
          </div>
          <textarea name="message" class="d-none"></textarea>
          <div class="text-right mt-2">
            <button type="submit" class="btn btn-lg btn-primary">Confirmar asistencia</button>
          </div>
        </form>
    	</div>
    </div> 
    <div class="text-center m-3">
      <a href="./contacto">Contacto</a> -
      También puedes <a href="cancel.php" id="cancelLink">anular tu reserva aquí</a>
    </div>
  </div>
  <script type="application/javascript" src="node_modules/jquery/dist/jquery.slim.min.js"></script>
  <script type="application/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="application/javascript" src="node_modules/choices.js/public/assets/scripts/choices.min.js"></script>
  <script type="application/javascript">
    let choices = new Choices(document.getElementById('reserves'), {
      noResultsText: 'No se encontraron resultados',
      noChoicesText: 'No hay más opciones',
      itemSelectText: 'Presiona para seleccionar',
      shouldSort: false
    })

    function alertGen(alertObj, callback) {
      const alertDiv = document.createElement('div')
      alertDiv.classList.add(
        'alert-' + Object.keys(alertObj)[0],
        'alert', 'alert-dismissable', 'fade', 'show', 'mt-4')
      alertDiv.innerHTML = Object.values(alertObj)[0]

      const closeButton = document.createElement('button')
      closeButton.setAttribute('type', 'text')
      closeButton.classList.add('close')
      closeButton.dataset.dismiss = 'alert'
      closeButton.innerHTML = '<span>&times;</span>'
      alertDiv.appendChild(closeButton)

      container.insertBefore(alertDiv, container.childNodes[0])

      setTimeout(() => {
        document.getElementsByTagName('html')[0].scrollIntoView({behavior: "smooth"})
      }, 100);

      callback()
    }

    const container = document.getElementById('container')

    document.getElementById('bookingForm').addEventListener('submit', (event) => {
      event.preventDefault()
      
      const formData = new FormData(event.target)
      formData.append('fetch', true)

      fetch(event.target.getAttribute('action'), {
        method: event.target.getAttribute('method'),
        body: formData,
      })
        .then(response => response.json())
        .then((response) => {
          alertGen(response, () => event.target.reset())
        })
        .catch(error => console.error(error))
    })

    document.getElementById('cancelLink').addEventListener('click', (event) => {
      event.preventDefault()

      fetch(event.target.getAttribute('href'))
        .then(response => response.text())
        .then((response) => {
          const modalDiv = document.createElement('div')
          modalDiv.classList.add('modal', 'fade')
          const modalDialogDiv = document.createElement('div')
          modalDialogDiv.classList.add('modal-dialog', 'modal-sm')
          modalDiv.appendChild(modalDialogDiv)
          const modalContentDiv = document.createElement('div')
          modalContentDiv.classList.add('modal-content')
          modalContentDiv.innerHTML = response
          modalDialogDiv.appendChild(modalContentDiv)

          container.appendChild(modalDiv)
          $(modalDiv).modal('show')
          $(modalDiv).on('hidden.bs.modal', function (event) {
            $(modalDiv).remove();
          });

          document.getElementById('cancelForm').addEventListener('submit', (event) => {
            event.preventDefault()
            
            const formData = new FormData(event.target)
            formData.append('fetch', true)

            fetch(event.target.getAttribute('action'), {
              method: event.target.getAttribute('method'),
              body: formData,
            })
              .then(response => response.json())
              .then((response) => {
                alertGen(response, () => $(modalDiv).modal('hide'))
              })
              .catch(error => console.error(error))
          })
        })
        .catch(error => console.error(error))
      })
  </script>
</body>
</html>