export const ALMACEN_PASATIEMPO = "PASATIEMPO"

export const PAS_ID = "PAS_ID"

export const INDICE_NOMBRE = "INDICE_NOMBRE"

export const PAS_NOMBRE = "PAS_NOMBRE"

const BD_NOMBRE = "sincro"

const BD_VERSION = 1

/** @type { Promise<IDBDatabase> } */

export const Bd = new Promise((resolve, reject) => {

 /* Se solicita abrir la base de datos, indicando nombre y

  * número de versión. */

 const solicitud = indexedDB.open(BD_NOMBRE, BD_VERSION)

 // Si se presenta un error, rechaza la promesa.

 solicitud.onerror = () => reject(solicitud.error)

 // Si se abre con éxito, devuelve una conexión a la base de datos.

 solicitud.onsuccess = () => resolve(solicitud.result)

 // Si es necesario, se inicia una transacción para cambio de versión.

 solicitud.onupgradeneeded = () => {

  const bd = solicitud.result

  // Como hay cambio de versión, borra el almacén si es que existe.

  if (bd.objectStoreNames.contains(ALMACEN_PASATIEMPO)) {

   bd.deleteObjectStore(ALMACEN_PASATIEMPO)

  }

  // Crea el almacén "PASATIEMPO" con el campo llave "PAS_ID".

  const almacenPasatiempo =

   bd.createObjectStore(ALMACEN_PASATIEMPO, { keyPath: PAS_ID })

  // Crea un índice ordenado por el campo PAS_NOMBRE que no acepta duplicados.

  almacenPasatiempo.createIndex(INDICE_NOMBRE, PAS_NOMBRE)

 }

})

import { sincroniza } from "./sincroniza.js"

/**

 * Cada 20 segundos (2000 milisegundos) después de la última

 * sincronización, los datos se envían al servidor para volver a

 * sincronizarse con los datos del servidor.

 */

const MILISEGUNDOS_PARA_VOLVER_A_SINCRONIZAR = 20000

export function esperaUnPocoYSincroniza() {

 setTimeout(() => sincroniza(), MILISEGUNDOS_PARA_VOLVER_A_SINCRONIZAR)

}

/**

 * @typedef {Object} PASATIEMPO

 * @property {string} PAS_ID

 * @property {string} PAS_NOMBRE

 * @property {number} PAS_MODIFICACION

 * @property {number} PAS_ELIMINADO

 */

import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"

import { bdEjecuta } from "./lib/bdEjecuta.js"

import { creaIdCliente } from "./lib/creaIdCliente.js"

import { recibeTextoObligatorio } from "./lib/recibeTextoObligatorio.js"

/**

 * @param {SubmitEvent} event

 */

export async function pasatiempoAgrega(event) {

 event.preventDefault()

 const target = event.target

 if (!(target instanceof HTMLFormElement))

  throw new Error("target no es de tipo form.")

 const formData = new FormData(target)

 const modelo = {

  PAS_ID: creaIdCliente(Date.now().toString()), // Genera id único en internet.

  PAS_NOMBRE: recibeTextoObligatorio(formData, "nombre"),

  PAS_MODIFICACION: Date.now(),

  PAS_ELIMINADO: 0,

 }

 await bdEjecuta(Bd, [ALMACEN_PASATIEMPO], transaccion => {

  const almacenPasatiempo = transaccion.objectStore(ALMACEN_PASATIEMPO)

  almacenPasatiempo.add(modelo)

 })

 location.href = "index.html"

}

import { bdConsulta } from "./lib/bdConsulta.js"

import { validaPasatiempo } from "./validaPasatiempo.js"

import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"

/**

 * @param {string} id

 */

export async function pasatiempoBusca(id) {

 return bdConsulta(Bd, [ALMACEN_PASATIEMPO],

  /**

   * @param {(resultado: import("./PASATIEMPO.js").PASATIEMPO|undefined)

   *                                                            => any} resolve 

   */

  (transaccion, resolve) => {

   /* Pide el primer objeto de ALMACEN_PASATIEMPO que tenga como llave

    * primaria el valor del parámetro id. */

   const consulta = transaccion.objectStore(ALMACEN_PASATIEMPO).get(id)

   // onsuccess se invoca solo una vez, devolviendo el objeto solicitado.

   consulta.onsuccess = () => {

    /* Se recupera el objeto solicitado usando

     *  consulta.result

     * Si el objeto no se encuentra se recupera undefined. */

    const objeto = consulta.result

    if (objeto !== undefined) {

     const modelo = validaPasatiempo(objeto)

     if (modelo.PAS_ELIMINADO === 0) {

      resolve(modelo)

      return

     }

    }

    resolve(undefined)

   }

  })

}

import { ALMACEN_PASATIEMPO, Bd, INDICE_NOMBRE } from "./Bd.js"

import { bdConsulta } from "./lib/bdConsulta.js"

import { validaPasatiempo } from "./validaPasatiempo.js"

export async function pasatiempoConsultaNoEliminados() {

 return bdConsulta(Bd, [ALMACEN_PASATIEMPO],

  /**

   * @param {(resultado: import("./PASATIEMPO.js").PASATIEMPO[])=>void

   *                                                                  } resolve

   */

  (transaccion, resolve) => {

   const resultado = []

   const almacenPasatiempo = transaccion.objectStore(ALMACEN_PASATIEMPO)

   // Usa el índice INDICE_NOMBRE para recuperar los datos ordenados.

   const indiceNombre = almacenPasatiempo.index(INDICE_NOMBRE)

   // Pide un cursor para recorrer cada objeto que devuelve la consulta.

   const consulta = indiceNombre.openCursor()

   /* onsuccess se invoca por cada uno de los objetos de la consulta y una vez

    * cuando se acaban dichos objetos. */

   consulta.onsuccess = () => {

    /* El cursor correspondiente al objeto se recupera usando

     *  consulta.result */

    const cursor = consulta.result

    if (cursor === null) {

     /* Si el cursor vale null, ya no hay más objetos que procesar; por lo

      * mismo, se devuelve el resultado con los pasatiempos recuperados, usando

      *  resolve(resultado). */

     resolve(resultado)

    } else {

     /* Si el cursor no vale null y hay más objetos, el siguiente se obtiene con

      *  cursor.value */

     const modelo = validaPasatiempo(cursor.value)

     if (modelo.PAS_ELIMINADO === 0) {

      resultado.push(modelo)

     }

     /* Busca el siguiente objeto de la consulta, que se recupera la siguiente

      * vez que se invoque la función onsuccess. */

     cursor.continue()

    }

   }

  })

}

import { bdConsulta } from "./lib/bdConsulta.js"

import { validaPasatiempo } from "./validaPasatiempo.js"

import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"

/**

 * Lista todos los objetos, incluyendo los que tienen borrado lógico.

 */

export async function pasatiempoConsultaTodos() {

 return bdConsulta(Bd, [ALMACEN_PASATIEMPO],

  /**

   * @param {(resultado: import("./PASATIEMPO.js").PASATIEMPO[])=>void

   *                                                                  } resolve

   */

  (transaccion, resolve) => {

   const resultado = []

   // Pide un cursor para recorrer cada objeto que devuelve la consulta.

   const consulta = transaccion.objectStore(ALMACEN_PASATIEMPO).openCursor()

   /* onsuccess se invoca por cada uno de los objetos de la consulta y una vez

    * cuando se acaban dichos objetos. */

   consulta.onsuccess = () => {

    /* El cursor correspondiente al objeto se recupera usando

     *  consulta.result */

    const cursor = consulta.result

    if (cursor === null) {

     /* Si el cursor vale null, ya no hay más objetos que procesar; por lo

      * mismo, se devuelve el resultado con los pasatiempos recuperados, usando

      *  resolve(resultado). */

     resolve(resultado)

    } else {

     /* Si el cursor no vale null y hay más objetos, el siguiente se obtiene con

      *  cursor.value*/

     resultado.push(validaPasatiempo(cursor.value))

     /* Busca el siguiente objeto de la consulta, que se recupera la siguiente

      * vez que se invoque la función onsuccess. */

     cursor.continue()

    }

   }

  })

}

import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"

import { bdEjecuta } from "./lib/bdEjecuta.js"

import { pasatiempoBusca } from "./pasatiempoBusca.js"

/**

 * @param { string } id

 */

export async function pasatiempoElimina(id) {

 if (confirm('Confirma la eliminación')) {

  const modelo = await pasatiempoBusca(id)

  if (modelo !== undefined) {

   modelo.PAS_MODIFICACION = Date.now()

   modelo.PAS_ELIMINADO = 1

   await bdEjecuta(Bd, [ALMACEN_PASATIEMPO], transaccion => {

    const almacenPasatiempo = transaccion.objectStore(ALMACEN_PASATIEMPO)

    almacenPasatiempo.put(modelo)

   })

  }

  location.href = "index.html"

 }

}

import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"

import { bdEjecuta } from "./lib/bdEjecuta.js"

import { recibeTextoObligatorio } from "./lib/recibeTextoObligatorio.js"

import { pasatiempoBusca } from "./pasatiempoBusca.js"

/**

 * @param {SubmitEvent} event

 * @param {string} id

 */

export async function pasatiempoModifica(event, id) {

 event.preventDefault()

 const target = event.target

 if (!(target instanceof HTMLFormElement))

  throw new Error("target no es de tipo form.")

 const formData = new FormData(target)

 const nombre = recibeTextoObligatorio(formData, "nombre")

 const anterior = await pasatiempoBusca(id)

 if (anterior !== undefined) {

  anterior.PAS_NOMBRE = nombre

  anterior.PAS_MODIFICACION = Date.now()

  await bdEjecuta(Bd, [ALMACEN_PASATIEMPO], transaccion => {

   const almacenPasatiempo = transaccion.objectStore(ALMACEN_PASATIEMPO)

   almacenPasatiempo.put(anterior)

  })

 location.href = "index.html"

 }

}

import { bdEjecuta } from "./lib/bdEjecuta.js"

import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"

/**

 * Borra el contenido del almacén PASATIEMPO y guarda nuevospasatiempos.

 * @param {import("./PASATIEMPO.js").PASATIEMPO[]} nuevosPasatiempos

 */

export async function pasatiemposReemplaza(nuevosPasatiempos) {

 return bdEjecuta(Bd, [ALMACEN_PASATIEMPO], transaccion => {

  const almacenPasatiempo = transaccion.objectStore(ALMACEN_PASATIEMPO)

  almacenPasatiempo.clear()

  for (const objeto of nuevosPasatiempos) {

   almacenPasatiempo.add(objeto)

  }

 })

}

import { htmlentities } from "./lib/htmlentities.js"

import { muestraObjeto } from "./lib/muestraObjeto.js"

/**

 * @param {import("./PASATIEMPO.js").PASATIEMPO[]} pasatiempos

 */

export function renderiza(pasatiempos) {

 let render = ""

 for (const modelo of pasatiempos) {

  const nombre = htmlentities(modelo.PAS_NOMBRE)

  const searchParams = new URLSearchParams([["id", modelo.PAS_ID]])

  const params = htmlentities(searchParams.toString())

  render += /* html */

   `<li>

     <p><a href="modifica.html?${params}">${nombre}</a></p>

    </li>`

 }

 muestraObjeto(

  document,

  {

   lista: { innerHTML: render }

  }

 )

}

import { pasatiempoConsultaTodos } from "./pasatiempoConsultaTodos.js"

import { pasatiemposReemplaza } from "./pasatiemposReemplaza.js"

import { esperaUnPocoYSincroniza } from "./esperaUnPocoYSincroniza.js"

import { consume } from "./lib/consume.js"

import { enviaJsonRecibeJson } from "./lib/enviaJsonRecibeJson.js"

import { muestraError } from "./lib/muestraError.js"

import { renderiza } from "./renderiza.js"

import { validaPasatiempos } from "./validaPasatiempos.js"

export async function sincroniza() {

 try {

  if (navigator.onLine) {

   const todos = await pasatiempoConsultaTodos()

   const respuesta =

    await consume(enviaJsonRecibeJson("php/sincroniza.php", todos))

   const pasatiempos = validaPasatiempos(await respuesta.json())

   await pasatiemposReemplaza(pasatiempos)

   renderiza(pasatiempos)

  }

 } catch (error) {

  muestraError(error)

 }

 esperaUnPocoYSincroniza()

}

/**

 * @param { any } objeto

 * @returns {import("./PASATIEMPO.js").PASATIEMPO}

 */

export function validaPasatiempo(objeto) {

 if (typeof objeto.PAS_ELIMINADO !== "number" || isNaN(objeto.PAS_ELIMINADO))

  throw new Error("El campo eliminado debe ser número.")

 if (typeof objeto.PAS_ID !== "string" || objeto.PAS_ID === "")

  throw new Error("El id debe ser texto que no esté en blanco.")

 if (

  typeof objeto.PAS_MODIFICACION !== "number" || isNaN(objeto.PAS_MODIFICACION)

 )

  throw new Error("El campo modificacion debe ser número.")

 if (typeof objeto.PAS_NOMBRE !== "string" || objeto.PAS_ID === "")

  throw new Error("El nombre debe ser texto que no esté en blanco.")

 return objeto

}

import { validaPasatiempo } from "./validaPasatiempo.js"

/**

 * @param { any } objetos

 * @returns {import("./PASATIEMPO.js").PASATIEMPO[]}

 */

export function validaPasatiempos(objetos) {

 if (!Array.isArray(objetos))

  throw new Error("no se recibió un arreglo.")

 /**

  * @type {import("./PASATIEMPO.js").PASATIEMPO[]}

  */

 const arreglo = []

 for (const objeto of objetos) {

  arreglo.push(validaPasatiempo(objeto))

 }

 return arreglo

}

<?php

class Bd

{

 private static ?PDO $pdo = null;

 static function pdo(): PDO

 {

  if (self::$pdo === null) {

   self::$pdo = new PDO(

    // cadena de conexión

    "sqlite:" . __DIR__ . "/sincro.db",

    // usuario

    null,

    // contraseña

    null,

    // Opciones: pdos no persistentes y lanza excepciones.

    [PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]

   );

   self::$pdo->exec(

    'CREATE TABLE IF NOT EXISTS PASATIEMPO (

      PAS_ID TEXT NOT NULL,

      PAS_NOMBRE TEXT NOT NULL,

      PAS_MODIFICACION INTEGER NOT NULL,

      PAS_ELIMINADO INTEGER NOT NULL,

      CONSTRAINT PAS_PK

       PRIMARY KEY(PAS_ID),

      CONSTRAINT PAS_ID_NV

       CHECK(LENGTH(PAS_ID) > 0),

      CONSTRAINT PAS_NOM_NV

       CHECK(LENGTH(PAS_NOMBRE) > 0)

     )'

   );

  }

  return self::$pdo;

 }

}

<?php

require_once __DIR__ . "/Bd.php";

require_once __DIR__ . "/TABLA_PASATIEMPO.php";

/**

 * @param array{

 *   PAS_ID: string,

 *   PAS_NOMBRE: string,

 *   PAS_MODIFICACION: int,

 *   PAS_ELIMINADO: int

 *  } $modelo

 */

function pasatiempoAgrega(array $modelo)

{

 $bd = Bd::pdo();

 $stmt = $bd->prepare(

  "INSERT INTO PASATIEMPO (

    PAS_ID, PAS_NOMBRE, PAS_MODIFICACION, PAS_ELIMINADO

   ) values (

    :PAS_ID, :PAS_NOMBRE, :PAS_MODIFICACION, :PAS_ELIMINADO

   )"

 );

 $stmt->execute([

  ":PAS_ID" => $modelo[PAS_ID],

  ":PAS_NOMBRE" => $modelo[PAS_NOMBRE],

  ":PAS_MODIFICACION" => $modelo[PAS_MODIFICACION],

  ":PAS_ELIMINADO" => $modelo[PAS_ELIMINADO],

 ]);

}

<?php

require_once __DIR__ . "/Bd.php";

require_once __DIR__ . "/TABLA_PASATIEMPO.php";

/**

 * @return false | array{

 *   PAS_ID: string,

 *   PAS_NOMBRE: string,

 *   PAS_MODIFICACION: int,

 *   PAS_ELIMINADO: int

 *  }

 */

function pasatiempoBusca(string $id): false|array

{

 $bd = Bd::pdo();

 $stmt = $bd->prepare("SELECT * FROM PASATIEMPO WHERE PAS_ID = :PAS_ID");

 $stmt->execute([":PAS_ID" => $id]);

 $modelo = $stmt->fetch(PDO::FETCH_ASSOC);

 return $modelo;

}

<?php

require_once __DIR__ . "/Bd.php";

require_once __DIR__ . "/TABLA_PASATIEMPO.php";

/**

 * @return array{

 *   PAS_ID: string,

 *   PAS_NOMBRE: string,

 *   PAS_MODIFICACION: int,

 *   PAS_ELIMINADO: int

 *  }[]

 */

function pasatiempoConsultaNoEliminados()

{

 $bd = Bd::pdo();

$stmt = $bd->query(

 "SELECT * FROM PASATIEMPO WHERE PAS_ELIMINADO = 0 ORDER BY PAS_NOMBRE"

);

$lista = $stmt->fetchAll(PDO::FETCH_ASSOC);

return $lista;

}

<?php

require_once __DIR__ . "/Bd.php";

require_once __DIR__ . "/TABLA_PASATIEMPO.php";

/**

 * @param array{

 *   PAS_ID: string,

 *   PAS_NOMBRE: string,

 *   PAS_MODIFICACION: int,

 *   PAS_ELIMINADO: int

 *  } $modelo

 */

function pasatiempoModifica(array $modelo)

{

 $bd = Bd::pdo();

 $stmt = $bd->prepare(

  "UPDATE PASATIEMPO

   SET

    PAS_NOMBRE = :PAS_NOMBRE,

    PAS_MODIFICACION = :PAS_MODIFICACION,

    PAS_ELIMINADO = :PAS_ELIMINADO

   WHERE

    PAS_ID = :PAS_ID"

 );

 $stmt->execute([

  ":PAS_ID" => $modelo[PAS_ID],

  ":PAS_NOMBRE" => $modelo[PAS_NOMBRE],

  ":PAS_MODIFICACION" => $modelo[PAS_MODIFICACION],

  ":PAS_ELIMINADO" => $modelo[PAS_ELIMINADO],

 ]);

}

<?php

require_once __DIR__ . "/lib/manejaErrores.php";

require_once __DIR__ . "/lib/recibeJson.php";

require_once __DIR__ . "/lib/devuelveJson.php";

require_once __DIR__ . "/TABLA_PASATIEMPO.php";

require_once __DIR__ . "/validaPasatiempo.php";

require_once __DIR__ . "/pasatiempoAgrega.php";

require_once __DIR__ . "/pasatiempoBusca.php";

require_once __DIR__ . "/pasatiempoConsultaNoEliminados.php";

require_once __DIR__ . "/pasatiempoModifica.php";

 $lista = recibeJson();

 if (!is_array($lista)) {

  $lista = [];

 }

 foreach ($lista as $modelo) {

  $modeloEnElCliente = validaPasatiempo($modelo);

  $modeloEnElServidor = pasatiempoBusca($modeloEnElCliente[PAS_ID]);

  if ($modeloEnElServidor === false) {

   /* CONFLICTO: El modelo no ha estado en el servidor.

    * AGREGARLO solamente si no está eliminado. */

   if ($modeloEnElCliente[PAS_ELIMINADO] === 0) {

    pasatiempoAgrega($modeloEnElCliente);

   }

  } elseif (

   $modeloEnElServidor[PAS_ELIMINADO] === 0

   && $modeloEnElCliente[PAS_ELIMINADO] === 1

  ) {

   /* CONFLICTO: El registro está en el servidor, donde no se ha eliminado, pero

    * ha sido eliminado en el cliente.

    * Gana el cliente, porque optamos por no revivir lo eliminado. */

   pasatiempoModifica($modeloEnElCliente);

  } else if (

   $modeloEnElCliente[PAS_ELIMINADO] === 0

   && $modeloEnElServidor[PAS_ELIMINADO] === 0

  ) {

   /* CONFLICTO: Registros en el servidor y en el cliente. Pueden ser

    * diferentes.

    * GANA FECHA MÁS GRANDE. Cuando gana el servidor, no se hace nada. */

   if (

    $modeloEnElCliente[PAS_MODIFICACION] >

    $modeloEnElServidor[PAS_MODIFICACION]

   ) {

    // La versión del cliente es más nueva y prevalece.

    pasatiempoModifica($modeloEnElCliente);

   }

  }

 }

 $lista = pasatiempoConsultaNoEliminados();

 devuelveJson($lista);

<?php

const PASATIEMPO = "PASATIEMPO";

const PAS_ID = "PAS_ID";

const PAS_NOMBRE = "PAS_NOMBRE";

const PAS_MODIFICACION = "PAS_MODIFICACION";

const PAS_ELIMINADO = "PAS_ELIMINADO";

<?php

require_once __DIR__ . "/lib/BAD_REQUEST.php";

require_once __DIR__ . "/lib/ProblemDetailsException.php";

require_once __DIR__ . "/TABLA_PASATIEMPO.php";

function validaPasatiempo($objeto)

{

 if (!isset($objeto->PAS_ELIMINADO) || !is_int($objeto->PAS_ELIMINADO))

  throw new ProblemDetailsException([

   "status" => BAD_REQUEST,

   "title" => "El campo eliminado debe ser entero.",

   "type" => "/errors/eliminadoincorrecto.html",

  ]);

 if (

  !isset($objeto->PAS_ID)

  || !is_string($objeto->PAS_ID)

  || $objeto->PAS_ID === ""

 )

  throw new ProblemDetailsException([

   "status" => BAD_REQUEST,

   "title" => "El id debe ser texto que no esté en blanco.",

   "type" => "/errors/idincorrecto.html",

  ]);

 if (!isset($objeto->PAS_MODIFICACION) || !is_int($objeto->PAS_MODIFICACION))

  throw new ProblemDetailsException([

   "status" => BAD_REQUEST,

   "title" => "La modificacion debe ser número.",

   "type" => "/errors/modificacionincorrecta.html",

  ]);

 if (

  !isset($objeto->PAS_NOMBRE)

  || !is_string($objeto->PAS_NOMBRE)

  || $objeto->PAS_NOMBRE === ""

 )

  throw new ProblemDetailsException([

   "status" => BAD_REQUEST,

   "title" => "El nombre debe ser texto que no esté en blanco.",

   "type" => "/errors/nombreincorrecto.html",

  ]);

 return [

  PAS_ELIMINADO => $objeto->PAS_ELIMINADO,

  PAS_ID => $objeto->PAS_ID,

  PAS_NOMBRE => $objeto->PAS_NOMBRE,

  PAS_MODIFICACION => $objeto->PAS_MODIFICACION,

 ];

}