From 981db64f3a9f224cfdf2f5f11f35a5d8fb325717 Mon Sep 17 00:00:00 2001 From: Unknown Date: Tue, 5 Mar 2019 11:03:33 +0100 Subject: [PATCH 1/4] timeline component --- package-lock.json | 77 ++++++++++++++++----- src/app/app.component.html | 2 + src/app/app.module.ts | 4 +- src/app/timeline/timeline.component.html | 1 + src/app/timeline/timeline.component.less | 0 src/app/timeline/timeline.component.spec.ts | 25 +++++++ src/app/timeline/timeline.component.ts | 29 ++++++++ 7 files changed, 118 insertions(+), 20 deletions(-) create mode 100644 src/app/timeline/timeline.component.html create mode 100644 src/app/timeline/timeline.component.less create mode 100644 src/app/timeline/timeline.component.spec.ts create mode 100644 src/app/timeline/timeline.component.ts diff --git a/package-lock.json b/package-lock.json index e657e1a..db09c8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1159,6 +1159,7 @@ "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, + "optional": true, "requires": { "delegates": "^1.0.0", "readable-stream": "^2.0.6" @@ -2375,7 +2376,8 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "constants-browserify": { "version": "1.0.0", @@ -2771,7 +2773,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", - "dev": true + "dev": true, + "optional": true }, "depd": { "version": "1.1.2", @@ -3805,7 +3808,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3826,12 +3830,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3846,17 +3852,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3973,7 +3982,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3985,6 +3995,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3999,6 +4010,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4006,12 +4018,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -4030,6 +4044,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4110,7 +4125,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4122,6 +4138,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4207,7 +4224,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -4243,6 +4261,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4262,6 +4281,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4305,12 +4325,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -4319,6 +4341,7 @@ "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", "dev": true, + "optional": true, "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", @@ -4331,6 +4354,7 @@ "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, + "optional": true, "requires": { "aproba": "^1.0.3", "console-control-strings": "^1.0.0", @@ -4368,7 +4392,8 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=", - "dev": true + "dev": true, + "optional": true }, "get-stream": { "version": "3.0.0", @@ -4584,7 +4609,8 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", - "dev": true + "dev": true, + "optional": true }, "has-value": { "version": "1.0.0", @@ -5331,7 +5357,8 @@ "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", - "dev": true + "dev": true, + "optional": true }, "is-windows": { "version": "1.0.2", @@ -5930,6 +5957,7 @@ "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, + "optional": true, "requires": { "graceful-fs": "^4.1.2", "parse-json": "^2.2.0", @@ -5942,7 +5970,8 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true + "dev": true, + "optional": true } } }, @@ -6217,7 +6246,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz", "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", - "dev": true + "dev": true, + "optional": true }, "map-visit": { "version": "1.0.0", @@ -6844,6 +6874,7 @@ "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, + "optional": true, "requires": { "are-we-there-yet": "~1.1.2", "console-control-strings": "~1.1.0", @@ -7913,6 +7944,7 @@ "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=", "dev": true, + "optional": true, "requires": { "load-json-file": "^1.0.0", "normalize-package-data": "^2.3.2", @@ -7924,6 +7956,7 @@ "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz", "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=", "dev": true, + "optional": true, "requires": { "graceful-fs": "^4.1.2", "pify": "^2.0.0", @@ -7934,7 +7967,8 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true + "dev": true, + "optional": true } } }, @@ -7943,6 +7977,7 @@ "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz", "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=", "dev": true, + "optional": true, "requires": { "find-up": "^1.0.0", "read-pkg": "^1.0.0" @@ -7953,6 +7988,7 @@ "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", "dev": true, + "optional": true, "requires": { "path-exists": "^2.0.0", "pinkie-promise": "^2.0.0" @@ -7963,6 +7999,7 @@ "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", "dev": true, + "optional": true, "requires": { "pinkie-promise": "^2.0.0" } @@ -9245,6 +9282,7 @@ "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz", "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", "dev": true, + "optional": true, "requires": { "is-utf8": "^0.2.0" } @@ -10559,6 +10597,7 @@ "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, + "optional": true, "requires": { "string-width": "^1.0.2 || 2" } diff --git a/src/app/app.component.html b/src/app/app.component.html index 0f3d9d8..4e45719 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -18,4 +18,6 @@

Angular bl + + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..ce244ee 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,10 +3,12 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { TimelineComponent } from './timeline/timeline.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + TimelineComponent ], imports: [ BrowserModule, diff --git a/src/app/timeline/timeline.component.html b/src/app/timeline/timeline.component.html new file mode 100644 index 0000000..e0d4a08 --- /dev/null +++ b/src/app/timeline/timeline.component.html @@ -0,0 +1 @@ +
  • {{tweet.created_at | date:'short' }} - {{tweet.user}} : {{tweet.text}}
    • \ No newline at end of file diff --git a/src/app/timeline/timeline.component.less b/src/app/timeline/timeline.component.less new file mode 100644 index 0000000..e69de29 diff --git a/src/app/timeline/timeline.component.spec.ts b/src/app/timeline/timeline.component.spec.ts new file mode 100644 index 0000000..9c6c1e6 --- /dev/null +++ b/src/app/timeline/timeline.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TimelineComponent } from './timeline.component'; + +describe('TimelineComponent', () => { + let component: TimelineComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TimelineComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TimelineComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/timeline/timeline.component.ts b/src/app/timeline/timeline.component.ts new file mode 100644 index 0000000..9b8b4d4 --- /dev/null +++ b/src/app/timeline/timeline.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-timeline', + templateUrl: './timeline.component.html', + styleUrls: ['./timeline.component.less'] +}) +export class TimelineComponent implements OnInit { + tweets = [ + { + created_at: 'Wed Apr 05 12:30:12 +0000 2017', + id: 1, + text: 'Je mets les pieds où je veux, Little John… et c\'est souvent dans la gueule.', + user: 'James Braddock' + }, + { + created_at: 'Thu Apr 06 15:24:15 +0000 2017', + id: 2, + text: 'Qui a deux pouces et qui s\'en fout ? Bob Kelso !', + user: 'Bob kelso' + }, + ]; + + constructor() { } + + ngOnInit() { + } + +} From f65cc97aac648f3e557f18f4545a1f8673247688 Mon Sep 17 00:00:00 2001 From: HugoCapocci Date: Mon, 4 Mar 2019 23:04:03 +0100 Subject: [PATCH 2/4] Add like feature --- README.md | 18 +++++++++++++++++- src/app/timeline/timeline.component.html | 8 ++++++-- src/app/timeline/timeline.component.less | 4 ++++ src/app/timeline/timeline.component.ts | 11 +++++++++++ src/app/tweet.ts | 3 ++- 5 files changed, 40 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 54b99ae..6889c25 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# AngularShopTutorial +# AngularTutorial This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.2. @@ -25,3 +25,19 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac ## Further help To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). + +
    + +# Exercice + +## Setup: + + - Fork the project, and clone it + - create your own dev branch `git checkout -b dev` + - launch `npm install` to download dependencies + +## Sync with forked repository: + + - use command `git fetch upstream` to retrieve master branch from forked repository. It will create a local upstream/master branch. + - go to your local master branch: `git checkout master` + - merge the upstream master to your local master: ` git merge upstream/master`. You're up to date! diff --git a/src/app/timeline/timeline.component.html b/src/app/timeline/timeline.component.html index 57f57b3..79f0533 100644 --- a/src/app/timeline/timeline.component.html +++ b/src/app/timeline/timeline.component.html @@ -7,8 +7,12 @@ {{ tweet.text }}
    - - {{ tweet.favoriteCount }} + + {{ tweet.favoriteCount }}
    diff --git a/src/app/timeline/timeline.component.less b/src/app/timeline/timeline.component.less index c2527ec..b8ecc35 100644 --- a/src/app/timeline/timeline.component.less +++ b/src/app/timeline/timeline.component.less @@ -61,3 +61,7 @@ cursor: pointer; } } + +.favorite-count { + margin-left: 4px; +} diff --git a/src/app/timeline/timeline.component.ts b/src/app/timeline/timeline.component.ts index 811ec63..a83857c 100644 --- a/src/app/timeline/timeline.component.ts +++ b/src/app/timeline/timeline.component.ts @@ -40,4 +40,15 @@ export class TimelineComponent implements OnInit { this.tweets.push(tweet); } + likeTweet(id) { + const tweetIndex = this.tweets.findIndex(tweet => tweet.id === id); + const tweet = this.tweets[tweetIndex]; + if(!tweet.isLiked) { + tweet.favoriteCount ? tweet.favoriteCount++ : tweet.favoriteCount = 1; + tweet.isLiked = true; + } else { + tweet.favoriteCount--; + tweet.isLiked = false; + } + } } diff --git a/src/app/tweet.ts b/src/app/tweet.ts index 0c89b69..582fa53 100644 --- a/src/app/tweet.ts +++ b/src/app/tweet.ts @@ -3,5 +3,6 @@ export interface Tweet { id: number, text: string, user: string, - favoriteCount?: number + favoriteCount?: number, + isLiked?: boolean } From d470d6857369597aaac17ef985798fb904b607d2 Mon Sep 17 00:00:00 2001 From: Unknown Date: Tue, 5 Mar 2019 15:33:16 +0100 Subject: [PATCH 3/4] ajout formulaire --- package-lock.json | 8 ++++++++ package.json | 1 + src/app/app.component.html | 4 ++++ src/app/app.module.ts | 6 +++++- src/app/timeline/timeline.component.html | 11 ++++++++++- src/app/timeline/timeline.component.ts | 18 ++++++++++++++++++ 6 files changed, 46 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index db09c8c..4da4cf8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9598,6 +9598,14 @@ "integrity": "sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow==", "dev": true }, + "time-ago-pipe": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/time-ago-pipe/-/time-ago-pipe-1.3.2.tgz", + "integrity": "sha512-ecKcPRPzQ4iDGrcifplKod4/Ael6w65LAw0Ll/IEJBv+CBmKZGMLpgduLWmlgu6Ow8ykwb/Fp2SPqPNDTLpuoQ==", + "requires": { + "tslib": "^1.7.1" + } + }, "timers-browserify": { "version": "2.0.10", "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.10.tgz", diff --git a/package.json b/package.json index 62df53f..1480c1b 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@angular/router": "~7.2.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", + "time-ago-pipe": "^1.3.2", "tslib": "^1.9.0", "zone.js": "~0.8.26" }, diff --git a/src/app/app.component.html b/src/app/app.component.html index 4e45719..7767218 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,11 +1,15 @@ + +

    Welcome to {{ title }}!

    Angular Logo
    +

    Here are some links to help you start:

    +