From 95c15d48ab96e9361eadb6ebb37321f30e233637 Mon Sep 17 00:00:00 2001 From: sanchezvem Date: Tue, 4 Nov 2025 09:43:48 +0100 Subject: [PATCH] step 5 --- first-app/package-lock.json | 51 +++++++++++-------- first-app/src/app/home/home.html | 7 ++- first-app/src/app/home/home.ts | 26 ++++++++-- .../app/housing-location/housing-location.css | 30 +++++++++++ .../app/housing-location/housing-location.ts | 15 ++++++ first-app/src/app/housinglocation.ts | 10 ++++ 6 files changed, 110 insertions(+), 29 deletions(-) create mode 100644 first-app/src/app/housing-location/housing-location.css create mode 100644 first-app/src/app/housing-location/housing-location.ts create mode 100644 first-app/src/app/housinglocation.ts diff --git a/first-app/package-lock.json b/first-app/package-lock.json index 43c6293..a5f2ac5 100644 --- a/first-app/package-lock.json +++ b/first-app/package-lock.json @@ -480,6 +480,18 @@ } } }, + "node_modules/@angular/build/node_modules/@types/node": { + "version": "24.10.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.0.tgz", + "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "undici-types": "~7.16.0" + } + }, "node_modules/@angular/build/node_modules/@vitejs/plugin-basic-ssl": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.1.0.tgz", @@ -570,7 +582,6 @@ "integrity": "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -923,7 +934,6 @@ "integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@inquirer/checkbox": "^4.2.1", "@inquirer/confirm": "^5.1.14", @@ -1055,6 +1065,18 @@ "listr2": "9.0.1" } }, + "node_modules/@angular/cli/node_modules/@types/node": { + "version": "24.10.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.0.tgz", + "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "undici-types": "~7.16.0" + } + }, "node_modules/@angular/cli/node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -1163,7 +1185,6 @@ "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.6.tgz", "integrity": "sha512-+gHMuFe0wz4f+vfGZ2q+fSQSYaY7KlN7QdDrFqLnA7H2sythzhXvRbXEtp4DkPjihh9gupXg2MeLh1ROy5AfSw==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1180,7 +1201,6 @@ "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.6.tgz", "integrity": "sha512-OdjXBsAsnn7qiW6fSHClwn9XwjVxhtO9+RbDc6Mf+YPCnJq0s8T78H2fc8VdJFp/Rs+tMZcwwjd9VZPm8+2XWA==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1194,7 +1214,6 @@ "integrity": "sha512-VOFRBx9fBt2jW9I8qD23fwGeKxBI8JssJBAMqnFPl3k59VJWHQi6LlXZCLCBNdfwflTJdKeRvdgT51Q0k6tnFQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "7.28.3", "@jridgewell/sourcemap-codec": "^1.4.14", @@ -1227,7 +1246,6 @@ "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.6.tgz", "integrity": "sha512-sDURQWnjwE4Y750u/5qwkZEYMoI4CrKghnx4aKulxCnohR3//C78wvz6p8MtCuqYfzGkdQZDYFg8tgAz17qgPw==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1271,7 +1289,6 @@ "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.6.tgz", "integrity": "sha512-gFp1yd+HtRN8XdpMatRLO5w6FLIzsnF31lD2Duo4BUTCoMAMdfaNT6FtcvNdKu7ANo27Ke26fxEEE2bh6FU98A==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1338,7 +1355,6 @@ "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -3847,8 +3863,7 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.126.tgz", "integrity": "sha512-OTcgaiwfGFBKacvfwuHzzn1KLxH/er8mluiy8/uM3sGXHaRe73RrSIj01jow9t4kJEW633Ov+cOexXeiApTyAw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@yarnpkg/lockfile": { "version": "1.1.0", @@ -4136,7 +4151,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", @@ -4908,7 +4922,6 @@ "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "accepts": "^2.0.0", "body-parser": "^2.2.0", @@ -5699,7 +5712,6 @@ "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cli-truncate": "^4.0.0", "colorette": "^2.0.20", @@ -7212,7 +7224,6 @@ "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz", "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==", "license": "Apache-2.0", - "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -7251,7 +7262,6 @@ "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -7931,8 +7941,7 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/tuf-js": { "version": "3.1.0", @@ -7970,7 +7979,6 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -7985,7 +7993,8 @@ "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==", "dev": true, "license": "MIT", - "optional": true + "optional": true, + "peer": true }, "node_modules/unique-filename": { "version": "4.0.0", @@ -8329,7 +8338,6 @@ "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } @@ -8348,8 +8356,7 @@ "version": "0.15.1", "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz", "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==", - "license": "MIT", - "peer": true + "license": "MIT" } } } diff --git a/first-app/src/app/home/home.html b/first-app/src/app/home/home.html index 78f935e..22af009 100644 --- a/first-app/src/app/home/home.html +++ b/first-app/src/app/home/home.html @@ -1,6 +1,9 @@
-
- +
+
+ +
+
\ No newline at end of file diff --git a/first-app/src/app/home/home.ts b/first-app/src/app/home/home.ts index 491f18e..d0cd17c 100644 --- a/first-app/src/app/home/home.ts +++ b/first-app/src/app/home/home.ts @@ -1,9 +1,25 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; +import {HousingLocation} from '../housing-location/housing-location'; //Importation du component ici pour l'intégrer à la page + +import {HousingLocationInfo} from '../housinglocation'; // Importation de l'interface @Component({ - selector: 'app-home', - templateUrl: './home.html', - styleUrls: ['./home.css'], + selector: 'app-home', + imports: [HousingLocation], + templateUrl: './home.html', + styleUrls: ['./home.css'], }) -export class Home {} +export class Home { + readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common'; + housingLocation: HousingLocationInfo = { + id: 9999, + name: 'Test Home', + city: 'Test city', + state: 'ST', + photo: `${this.baseUrl}/example-house.jpg`, + availableUnits: 99, + wifi: true, + laundry: false, + }; +} diff --git a/first-app/src/app/housing-location/housing-location.css b/first-app/src/app/housing-location/housing-location.css new file mode 100644 index 0000000..925850e --- /dev/null +++ b/first-app/src/app/housing-location/housing-location.css @@ -0,0 +1,30 @@ +.listing { + background: var(--accent-color); + border-radius: 30px; + padding-bottom: 30px; +} +.listing-heading { + color: var(--primary-color); + padding: 10px 20px 0 20px; +} +.listing-photo { + height: 250px; + width: 100%; + object-fit: cover; + border-radius: 30px 30px 0 0; +} +.listing-location { + padding: 10px 20px 20px 20px; +} +.listing-location::before { + content: url("/assets/location-pin.svg") / ""; +} +section.listing a { + padding-left: 20px; + text-decoration: none; + color: var(--primary-color); +} +section.listing a::after { + content: "\203A"; + margin-left: 5px; +} \ No newline at end of file diff --git a/first-app/src/app/housing-location/housing-location.ts b/first-app/src/app/housing-location/housing-location.ts new file mode 100644 index 0000000..c96a357 --- /dev/null +++ b/first-app/src/app/housing-location/housing-location.ts @@ -0,0 +1,15 @@ +import {Component, input} from '@angular/core'; // Importation de la fonction input() et des components +import {HousingLocationInfo} from '../housinglocation'; // Interface +@Component({ + selector: 'app-housing-location', + imports: [], + template: ` +

+ housing-location works! +

+ `, + styleUrls: ['./housing-location.css'], +}) +export class HousingLocation { + housingLocation = input.required(); +} diff --git a/first-app/src/app/housinglocation.ts b/first-app/src/app/housinglocation.ts new file mode 100644 index 0000000..fed12ae --- /dev/null +++ b/first-app/src/app/housinglocation.ts @@ -0,0 +1,10 @@ +export interface HousingLocationInfo { + id: number; + name: string; + city: string; + state: string; + photo: string; + availableUnits: number; + wifi: boolean; + laundry: boolean; +} \ No newline at end of file