diff --git a/.gitignore b/.gitignore index f55797c..b09e7b8 100644 --- a/.gitignore +++ b/.gitignore @@ -170,3 +170,4 @@ dist # pauek users.html +*index* diff --git a/Constant/constant.ts b/Constant/constant.ts new file mode 100644 index 0000000..04cbea5 --- /dev/null +++ b/Constant/constant.ts @@ -0,0 +1,4 @@ +export const USER_API_URL = 'https://randomuser.me/api?results='; +export const USERS_TO_LOAD = 20; +export const USERS_PER_PAGE = 25; +export const MAIN_HTML = "index" diff --git a/README.md b/README.md index 7a28aee..4bf4f1f 100644 --- a/README.md +++ b/README.md @@ -20,3 +20,5 @@ Para hacer esta práctica hay que: - Al finalizar, se debe descargar un ZIP y entregar en el Campus Online de UPC School (habrá una tarea para ello). **Muy importante**: la solución debe sustituir el código original (no debe quedar rastro, ni nombres, ni nada de nada). Si bien el ejemplo puede contener partes reaprovechables, se recomienda empezar _desde cero_ (ya que eso produce un aprendizaje de mucha más profundidad). + +https://randomuser.me/documentation#howto diff --git a/Services/PrintServices.ts b/Services/PrintServices.ts new file mode 100644 index 0000000..010d5ba --- /dev/null +++ b/Services/PrintServices.ts @@ -0,0 +1,6 @@ +import { User } from "../user.js"; + +export interface PrintServices { + printPages(pages: Array, baseNamePage:string): void; + printUsersDetails(users: Array, pages: Array) :void; +} diff --git a/Services/PrintServicesImp.ts b/Services/PrintServicesImp.ts new file mode 100644 index 0000000..cbb0b59 --- /dev/null +++ b/Services/PrintServicesImp.ts @@ -0,0 +1,19 @@ +import { writeFile } from "fs/promises"; +import { PrintServices } from "./PrintServices.js"; +import { User } from "../user.js"; + +export class PrintServicesImp implements PrintServices { + constructor() {} + public async printPages(pages: Array, baseNamePage: string) { + for (let i = 0; i < pages.length; i++) { + const page = pages[i]; + await writeFile(`${baseNamePage}.html`, page); + } + } + + public async printUsersDetails(users: Array, pages: Array) { + for (let i = 0; i < pages.length; i++) { + await writeFile(`users_details/${users[i].fullName}.html`, pages[i]); + } + } +} \ No newline at end of file diff --git a/Services/RenderServices.ts b/Services/RenderServices.ts new file mode 100644 index 0000000..79eff58 --- /dev/null +++ b/Services/RenderServices.ts @@ -0,0 +1,5 @@ +import { User } from "../user.js"; +export interface RenderServices{ + renderUsers(User: Array): Array ; + renderUsersDetails(user: Array): Array ; +}; \ No newline at end of file diff --git a/Services/RenderServicesImp.ts b/Services/RenderServicesImp.ts new file mode 100644 index 0000000..14d1f49 --- /dev/null +++ b/Services/RenderServicesImp.ts @@ -0,0 +1,342 @@ +import { RenderServices } from "./RenderServices.js"; +import { User } from "../user.js"; +import { + USERS_TO_LOAD, + USERS_PER_PAGE, + MAIN_HTML, +} from "../Constant/constant.js"; + +export class RenderServicesImp implements RenderServices { + constructor() {} + + private renderHead(title: string): string { + return ` + + + + ${title} + + `; + } + + private rendeBody(users: Array): string { + let html = + `
+

Lista de usuarios obteneidos de la API: randomuser.me

+
`; + for (const user of users) { + html += `
+
+
${user.fullName}
+
+ +
+
Email:
+ +
Celular:
+ +
+ Ver más +
`; + } + html += "
"; + return html; + } + + public renderUsers(users: Array): Array { + const pages: number = Math.ceil(USERS_TO_LOAD / USERS_PER_PAGE); + const allHtmlPages: Array = []; + let htmlPage: string = ""; + let from: number = 0; + let until: number = USERS_PER_PAGE; + + for (let i: number = 0; i < pages; i++) { + const sliceOfUsers = users.slice(from, until); + htmlPage = ` + ${this.renderHead(`Lista de Usuarios`)} + + ${this.rendeBody(sliceOfUsers)} + + `; + + allHtmlPages.push(htmlPage); + + from = until + 1; + until = + until + USERS_PER_PAGE <= users.length - 1 + ? until + USERS_PER_PAGE + : users.length - 1; + } + + return allHtmlPages; + } + + private renderUserDetailHead(title: string): string { + return ` + + + + ${title} + + + + `; + } + + private rendeUserDetailBody(user: User): string { + const html = `
+
+ +
+
${user.fullName}
+
+
+
+ +
Acerca
+
+
+
Informacion de contacto
+
Email:
+
+ ${user.email} +
+
Celular:
+
${user.cell}
+ +
+ +
Localizacion
+
+
+ +
Residencia
+
Calle:
+
${user.location.street.number} ${user.location.street.name}
+
Ciudad:
+
${user.location.city}
+
Estado:
+
${user.location.state}
+
Pais:
+
${user.location.country}
+
Codigo Postal:
+
${user.location.postcode}
+
+
+
+
Donde vive ${user.fullName}:
+
+
+
+ +`; + + return html; + } + + public renderUsersDetails(users: Array): Array { + const allHtmlPages: Array = users.map((user: User) => { + let htmlPage: string = ""; + htmlPage = ` + ${this.renderUserDetailHead(`Detalles de contacto: ${user.fullName}`)} + + ${this.rendeUserDetailBody(user)} + + `; + + return htmlPage; + }); + + return allHtmlPages; + } +} diff --git a/Services/UserServices.ts b/Services/UserServices.ts new file mode 100644 index 0000000..575a89b --- /dev/null +++ b/Services/UserServices.ts @@ -0,0 +1,4 @@ +import { User } from "../user.js"; +export interface UserServices{ + getUsers(n: number): Promise; +}; \ No newline at end of file diff --git a/Services/UserServicesImp.ts b/Services/UserServicesImp.ts new file mode 100644 index 0000000..0528725 --- /dev/null +++ b/Services/UserServicesImp.ts @@ -0,0 +1,24 @@ +import { UserServices } from "./UserServices.js"; +import { User } from "../user.js"; +import { USER_API_URL } from "../Constant/constant.js"; + +export class UserServicesImp implements UserServices { + constructor() {} + + public getUsers = async (n: number) => { + const response = await fetch(`${USER_API_URL}${n}`); + const { results } = (await response.json()) as { results: any[] }; + const users: Array = []; + for (const { + gender, + name, + location, + email, + picture, + cell, + } of results) { + users.push(new User(gender, name, location, email, picture, cell)); + } + return users; + }; +} diff --git a/img/contacto.png b/img/contacto.png new file mode 100644 index 0000000..763f41c Binary files /dev/null and b/img/contacto.png differ diff --git a/img/localizacion.png b/img/localizacion.png new file mode 100644 index 0000000..7fb3feb Binary files /dev/null and b/img/localizacion.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..902b9e4 --- /dev/null +++ b/index.html @@ -0,0 +1,187 @@ + + + + + + + Document + + + + + +
+
+
+
Milla Maijala
+
+ +
+
Email:
+ +
+ +
+
+
+
Josefine Kilian
+
+ +
+
Email:
+ +
+ +
+
+
+
Milla Maijala
+
+ +
+
Email:
+ +
+ +
+
+
+
Josefine Kilian
+
+ +
+
Email:
+ +
+ +
+
+
+
Milla Maijala
+
+ +
+
Email:
+ +
+ +
+
+
+
Josefine Kilian
+
+ +
+ + +
+ +
+
+ + + diff --git a/main.ts b/main.ts index 9e28d93..6e642f3 100644 --- a/main.ts +++ b/main.ts @@ -1,8 +1,18 @@ -import { writeFile } from "fs/promises"; -import { render } from "./render.js"; -import { loadUsers } from "./users.js"; +import { UserServices } from "./Services/UserServices.js"; +import { UserServicesImp } from "./Services/UserServicesImp.js"; +import { RenderServices } from "./Services/RenderServices.js"; +import { RenderServicesImp } from "./Services/RenderServicesImp.js"; +import { USERS_TO_LOAD, MAIN_HTML} from "./Constant/constant.js"; +import { PrintServices } from "./Services/PrintServices.js"; +import { PrintServicesImp } from "./Services/PrintServicesImp.js"; -const users = await loadUsers(100); -const html = render(users); -await writeFile('users.html', html); +const userService: UserServices = new UserServicesImp(); +const renderServices: RenderServices = new RenderServicesImp(); +const printServices: PrintServices = new PrintServicesImp(); +const users = await userService.getUsers(USERS_TO_LOAD); +const htmlUser = await renderServices.renderUsers(users); +const htmlUserDetails = await renderServices.renderUsersDetails(users); + +await printServices.printPages(htmlUser, MAIN_HTML); +await printServices.printUsersDetails(users, htmlUserDetails); \ No newline at end of file diff --git a/package.json b/package.json index eb860b5..349ee4c 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "json-to-html", + "name": "entrega_2", "module": "main.ts", "type": "module", "devDependencies": { diff --git a/render.ts b/render.ts deleted file mode 100644 index 268c9a3..0000000 --- a/render.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { User } from "./users.js"; - -const head = (title: string) => ` - - - - - ${title} - -`; - -const renderUsers = (users: Array) => { - let html = ""; - for (const user of users) { - html += `
- -
-
${user.fullName}
- -
-
`; - } - return html; -} - -export const render = (users: Array) => { - return ` - - ${head("User List")} - - ${renderUsers(users)} - -`; -}; diff --git a/user.json b/user.json deleted file mode 100644 index fa85a61..0000000 --- a/user.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "results": [ - { - "gender": "female", - "name": { "title": "Mrs", "first": "Keira", "last": "Thomas" }, - "location": { - "street": { "number": 9173, "name": "Tweed Street" }, - "city": "Christchurch", - "state": "Southland", - "country": "New Zealand", - "postcode": 97339, - "coordinates": { "latitude": "48.0424", "longitude": "81.2123" }, - "timezone": { "offset": "+5:45", "description": "Kathmandu" } - }, - "email": "keira.thomas@example.com", - "login": { - "uuid": "8b9bee1a-f377-401e-8711-2ffea359d80f", - "username": "bigdog956", - "password": "autumn", - "salt": "lDEag6XE", - "md5": "84da8bc58910b21de65e8f600d62ee0a", - "sha1": "dbd9336ca04ce15fe6917146e3f3ffc659e0a777", - "sha256": "823017cba8f1c50b0f4bac69b14402255374a1feb344ff99a8f1bdc04b4a4943" - }, - "dob": { "date": "1999-02-26T03:04:30.306Z", "age": 24 }, - "registered": { "date": "2020-10-23T04:15:27.351Z", "age": 2 }, - "phone": "(236)-850-9076", - "cell": "(536)-828-7851", - "id": { "name": "", "value": null }, - "picture": { - "large": "https://randomuser.me/api/portraits/women/64.jpg", - "medium": "https://randomuser.me/api/portraits/med/women/64.jpg", - "thumbnail": "https://randomuser.me/api/portraits/thumb/women/64.jpg" - }, - "nat": "NZ" - } - ], - "info": { - "seed": "5cb1c03bed2a1099", - "results": 1, - "page": 1, - "version": "1.4" - } -} diff --git a/users.ts b/user.ts similarity index 52% rename from users.ts rename to user.ts index 35ccb50..9f70443 100644 --- a/users.ts +++ b/user.ts @@ -1,4 +1,3 @@ - export class User { constructor( public gender: "male" | "female", @@ -13,16 +12,19 @@ export class User { state: string; country: string; postcode: number; - }, - public login: { - username: string; - password: string; + coordinates: { + latitude: string; + longitude: string; + }; }, public email: string, public picture: { large: string; medium: string; thumbnail: string; + }, + public cell: { + cell: string; } ) {} @@ -30,13 +32,3 @@ export class User { return `${this.name.first} ${this.name.last}`; } } - -export const loadUsers = async (n: number) => { - const response = await fetch(`https://randomuser.me/api?results=${n}`); - const { results } = (await response.json()) as { results: any[] }; - const users: Array = []; - for (const { gender, name, location, login, email, picture } of results) { - users.push(new User(gender, name, location, login, email, picture)); - } - return users; -}; \ No newline at end of file diff --git a/users_details/.gitkeep b/users_details/.gitkeep new file mode 100644 index 0000000..64e1fb3 --- /dev/null +++ b/users_details/.gitkeep @@ -0,0 +1 @@ +archivo no util, solo para mantener la carpeta padrs \ No newline at end of file