diff --git a/README.md b/README.md index ba1f18229105420f6fcaeb5233178454b77f9b36..ecacc7c109af48e6c9929dd19274a3bcec023448 100644 --- a/README.md +++ b/README.md @@ -125,7 +125,7 @@ La api tiene dos endpoints: lista de stampers de ese objecto junto al nro de bloque en el que lo hizo. ### UI -La primera vez hay que ejecutar lo siguiente dentro del directorio ```ui``` +Para el desarrollo de la UI, la primera vez hay que ejecutar lo siguiente dentro del directorio ```ui``` ```bash npm install ``` @@ -134,6 +134,8 @@ La aplicación está escrita con Vue.js. Para correr el servicio hay que ejecuta ```bash npm run serve ``` +**Ver más detalles en el README dentro del directorio ```ui```** + ## Instalación en producción Para correr en producción se deben compilar la UI y la API. Una vez hecho eso ya se está listo para correr la API y tirar los assets de UI donde se desee. @@ -197,29 +199,37 @@ node dist/index.js ### Deploy de la UI Al buildear se crea el archivo ```ui/dist/index.html``` y todo el resto de los recursos necesarios. Al acceder al index.html sólo se ve el componente de Stampeo. El html se ve asÃ: + ```html -<!DOCTYPE html> -<html lang=en> - <head> - <meta charset=utf-8> - <meta http-equiv=X-UA-Compatible content="IE=edge"> - <meta name=viewport content="width=device-width,initial-scale=1"> - <link rel=icon href=/favicon.ico> - <title>ui</title> - <link href=/css/app.47c5343e.css rel=preload as=style> - <link href=/js/app.fa8c25b5.js rel=preload as=script> - <link href=/js/chunk-vendors.bbeb7c49.js rel=preload as=script> - <link href=/css/app.47c5343e.css rel=stylesheet> - </head> - <body> - <noscript><strong>We're sorry but ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript> - <div id=app apiurl=http://localhost:3000></div> - <script src=/js/chunk-vendors.bbeb7c49.js></script><script src=/js/app.fa8c25b5.js></script> - </body> -</html> +<div id="app" apiurl=https://tsa2.buenosaires.gob.ar + lb_00=" El archivo " + lb_01=" fue enviado con éxito para ser sellado" + lb_02="Se ha producido un error al intentar sellar " + lb_03=" se encuentra sellado por: " + lb_04=" en el bloque " + lb_05="No se ha podido verificar el archivo " + lb_06="Volver a Sellar o Verificar" + lb_07="Cargando" + lb_08="Arrastrá archivos aquÃ<br>ó" + lb_09="Seleccioná archivos <span class='sr-only'>para Sellar o Verificar</span>" + lb_10="Nombre del archivo: " + lb_11="Hash del archivo: " + lb_12="Sellar" + lb_13="Verificar" + lb_14=" Agregar archivos" + lb_15=" Copiar" + lb_16="Enlace de verificación" + lb_17="Remover archivo" + lb_18="Seleccionar otros archivos" + lb_19=" Solo se pueden agregar " + lb_20=" archivos por vez"> +</div> ``` -Para embeberlo en otro contexto hay que copiar los ```<link />``` y el ```<div id=app>``` y ```<script />``` -del body. +Para embeberlo en otro contexto hay que copiar el div ```<div id=app>```, los estilos ```link``` y el script ```tsa2.js``` del body. + +También se puede cambiar los textos de la app modificando todos los labels (```lb_```) que figuran como atributos de ```<div id=app>``` según corresponda. + +Es **importante** notar que la url de la api se configura en el atributo ***apiurl*** del div con id ```app```. Esto tiene que apuntar a la URL donde se eligió ejecutar la API. En este caso apunta a la API de producción hosteada por buenosaires.gob.ar -**Es importante notar que la url de la api se configura en el atributo ***apiurl*** del div con id ```app```. Esto tiene que apuntar a la URL donde se eligió ejecutar la API** +**Ver más detalles en el README dentro del directorio ```ui```** diff --git a/ui/README.md b/ui/README.md index df4e52b6176ee72843ae2777abfe10d7544b70b1..83feb3be6522453bf19ff033718960d4403f43d8 100644 --- a/ui/README.md +++ b/ui/README.md @@ -1,29 +1,76 @@ -# ui +# UI -## Project setup +## Producción + +Si no se requieren cambios en la funcionalidad de la UI, se puede utilizar solamente la carpeta ```dist``` que ya se encuentra lista para su uso. No hace falta compilar nada, ni correr npm. Ahà mismo se pueden cambiar los estilos e imágenes de ser necesario. + +### Cambios de Estilos + +Modificar los estilos dentro del directorio ```dist/static/css/style.css``` y ```dist/static/css/tsa2.css``` + +También se puede cambiar los textos de la app modificando todos los labels (```lb_```) que figuran como atributos de ```<div id=app>``` según corresponda. + +Es **importante** notar que la url de la api se configura en el atributo ***apiurl*** del div con id ```app```. Esto tiene que apuntar a la URL donde se eligió ejecutar la API. En este caso apunta a la API de producción hosteada por buenosaires.gob.ar + + +```html +<div id="app" apiurl=https://tsa2.buenosaires.gob.ar + lb_00=" El archivo " + lb_01=" fue enviado con éxito para ser sellado" + lb_02="Se ha producido un error al intentar sellar " + lb_03=" se encuentra sellado por: " + lb_04=" en el bloque " + lb_05="No se ha podido verificar el archivo " + lb_06="Volver a Sellar o Verificar" + lb_07="Cargando" + lb_08="Arrastrá archivos aquÃ<br>ó" + lb_09="Seleccioná archivos <span class='sr-only'>para Sellar o Verificar</span>" + lb_10="Nombre del archivo: " + lb_11="Hash del archivo: " + lb_12="Sellar" + lb_13="Verificar" + lb_14=" Agregar archivos" + lb_15=" Copiar" + lb_16="Enlace de verificación" + lb_17="Remover archivo" + lb_18="Seleccionar otros archivos" + lb_19=" Solo se pueden agregar " + lb_20=" archivos por vez"> +</div> + ``` + +Para embeberlo en otro contexto hay que copiar el div ```<div id=app>```, los estilos ```link``` y el script ```tsa2.js``` del body. + +## Desarrollo + +En caso de necesitar realizar cambios en la UI. + +### 1. Setup del proyecto ``` npm install ``` -### Compiles and hot-reloads for development +### 2. Compila y tiene un live-reload para desarrollar ``` npm run serve ``` -### Compiles and minifies for production +**Importante:** Siempre tratar de poner en el wording/texto de la app como atributo en el HTML para poder facilitar los cambios de texto/traducciones sin tener la necesidad de compilar. + +### 3. Después de realizar los cambios es necesario hacer un build para compilar y minimizar en la carpeta ```dist```. ``` npm run build ``` -### Run your tests +### 4. Corré el test para verificar que no haya errores ``` npm run test ``` -### Lints and fixes files +### 5. Arreglo de lints ``` npm run lint ``` -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). +### Si se requiere más configuración +Ver [Configuration Reference](https://cli.vuejs.org/config/).