Git Product home page Git Product logo

gymscriptfe's Introduction

TpDsw | Repositorio Front End

Trabajo Practico de Desarrollo de Software UTN FRRO

Integrantes:

  • Fani, Nicolás | Legajo: 49449
  • Fina, Gino | Legajo: 49721
  • Sanchez, Franco Nahuel | Legajo: 49738
  • Mongelos, Manuel | Legajo: 48959
  • Zubiri, Joaquin | Legajo: 50206

Repositorios

Visualizacion del proyecto

Pagina Web

Video Demostracion

(Viejo) Video Demostracion - Primera Version

Note

Es posible que los datos provenientes de la BD tarden en cargarse, esto se debe dado a que luego de un periodo de inactividad el backend entra en estado de hibernacion y cuando se le realiza una consulta debe volver a activarse.

Important

Dado que estamos usando servidores gratuitos, las imagenes no son persistentes y se borran automaticamente luego de un corto plazo de tiempo

Comandos Útiles

Principal

Note

En la instalacion se instala tambien la versión adecuada de angular

  • Instalación: npm run start
  • Iniciar proyecto
  • Deploy: ng deploy

Tests

  • Unit Testing: npm run test
  • E2E Testing:
    • Via Interfaz: npm run cypress:open
    • Via consola: npm run test:e2e

gymscriptfe's People

Contributors

fraancosan avatar joaquinzubiri avatar nicofani avatar manumong avatar utnros avatar cneopompeyo avatar imgbotapp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

gymscriptfe's Issues

Front comentarios para promocion

En el css deberiamos usar variables para los colores

src/app/components/loading/loading.component.ts
No es muy correcto en angular hacer este tipo de manipulaciones del dom
Se podria resolver con algunas variables en el body

usan let en vez de const

src/app/app.component.ts
eliminemos metodos vacios veo en varios archivos aparte de este

tambien veo algo de codigo en castellano, recomiendo poner todo en ingles para evitar el spanglish

no es muy correcto poner puboic un service con una variable compartida asi com oesta
tal vez deberia ser una suscripcion

Eliminemos archivos vacios como: src/app/app.component.css

src/app/login-form/login-form.component.ts
no recomiendo usar getters y setters a menos quie sea estrictamente neceario poir una depéndencia

Tampoco es conveniente acceder directamente a localStorage deberiamos crear un service e injectarlo

e injectar el objeto localStorage

import { JwtHelperService } from '@auth0/angular-jwt';
no veo muy correcto instanciar este objeto de forma directa no podriamos crear un provider e injectarlo via DI

veo que tienen mezcladas las comillas dobles y simples.

En el css tambien veo convenciones mezcladas, camelCase, kebab-case tenemos que usar soloi una siempre la misma
en css recomiendo kebab-case, en otros archivos tambien veo snake_case
y etilos por #ids lo cual tampoco se recomienda
vean https://dev.to/clairecodes/reasons-not-to-use-ids-in-css-4ni4

Tambien debemos evitar estilar sobre tags
recomiendo usar solo clases

.final-text p {
margin-right: 10px;
}

aca deberiamos agregar una clase al p y estilar eso

src/app/components/listados/listados.component.ts
Aca creo que aramron algo demasiado generico ya lo hablamos en clase
Igual me parece ingenioso el enfoque.

de todas formas les dejo comentarios

Evitemos comentarios explicando lo que hace el codigo
Vean: https://www.baeldung.com/cs/clean-code-comments

Codigo spanglish
this.addRegistrosDisabled = false;
Let en vez de const
let fila = this.obtenerFila(idItem);

no se recominda altgerar el flujo de los for
if (item[key] == this.ultimoEditado[key]){
delete item[key];
} else {
continue
}

no conviene ver elementos del dom de forma directa
let filas = this.tablaListados.nativeElement.rows.length;

deberias obtener las cantidades de acuerdo a los elementos en el modelo
en oso que se recupero del servicio

no conviene modificar imperativamente los elementos del dom es mejor hacerlo de forma declarativa con angular
modificando el modelo y renderizando de vuerlta la tabla

hjace lo miusmo con el disabbled de alugunos elementos
tambien aca:
visible(fila:HTMLTableRowElement, posicion: any, mostrar: any, ocultar:any) {

la idea central de angular es evitar justamente estas documentaciones

src/app/components/card/card.component.ts

deberian pasar el parametro idPlan a traves del url no confiar en el localStorage ya que otra pestaña podria interfertir
ademas no se puede guardar el link si usan esta tecnica

src/app/components/card/card.component.html
mismo con los comments

src/app/components/spinner/spinner.component.css
Eliminemos archivos vacios

src/app/utils/auth.guard.ts

En vez de agregar una condicion para ver si esta en el dash board deberiamos tener diferentes guards para admin y para no admin

Revisen los requisitos para promocion por si les falta algo y con estos cambios estariamos la parte de front

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.