diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 87f66b1f4917f8121340b1ca77fcbde00ef1b536..9a200c1bca52aa5b97ee3fc221529fa5ff860162 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -15,7 +15,7 @@ staging: script: - dpl --provider=heroku --app=$HEROKU_STAGING_APP --api-key=$HEROKU_STAGING_API_KEY only: - - staging + - merge_requests production: type: deploy diff --git a/angular.json b/angular.json index 5a5184e5d2a7cecbc438b21ecc523819e74ed888..7bb367ed235e723fdc186aace41ca474c8184f3e 100644 --- a/angular.json +++ b/angular.json @@ -24,12 +24,9 @@ "src/assets" ], "styles": [ - "src/styles.css", - "node_modules/bootstrap/dist/css/bootstrap.min.css" + "src/styles.css" ], "scripts": [ - "node_modules/jquery/dist/jquery.min.js", - "node_modules/bootstrap/dist/js/bootstrap.min.js" ] }, "configurations": { diff --git a/package-lock.json b/package-lock.json index 16267e14ba40a24808156da99c7ba9efb8afe09e..e433c1ed238d696d6b2df845aa030308fa855c95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3213,11 +3213,6 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, - "bootstrap": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz", - "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==" - }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index 2b3fffd8071964d40055057f6bf05f38f391160d..c58db87278f40b7f98b09993cbe1c02bb43487bf 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@angular/compiler-cli": "^9.0.7", "@angular/core": "~9.0.3", "@angular/fire": "^6.0.0", - "@angular/forms": "~9.0.3", + "@angular/forms": "^9.0.7", "@angular/localize": "^9.1.0", "@angular/platform-browser": "~9.0.3", "@angular/platform-browser-dynamic": "~9.0.3", @@ -29,7 +29,6 @@ "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "^4.0.0", "@types/googlemaps": "^3.39.3", - "bootstrap": "^4.4.1", "express": "^4.17.1", "firebase": "^7.14.1", "jquery": "^3.4.1", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e2c56a470063955d093d9379615b0a3a7d90ea8e..5961dc3e4943843c23a0ee36c170986c3f6547ba 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -11,11 +11,6 @@ import { SignupComponent } from './signup/signup.component'; const routes: Routes = [ - { - path: '', - redirectTo: '/preventive-measures', - pathMatch: 'full' - }, { path: 'maps', component: MapsComponent @@ -39,6 +34,14 @@ const routes: Routes = [ { path: 'signup', component: SignupComponent + }, + { + path: 'maps/:canton', + component: MapsComponent + }, + { + path: '', + component: GettingStartedComponent } ]; diff --git a/src/app/app.component.css b/src/app/app.component.css index 65d76fd74dc881fa7ad9acd7ebff9b9865f1f4c6..eccc764b6c34156a0c35b25746d08572db0e024b 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -5,4 +5,6 @@ #app-header{ transition: opacity 0.5s; } - +.container{ + display: flex; +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 3881434521ccb8cc9e4f9bacf04251cf71f68256..8e1f47af4464ec4ecceff1ba34f2a461bb109bed 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,8 @@ - - -
- - + +
+ +
+ + +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 39ab9febc8a67b9012b6d4c4dcaf0034031b0e63..512a72ca34e80755583810c9f74a2e2cb4986fc5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -16,47 +16,7 @@ export class AppComponent { constructor(private router: Router,) {} - changeMenu(){ - this.mobileMenuActive = !this.mobileMenuActive; - if(!this.mobileMenuActive){ - document.getElementById("app-header").style.visibility = "hidden"; - document.getElementById("app-header").style.opacity = "0"; - document.getElementById("app-root").style.marginLeft = "250px"; - document.getElementById("app-root").style.marginLeft = "0rem"; - } else{ - document.getElementById("app-header").style.visibility = "visible"; - document.getElementById("app-header").style.opacity = "1"; - document.getElementById("app-root").style.marginLeft = "0px"; - document.getElementById("app-root").style.marginLeft = "12rem"; - } - } - - @HostListener('window:resize', ['$event']) - onResize(event) { - if(window.innerWidth < 500){ - this.isMobile = true; - document.getElementById("app-header").style.visibility = "hidden"; - document.getElementById("app-root").style.marginLeft = "0rem"; - document.getElementById("app-header").style.opacity = "0"; - }else{ - this.isMobile = false; - document.getElementById("app-header").style.visibility = "visible"; - document.getElementById("app-header").style.opacity = "1"; - document.getElementById("app-root").style.marginLeft = "12rem"; - } - } - - ngOnInit(): void { - if(window.innerWidth < 500){ - this.isMobile = true; - document.getElementById("app-header").style.visibility = "hidden"; - document.getElementById("app-root").style.marginLeft = "0rem"; - }else { - this.isMobile = false; - document.getElementById("app-header").style.visibility = "visible"; - document.getElementById("app-root").style.marginLeft = "12rem"; - } } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 711c6ca4a46d6f2bcab31e3cd18a14e289b8e19f..6dc1f2843292b711eafb41c640116a12da20bb57 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -20,7 +20,6 @@ import { SignupComponent } from './signup/signup.component'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { LOCALE_ID } from '@angular/core'; - import { NavButtonComponent } from './header/nav-button/nav-button.component'; // Firebase @@ -52,9 +51,13 @@ export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); } -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core'; import { GeocodeService } from './services/geocode.service'; +import { ResetpasswordComponent } from './resetpassword/resetpassword.component'; +import { ThankyouComponent } from './thankyou/thankyou.component'; +import { ClickOutsideDirective } from './directives/click-outside.directive'; +import { EuropeanDatePipe } from './community/european-date.pipe'; @NgModule({ @@ -69,7 +72,11 @@ import { GeocodeService } from './services/geocode.service'; ArticleComponent, NavButtonComponent, LoginComponent, - SignupComponent + SignupComponent, + ClickOutsideDirective, + ResetpasswordComponent, + ThankyouComponent, + EuropeanDatePipe ], imports: [ BrowserModule, @@ -77,6 +84,7 @@ import { GeocodeService } from './services/geocode.service'; CommonModule, HttpClientModule, FormsModule, + ReactiveFormsModule, AgmCoreModule.forRoot({ apiKey: 'AIzaSyD9crBwGrLUT3_iH_wi1ZqKNhGhwjzHp5I' }), diff --git a/src/app/community/community.component.html b/src/app/community/community.component.html index 3bf70cdb946ae6b9bb5b467f51bb0ba958d4ab5a..639041a376f76d486e3b7b9a0407f3c64d0bb15a 100644 --- a/src/app/community/community.component.html +++ b/src/app/community/community.component.html @@ -14,8 +14,9 @@ alt="user" width="50" class="rounded-circle">
-
{{ user }}
{{time | date:"yyyy-MM-dd"}} +
{{ user }}
+ + {{time | europeanDate}}

{{ message }}

@@ -105,4 +106,4 @@
- \ No newline at end of file + diff --git a/src/app/community/european-date.pipe.spec.ts b/src/app/community/european-date.pipe.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..e122e0bb2891b16518aa4eb00e516cc808133f5b --- /dev/null +++ b/src/app/community/european-date.pipe.spec.ts @@ -0,0 +1,8 @@ +import { EuropeanDatePipe } from './european-date.pipe'; + +describe('EuropeanDatePipe', () => { + it('create an instance', () => { + const pipe = new EuropeanDatePipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/community/european-date.pipe.ts b/src/app/community/european-date.pipe.ts new file mode 100644 index 0000000000000000000000000000000000000000..55c405a7060281835127257d962f68c4e67ce915 --- /dev/null +++ b/src/app/community/european-date.pipe.ts @@ -0,0 +1,16 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { DatePipe } from '@angular/common'; +import { LangService } from '../services/lang.service'; + +@Pipe({ + name: 'europeanDate' +}) +export class EuropeanDatePipe implements PipeTransform { + constructor(private lang: LangService) { } + + transform(value: any, pattern: string = 'yyyy-MM-dd'): any { + const datePipe: DatePipe = new DatePipe(this.lang.browserLang); + return datePipe.transform(value, pattern); + } + +} diff --git a/src/app/directives/click-outside.directive.spec.ts b/src/app/directives/click-outside.directive.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..a78541f4a8dfb455169fe74857de32ae311e1ebb --- /dev/null +++ b/src/app/directives/click-outside.directive.spec.ts @@ -0,0 +1,12 @@ +import { ClickOutsideDirective } from './click-outside.directive'; + +describe('ClickOutsideDirective', () => { + it('should create an instance', () => { + let elRefMock = { + nativeElement: document.createElement('div') //Mock + }; + console.log("spec"); + const directive = new ClickOutsideDirective(elRefMock); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/directives/click-outside.directive.ts b/src/app/directives/click-outside.directive.ts new file mode 100644 index 0000000000000000000000000000000000000000..4946e19f7c0d6ccb261666f7b59daeb90097dd04 --- /dev/null +++ b/src/app/directives/click-outside.directive.ts @@ -0,0 +1,31 @@ +import { Directive, Input, Output, EventEmitter, ElementRef, HostListener, OnInit, OnDestroy } from '@angular/core'; +import { Subject, Subscription } from 'rxjs'; + +@Directive({ + selector: '[appClickOutside]', +}) +export class ClickOutsideDirective implements OnInit, OnDestroy { + @Output() clickOutside: EventEmitter = new EventEmitter(false); + + private clicksOutside = new Subject(); + private subscription: Subscription; + + constructor(private elementRef: ElementRef) { } + + ngOnInit() { + this.subscription = this.clicksOutside + .subscribe((e: boolean) => this.clickOutside.emit(e)); + } + + ngOnDestroy() { + this.subscription.unsubscribe(); + } + + @HostListener('document:click', ['$event.target']) + public onListenerTriggered(target: ElementRef) { + const clickedInside = this.elementRef.nativeElement.contains(target); + if(!clickedInside){ + this.clicksOutside.next(!clickedInside); + } + } +} diff --git a/src/app/getting-started/getting-started.component.css b/src/app/getting-started/getting-started.component.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f5aae283418b089796c84fbcbe26aeedb3f0b315 100644 --- a/src/app/getting-started/getting-started.component.css +++ b/src/app/getting-started/getting-started.component.css @@ -0,0 +1,347 @@ +#background{ + position: relative; + width: calc(100%-20rem); + height: 100vh; + background: #8C93D8; + padding: 0 6%; + display: inline-flex; + overflow: hidden; +} + +.overflow{ + position: absolute; + right: 0%; + top: 0; + width: 40%; + height: 110vh; + overflow: hidden; + pointer-events: none; +} + +.overflow img{ + position: absolute; + width: 140%; + height: 140%; + margin-right: -100%; + margin-top: -60%; +} + +.flexbox{ + position: relative; + display: flex; +} + +#title{ + position: relative; + width: 55%; + float: left; + display: flex; + flex-direction: column; + align-items: center; +} + +#title > h1{ + position: relative; + + font-family: 'Nova Round', cursive; + font-style: normal; + font-weight: normal; + margin: 0; + font-size: 122px; + align-items: center; + text-align: center; + font-feature-settings: 'kern' off; + + color: #FF9848; + + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); +} + +#title > h2{ + position: relative; + + font-family: 'Nova Round', cursive; + font-style: normal; + font-weight: normal; + font-size: 52px; + margin: 1% 0; + align-items: center; + text-align: center; + + color: #FF9848; + + text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4); +} + +#title > .line1{ + width: 100%; + border: 3px solid #999FDE; +} + +#title > p{ + position: relative; + + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + margin: 3% 0; + line-height: 29px; + align-items: center; + text-align: center; + + color: #2E3192; +} + +.emergency{ + position: relative; + + padding: 2%; + margin: 5% 0; + + border: 4px solid #FF9848; + box-sizing: border-box; + border-radius: 28.9474px; + + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 28px; + align-items: center; + text-align: center; + + color: #FFFAE7; +} + +span{ + color: #FF9848; +} + +#inputbox{ + position: relative; + width: 85%; + + justify-self: center; + display: flex; + flex-direction: column; + align-items: center; + background: #FFFFFF; + box-shadow: 0px 3px 10px rgba(255, 152, 72, 0.28); + border-radius: 31px; +} + +#inputbox > h2{ + position: relative; + width: 90%; + padding-top: 1%; + + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 36px; + line-height: 44px; + justify-self: center; + + color: #2E3192; +} + +#inputbox > .line2{ + position: relative; + height: 0px; + width: 95%; + justify-self: center; + text-align: center; + border: 1px solid #BEBEBE; +} + +#optionbox{ + width: 80%; + height: 100%; + display: flex; + flex-direction: column; +} + +.selbox{ + border: 2px solid #FC5C14; + box-sizing: border-box; + border-radius: 30px; + justify-items: center; + justify-content: center; + display: flex; + align-items: center; + margin: 2% 0; + transition-duration: 0.4s; +} + +.selbox:hover{ + background: #FF9848; + color: #FFFFFF; + cursor: pointer; + +} + +.selbox:hover > p{ + color: #FFFFFF; +} + +.langboxes{ + position: relative; + display: flex; + justify-content: space-evenly; +} + +.langboxes > .selbox{ + position: relative; + width: 6vw; + height: 4vw; +} + +.selbox > p{ + position: relative; + margin-bottom: 0; + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + text-align: center; + + color: #FC5C14; +} + +.cantonbox{ + height: 4vw; +} + +.age{ + position: relative; + display: flex; + align-items: flex-start; + justify-content: space-evenly; +} + +.age > .selbox{ + position: relative; + width: 30%; + height: 4vw; +} + +.submitbox{ + position: relative; + display: flex; + justify-content: space-evenly; +} + +.submit{ + border: 2px solid #8C93D8; +} + +.submit > p{ + color: #2E3192;} + +.submitbox > .selbox{ + position: relative; + width: 13vw; + height: 4vw; +} + +.submitbox .selbox:hover{ + background: #2E3192; + color: #FFFFFF; +} + +.submitbox .selbox:hover > p{ + color: #FFFFFF; +} + +.selected{ + background: #FF9848; +} + +.selected > p{ + color: #FFFFFF; +} + + + + +/*auto-suggest form*/ + + +.filter-wrapper, +.keyword-wrapper { + display: flex; + justify-content: center; +} +.filter-wrapper { + min-height: 100%; + flex-flow: column wrap; + position: relative; +} +.keyword-wrapper { + width: 100%; + position: relative; +} +#keyword { + border: 1px solid #ccc; + box-sizing: border-box; + border-radius: 30px; + padding: 10px; + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + text-align: center; + width: 50%; + outline: none; + transition: border 0.5s ease-in-out +} +#keyword:focus { + border-color : rgba(81, 203, 238, 1);; +} + +.filter-select { + width: 50%; + margin-top: 1%; + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + text-align: center; + font-size: 1.1em; + color: rgb(105, 105, 105); + border: 1px solid #ccc; + box-sizing: border-box; + border-radius: 50; + + position: absolute; + z-index: 99; + left: 25%; + top: calc(50% + 25px); + max-height: 400%; + overflow-y: auto; + background: #fff; + padding-inline-start: 0px; + } + + + .filter-select-list:hover .tags { + color: #fff; + } + .filter-select-list { + cursor: pointer; + padding: 10px 10px; + } + .artist-name { + display: inline-block; + position: absolute; + } + .filter-select-list:hover { + background: #C0C0C0; + color: #fff + } + .list-highlight, + .list-highlight:hover { + background: rgb(55, 55, 55); + color: #fff + } \ No newline at end of file diff --git a/src/app/getting-started/getting-started.component.html b/src/app/getting-started/getting-started.component.html index 842470aacb97e85d7f12b80e7fbbb57f763df8e7..8ec9ab9c8193d5384e6192f6c72cd1912691f6f1 100644 --- a/src/app/getting-started/getting-started.component.html +++ b/src/app/getting-started/getting-started.component.html @@ -1 +1,50 @@ -

getting-started works!

+
+
+
+

YANA.help

+

You Are Not Alone

+
+

Welcome to the safe place ! Here you can find help and useful information. Come and join the community !

+
Are you in an emergency ? Call 147 or find help near you
+
+
+

Find help

+
+
+
+
+

{{ language }}

+
+
+
+
+
+ +
+
    +
  • +

    {{result}}

    +
+
+
+
+
+

I am a child

+
+
+

I am an adult

+
+
+
+
+

Get Started

+
+
+
+
+
+
+ YANA tree +
+
+ diff --git a/src/app/getting-started/getting-started.component.ts b/src/app/getting-started/getting-started.component.ts index 91d9ed4095040022342ebb9591b872437f81179a..617ecfc44cfb09f5e56a105ff69170d09a762741 100644 --- a/src/app/getting-started/getting-started.component.ts +++ b/src/app/getting-started/getting-started.component.ts @@ -1,4 +1,8 @@ import { Component, OnInit } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; +import { LangService } from '../services/lang.service'; +import { FormControl } from '@angular/forms'; +import * as sampleData from '../../assets/maps/cantons.json'; @Component({ selector: 'app-getting-started', @@ -7,9 +11,60 @@ import { Component, OnInit } from '@angular/core'; }) export class GettingStartedComponent implements OnInit { - constructor() { } + isClicked: boolean = false; + translate: TranslateService; + langSelector: any = null; + ageSelector: any = null; + cantonSelector: String = null; + queryField: FormControl = new FormControl(); + show: boolean = false; + results: any[] = []; + cantons: String[] = (sampleData as any).default; + + constructor(public lang: LangService) { + this.translate = lang.getTranslateService(); + } + + onClickLang(button): void { + if (this.langSelector === button) { + this.langSelector = null; + } else { + this.langSelector = button; + } + } + + onClickAge(button): void { + if (this.ageSelector === button) { + this.ageSelector = null; + } else { + this.ageSelector = button; + } + } + + suggest(data : string){ + var newArr = this.cantons.filter(canton => canton.toLowerCase().includes(data.toLowerCase())); + console.log(newArr); + return newArr; + } + + send(){ + console.log(this.queryField.value + " waw"); + if(this.queryField.value == null){ + this.results = this.cantons; + this.show = true; + console.log("sent"); + } + } + + change(result){ + this.cantonSelector = result; + this.queryField.setValue(result); + this.show = false; + } ngOnInit(): void { + this.queryField.valueChanges + .subscribe(query => this.results = this.suggest(query)); } } diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css index 863f3b76824ca3a15902475bed1e1e35f47eb89e..486fc49115430c447ac220b8af7391daadc5c6d2 100644 --- a/src/app/header/header.component.css +++ b/src/app/header/header.component.css @@ -1,13 +1,57 @@ .vertical-nav { - min-width: 12rem; - width: 12rem; + min-width: 20rem; height: 100vh; - position: fixed; + position: sticky; text-align: center; top: 0; left: 0; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); display: inline-block; + background-color: #8C93D8; +} + +#logo { + padding-top: 20px; +} + +.nav__list { + list-style: none; + margin: 0; + padding: 0; + height: 75vh; + max-height: 600px; + color: black; +} + +.col { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.nav__item { + +} + +.nav__link--selected { + background-color: #EBDDFF; +} + +.nav__link { + padding: 1em 0; + text-decoration: none; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); + border-radius: 65px; + display: block; + margin: 0 1.5em; +} +.exit { + background-color: #FC5C14; + font-weight: bold; +} + +.exit:hover { + cursor: pointer; } li:hover { @@ -20,21 +64,26 @@ select { outline: none; -webkit-appearance: none; -moz-appearance: none; - color: #ae61ff; + color: #EBDDFF; background: none; text-align-last: center; text-align: center; -ms-text-align-last: center; -moz-text-align-last: center; + text-transform: uppercase; +} + +select:hover { + cursor: pointer; } option { border: 0; - border-bottom: 1px solid #595e63; + border-bottom: 1px solid #8C93D8; -webkit-appearance: none; -moz-appearance: none; background: none; - background-color: #595e63; + background-color: #8C93D8; } .selector { diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 470ee00bfcd698cfe1287b68631c3f9fe0a6500f..a3e15ca52cc3a173295c660199d075d811de7bcb 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,28 +1,30 @@ - +