From 1c040c94da2f378b324228300f688cfd70be640c Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:28:45 +0000 Subject: [PATCH 1/17] Add icons for the calendar page --- diff --git a/src/assets/img/back.svg b/src/assets/img/back.svg new file mode 100644 index 0000000..f445b7a --- /dev/null +++ b/src/assets/img/back.svg @@ -0,0 +1,14 @@ + + + + arrow_back - material + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/calendar.svg b/src/assets/img/calendar.svg new file mode 100644 index 0000000..8489bb5 --- /dev/null +++ b/src/assets/img/calendar.svg @@ -0,0 +1,16 @@ + + + + calendar-plus-o - FontAwesome + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/clock.svg b/src/assets/img/clock.svg new file mode 100644 index 0000000..8b4a351 --- /dev/null +++ b/src/assets/img/clock.svg @@ -0,0 +1,16 @@ + + + + access_time - material + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/dropdown.svg b/src/assets/img/dropdown.svg new file mode 100644 index 0000000..d5ed233 --- /dev/null +++ b/src/assets/img/dropdown.svg @@ -0,0 +1,18 @@ + + + + Arrow-down - simple-line-icons + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/fav.svg b/src/assets/img/fav.svg new file mode 100644 index 0000000..c25b7c6 --- /dev/null +++ b/src/assets/img/fav.svg @@ -0,0 +1,18 @@ + + + + notstar + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/search.svg b/src/assets/img/search.svg new file mode 100644 index 0000000..218b07d --- /dev/null +++ b/src/assets/img/search.svg @@ -0,0 +1,14 @@ + + + + search - material + Created with Sketch. + + + + + + + + + \ No newline at end of file From b6eef629b3d63db676678e26049d2e65057d050a Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:29:42 +0000 Subject: [PATCH 2/17] add search modal --- diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 585596f..87cef94 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,7 +15,7 @@ import { TabsPage } from '../pages/tabs/tabs'; import { HomePage } from '../pages/home/home'; import { MagazinePage } from '../pages/magazine/magazine'; import { AskPage } from '../pages/ask/ask'; -import { CalendarPage } from '../pages/calendar/calendar'; +import { CalendarPage, Search } from '../pages/calendar/calendar'; import { MorePage} from '../pages/more/more'; import { NotificationsPage} from '../pages/notifications/notifications'; import { WomenPage } from '../pages/women/women'; @@ -36,7 +36,8 @@ import { Browser } from '../providers/browser/browser'; NotificationsPage, WomenPage, PackageSearchPage, - ViewPackagePage + ViewPackagePage, + Search ], imports: [ BrowserModule, @@ -56,7 +57,8 @@ import { Browser } from '../providers/browser/browser'; NotificationsPage, WomenPage, PackageSearchPage, - ViewPackagePage + ViewPackagePage, + Search ], providers: [ Browser, diff --git a/src/pages/calendar/calendar.html b/src/pages/calendar/calendar.html index 9f601ef..2a0f711 100644 --- a/src/pages/calendar/calendar.html +++ b/src/pages/calendar/calendar.html @@ -1,46 +1,55 @@ - - - + + - + + Fedora + + + + - + + + + Select a calendar +
+ {{selectedCalendar.realName}} + +
+ + + + Upcoming Events + + + Past Events + + - - - - - {{ calendar.displayName }} - - -
- - {{ meeting.name }} - - - {{ meeting.description }} - - - -

{{ meeting.time.toLocaleDateString() }}

-

{{ meeting.time.toLocaleTimeString() }}

+ + +

{{meeting.display.meetingMonth}}

+

{{meeting.display.meetingDate}}

- - + + {{meeting.name}} + +

+ + +

+

+ + +

+
- + \ No newline at end of file diff --git a/src/pages/calendar/calendar.scss b/src/pages/calendar/calendar.scss index 74c1505..5fef54a 100644 --- a/src/pages/calendar/calendar.scss +++ b/src/pages/calendar/calendar.scss @@ -1,25 +1,162 @@ .calendar { - #cal_icon { - float: none; - z-index: 1; - display: block; - position: absolute; - left: 0; - right: 0; - top: 20px; - margin: auto; - } - ion-list { - margin-top: 40px !important; - } - .item { - background-color: transparent; - } - ion-select { - margin: 0 auto; - } - .add-button { - background-color: #79db32; - float: right; + background-color: #EFF0F1 !important; + .card { + padding: 16px 24px; + background-color: #FFFFFF !important; + box-shadow: none; + margin: 4px 0; + width: 100%; + } + .card-header { + padding: 0 !important; + } + .card-content { + margin-top: 8px; + padding: 0 !important; + } + ion-label { + background-color: #fff; + padding: 12px 16px; + margin: 0 !important; + div{ + display: inline; + float: right; + } + } + ion-row { + .date { + background-color: rgba(#E8EFF8, 0.5); + padding: 8px 14px; + .month { + font-family: "OpenSans-Bold"; + font-size: 14px; + color: #396CB6; + text-transform: uppercase; + line-height: 14px; + } + .day { + /* 25: */ + font-family: "OpenSans-Bold"; + font-size: 26px; + color: #396CB6; + line-height: 26px; + } + } + .details { + margin-left: 16px; + padding: 0 !important; + .card-content { + margin-top: 0 !important; + } + ion-card-content { + img { + width: auto; + height: 12px; + margin-right: 4px; + } + p { + display: flex; + flex-direction: row; + align-items: center; + } + .time { + margin: 3px 0 6px 0; + span { + font-family: "OpenSans-Regular"; + font-size: 12px; + color: #535961; + } + } + .add { + img { + margin-right: 6px; + } + button { + font-family: "OpenSans-Semibold"; + font-size: 13px; + color: #396CB6; + background-color: transparent; + padding: 0; + } + } + } + } + } +} + +searchPage { + position: absolute; + top: 0 !important; + left: 0 !important; + display: block; + width: 100% !important; + height: 100% !important; + background-image: none; + .header::after { + background-image: none; + box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); + } + ion-header { + padding: 16px 24px; + background-color: #fff; + span { + font-family: "Montserrat-Regular"; + font-size: 16px; + color: #9A9FA6; + letter-spacing: 0.57px; + margin: 0 0 16px 16px; + text-transform: uppercase; + } + .toolbar-title { + padding: 0 !important; + } + .searchbar { + padding: 16px 0 0 0; + .searchbar-search-icon { + left: 90%; + background-image: url(../assets/img/search.svg); + } + .searchbar-input { + box-shadow: none; + padding: 8px 12px; + border: 1px solid transparent; + font-family: "OpenSans-Regular"; + background: rgba(239, 240, 241, 0.50); + &:focus{ + background: #fff; + border: 1px solid rgba(#3B6FBB,0.5); + } + } + } + } + ion-content { + [col-1], + [col-11] { + padding: 0 !important; + } + background-color: #EFF0F1 !important; + ion-list { + margin: 0 !important; + } + .card { + padding: 12px 16px; + margin: 0 0 2px 0; + width: 100%; + box-shadow: none; + } + .card-header { + font-family: "OpenSans-Semibold"; + font-size: 14px; + color: #3B6FBB; + line-height: 20px; + padding: 0; + } + .card-content { + font-family: "OpenSans-Regular"; + font-size: 12px; + color: #535961; + line-height: 20px; + padding: 0; + } } } diff --git a/src/pages/calendar/calendar.ts b/src/pages/calendar/calendar.ts index ae22698..9e97943 100644 --- a/src/pages/calendar/calendar.ts +++ b/src/pages/calendar/calendar.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { Calendar } from '@ionic-native/calendar'; +import { ModalController, ViewController, NavParams } from 'ionic-angular'; import { FedoCalService, Calendar as CalendarType, Meeting } from '../../providers/fedo-cal/fedo-cal'; @@ -7,7 +8,7 @@ import { FedoCalService, Calendar as CalendarType, Meeting } from '../../provide /** * We default to the QA calendar */ -const DEFAULT_CALENDAR = { realName:'QA', displayName: 'QA' }; +const DEFAULT_CALENDAR = { realName: 'QA', displayName: 'QA' }; /** * The FedoCal interface @@ -22,9 +23,14 @@ const DEFAULT_CALENDAR = { realName:'QA', displayName: 'QA' }; export class CalendarPage { /** + * Set the current active segment as Upcoming Events in the interface + */ + showEventsBy: String = "upcoming"; + + /** * List of calendars in FedoCal */ - private calendars: CalendarType[]; + public calendars: CalendarType[]; /** * List of meetings in the selected calendar @@ -34,9 +40,9 @@ export class CalendarPage { /** * ID of the selected calendar */ - private selectedCalendar: CalendarType; + public selectedCalendar: CalendarType; - constructor(private fedoCal: FedoCalService, private calendar: Calendar) { + constructor(private fedoCal: FedoCalService, private calendar: Calendar, public modalCtrl: ModalController) { this.calendars = []; this.meetings = []; @@ -45,7 +51,17 @@ export class CalendarPage { ngOnInit() { this.updateCalendars(); - this.updateMeetings(); + /** + * Fetch upcoming meetings + */ + this.updateMeetings('start'); + } + + /** + * Change the meeting view according to active segment + */ + onSegmentChange() { + this.showEventsBy == 'upcoming' ? this.updateMeetings('start') : this.updateMeetings('end'); } /** @@ -61,21 +77,45 @@ export class CalendarPage { /** * Update the list of meetings for the selected calendar + * @param type type of meetings to fetch, upcoming or past */ - updateMeetings(): void { + updateMeetings(type: string): void { this.fedoCal - .getMeetings(this.selectedCalendar) + .getMeetings(this.selectedCalendar, type) .subscribe(meetings => { this.meetings = meetings; }); } /** + * Opens up the search modal component + */ + showSearch() { + let searchModal = this.modalCtrl.create(Search, { calendars: this.calendars }, { + cssClass: "search-modal", + showBackdrop: false, + enableBackdropDismiss: false + }); + /** + * Update calendars when search modal closes + */ + searchModal.onDidDismiss(data => { + //Update calendar only if choice is made + if (data !== undefined) { + let receivedCalendar = { realName: data.calendarChoice }; + this.selectedCalendar = receivedCalendar as CalendarType; + this.showEventsBy == 'upcoming' ? this.updateMeetings('start') : this.updateMeetings('end'); + } + }); + searchModal.present(); + } + + /** * Add a FedoCal meeting to the system calendar * * @param meeting meeting to add to the calendar */ - addToCalendar(meeting:Meeting): void { + addToCalendar(meeting: Meeting): void { this.calendar.createEventInteractively( meeting.name, meeting.location, @@ -92,7 +132,44 @@ export class CalendarPage { * @param b Calendar * @returns boolean value indicating if both calendars are equal */ - compareCalendar(a:CalendarType, b:CalendarType) { + compareCalendar(a: CalendarType, b: CalendarType) { return a.realName === b.realName; } } + +/** + * Search Modal Component + */ + +@Component({ + templateUrl: 'search.html', + selector: 'searchPage', + providers: [FedoCalService, Calendar] +}) +export class Search { + + public calendars: any; + + constructor(public viewCtrl: ViewController, navParams: NavParams) { + this.calendars = navParams.get('calendars'); + } + + /** + * Listens to input on the search bar + * + * Returns calendars matching the query + * + * @param query search query entered in the input box + */ + onInput(query: string): void { + let val: string = query; + /** + * DON'T filter the calendar IF the supplied input is an empty string + * */ + if (val.trim() !== '') { + this.calendars = this.calendars.filter((item) => { + return item.displayName.toLowerCase().indexOf(val.toLowerCase()) > -1; + }) + } + } +} \ No newline at end of file diff --git a/src/pages/calendar/search.html b/src/pages/calendar/search.html new file mode 100644 index 0000000..0d951f9 --- /dev/null +++ b/src/pages/calendar/search.html @@ -0,0 +1,34 @@ + + + + + + Select a Calendar + + + + + + +

{{Error}}

+ + + + + + + + {{calendar.displayName}} + + + + + + {{calendar.description}} + + + + + \ No newline at end of file From b05ff7d2d2a524e89074be5aa08608704c78dc7c Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:29:42 +0000 Subject: [PATCH 3/17] update fedo cal to fetch posts by date --- diff --git a/src/providers/fedo-cal/fedo-cal.ts b/src/providers/fedo-cal/fedo-cal.ts index eb9219d..fe0d5d5 100644 --- a/src/providers/fedo-cal/fedo-cal.ts +++ b/src/providers/fedo-cal/fedo-cal.ts @@ -20,7 +20,6 @@ const ENDPOINT = chooseEndpoint('/fedocal', 'https://apps.fedoraproject.org/cale */ const CALENDAR_STORAGE_KEY = 'fedocal__calendars'; - /** * Convert calendar name from API to a value suitable for display * @@ -127,6 +126,16 @@ export interface Meeting { * Meeting end time */ timeEnd: Date, + + /** + * Display Meeting date and time in readable format + */ + display: { + startTime: string, + endTime: string, + meetingMonth: string, + meetingDate: string + } } /** @@ -194,20 +203,26 @@ export class FedoCalService { } /** - * Fetch the list of meetings for a given FedoCal calendar name from FedoCal API + * Fetch the list of meetings for a given FedoCal calendar name * * @param calendar FedoCal calendar name + * @param type Type of Meetings to fetch: + * - start(starting after today i.e upcoming meetings) + * - end(ended today i.e past meetings) * @returns Observable which emits an array of meetings */ - fetchMeetings(calendar: Calendar): Observable { + fetchMeetings(calendar: Calendar, type: string): Observable { + + /** + * set search parameters to current date in order to get past and upcoming events + */ + let todaysDate = moment().format('YYYY-MM-DD'); - return this.http.get(`${ENDPOINT}/meetings/`, { params: { calendar: calendar.realName } }) + return this.http.get(`${ENDPOINT}/meetings/`, { params: { calendar: calendar.realName, [type]: todaysDate } }) .pipe( map((data: any) => data.meetings.map(m => { - // FedoCal splits an ISO8601 string and sends us the date and time, - // combine them together - const mTime = new Date(`${m.meeting_date}T${m.meeting_time_start}Z`); - const mTimeEnd = new Date(`${m.meeting_date_end}T${m.meeting_time_end}Z`); + const mTime: Date = dateToMoment(m.meeting_date, m.meeting_time_start, m.meeting_timezone); + const mTimeEnd: Date = dateToMoment(m.meeting_date_end, m.meeting_time_stop, m.meeting_timezone); return { name: m.meeting_name, @@ -215,6 +230,12 @@ export class FedoCalService { time: mTime, timeEnd: mTimeEnd, location: m.meeting_location, + display: { + startTime: mTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), + endTime: mTimeEnd.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), + meetingMonth: mTime.toLocaleDateString([], { month: 'short' }), + meetingDate: mTime.toLocaleDateString([], { day: '2-digit' }) + } }; })) ); @@ -229,8 +250,8 @@ export class FedoCalService { * @param calendar FedoCal calendar name * @returns Observable which emits an array of meetings */ - getMeetings(calendar: Calendar): Observable { - return merge(this.loadCachedMeetings(calendar), this.fetchMeetings(calendar).pipe( + getMeetings(calendar: Calendar, type: string): Observable { + return merge(this.loadCachedMeetings(calendar), this.fetchMeetings(calendar, type).pipe( tap(x => this.storage.set(getCalendarStorageKey(calendar), x)) )); } From a99d21e948272eeefe3b57e70d81f26a271697c1 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:30:38 +0000 Subject: [PATCH 4/17] update fedocal ui --- diff --git a/src/app/app.scss b/src/app/app.scss index 7d0f64f..730f49b 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -21,7 +21,8 @@ .iframeWrapper iframe { width: 100%; height: 100%; -} //tab icons-active +} +//tab icons-active ion-icon { &[class*="fedora-"] { mask-size: contain; @@ -141,3 +142,24 @@ ion-navbar { .pkg-devel { color: #FFEB3B; } + +//segment styles +ion-segment { + padding: 0px 24px 0 24px; + background-color: #fff; +} + +.segment-button { + font-family: "Montserrat-Light"; + font-size: 12px; + color: #9A9FA6; + text-transform: none; + padding: 0; +} + +.segment-activated { + font-family: "Montserrat-SemiBold"; + font-size: 12px; + color: #3C6EB4; + padding: 0; +} \ No newline at end of file From 73314b880131a458bfbf54a877123fbb0903d785 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:30:38 +0000 Subject: [PATCH 5/17] Update styles --- diff --git a/src/pages/calendar/calendar.scss b/src/pages/calendar/calendar.scss index 5fef54a..7c6e64c 100644 --- a/src/pages/calendar/calendar.scss +++ b/src/pages/calendar/calendar.scss @@ -1,162 +1,162 @@ .calendar { - background-color: #EFF0F1 !important; - .card { - padding: 16px 24px; - background-color: #FFFFFF !important; - box-shadow: none; - margin: 4px 0; - width: 100%; - } - .card-header { - padding: 0 !important; - } - .card-content { - margin-top: 8px; - padding: 0 !important; - } - ion-label { - background-color: #fff; - padding: 12px 16px; - margin: 0 !important; - div{ - display: inline; - float: right; - } - } - ion-row { - .date { - background-color: rgba(#E8EFF8, 0.5); - padding: 8px 14px; - .month { - font-family: "OpenSans-Bold"; - font-size: 14px; - color: #396CB6; - text-transform: uppercase; - line-height: 14px; - } - .day { - /* 25: */ - font-family: "OpenSans-Bold"; - font-size: 26px; - color: #396CB6; - line-height: 26px; - } - } - .details { - margin-left: 16px; - padding: 0 !important; - .card-content { - margin-top: 0 !important; - } - ion-card-content { - img { - width: auto; - height: 12px; - margin-right: 4px; - } - p { - display: flex; - flex-direction: row; - align-items: center; - } - .time { - margin: 3px 0 6px 0; - span { - font-family: "OpenSans-Regular"; - font-size: 12px; - color: #535961; - } - } - .add { - img { - margin-right: 6px; - } - button { - font-family: "OpenSans-Semibold"; - font-size: 13px; - color: #396CB6; - background-color: transparent; - padding: 0; - } - } - } - } - } + background-color: #EFF0F1 !important; + .card { + padding: 16px 24px; + background-color: #FFFFFF !important; + box-shadow: none; + margin: 4px 0; + width: 100%; + } + .card-header { + padding: 0 !important; + } + .card-content { + margin-top: 8px; + padding: 0 !important; + } + ion-label { + background-color: #fff; + padding: 12px 16px; + margin: 0 !important; + div { + display: inline; + float: right; + } + } + ion-row { + .date { + background-color: rgba(#E8EFF8, 0.5); + padding: 8px 14px; + .month { + font-family: "OpenSans-Bold"; + font-size: 14px; + color: #396CB6; + text-transform: uppercase; + line-height: 14px; + } + .day { + /* 25: */ + font-family: "OpenSans-Bold"; + font-size: 26px; + color: #396CB6; + line-height: 26px; + } + } + .details { + margin-left: 16px; + padding: 0 !important; + .card-content { + margin-top: 0 !important; + } + ion-card-content { + img { + width: auto; + height: 12px; + margin-right: 4px; + } + p { + display: flex; + flex-direction: row; + align-items: center; + } + .time { + margin: 3px 0 6px 0; + span { + font-family: "OpenSans-Regular"; + font-size: 12px; + color: #535961; + } + } + .add { + img { + margin-right: 6px; + } + button { + font-family: "OpenSans-Semibold"; + font-size: 13px; + color: #396CB6; + background-color: transparent; + padding: 0; + } + } + } + } + } } searchPage { - position: absolute; - top: 0 !important; - left: 0 !important; - display: block; - width: 100% !important; - height: 100% !important; - background-image: none; - .header::after { - background-image: none; - box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); - } - ion-header { - padding: 16px 24px; - background-color: #fff; - span { - font-family: "Montserrat-Regular"; - font-size: 16px; - color: #9A9FA6; - letter-spacing: 0.57px; - margin: 0 0 16px 16px; - text-transform: uppercase; - } - .toolbar-title { - padding: 0 !important; - } - .searchbar { - padding: 16px 0 0 0; - .searchbar-search-icon { - left: 90%; - background-image: url(../assets/img/search.svg); - } - .searchbar-input { - box-shadow: none; - padding: 8px 12px; - border: 1px solid transparent; - font-family: "OpenSans-Regular"; - background: rgba(239, 240, 241, 0.50); - &:focus{ - background: #fff; - border: 1px solid rgba(#3B6FBB,0.5); - } - } - } - } - ion-content { - [col-1], - [col-11] { - padding: 0 !important; - } - background-color: #EFF0F1 !important; - ion-list { - margin: 0 !important; - } - .card { - padding: 12px 16px; - margin: 0 0 2px 0; - width: 100%; - box-shadow: none; - } - .card-header { - font-family: "OpenSans-Semibold"; - font-size: 14px; - color: #3B6FBB; - line-height: 20px; - padding: 0; - } - .card-content { - font-family: "OpenSans-Regular"; - font-size: 12px; - color: #535961; - line-height: 20px; - padding: 0; - } - } -} + position: absolute; + top: 0 !important; + left: 0 !important; + display: block; + width: 100% !important; + height: 100% !important; + background-image: none; + .header::after { + background-image: none; + box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); + } + ion-header { + padding: 16px 24px; + background-color: #fff; + span { + font-family: "Montserrat-Regular"; + font-size: 16px; + color: #9A9FA6; + letter-spacing: 0.57px; + margin: 0 0 16px 16px; + text-transform: uppercase; + } + .toolbar-title { + padding: 0 !important; + } + .searchbar { + padding: 16px 0 0 0; + .searchbar-search-icon { + left: 90%; + background-image: url(../assets/img/search.svg); + } + .searchbar-input { + box-shadow: none; + padding: 8px 12px; + border: 1px solid transparent; + font-family: "OpenSans-Regular"; + background: rgba(239, 240, 241, 0.50); + &:focus { + background: #fff; + border: 1px solid rgba(#3B6FBB, 0.5); + } + } + } + } + ion-content { + [col-1], + [col-11] { + padding: 0 !important; + } + background-color: #EFF0F1 !important; + ion-list { + margin: 0 !important; + } + .card { + padding: 12px 16px; + margin: 0 0 2px 0; + width: 100%; + box-shadow: none; + } + .card-header { + font-family: "OpenSans-Semibold"; + font-size: 14px; + color: #3B6FBB; + line-height: 20px; + padding: 0; + } + .card-content { + font-family: "OpenSans-Regular"; + font-size: 12px; + color: #535961; + line-height: 20px; + padding: 0; + } + } +} \ No newline at end of file From 01a7b724e5e6d018cc082a741447366347e2f24b Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:30:38 +0000 Subject: [PATCH 6/17] Update styles --- diff --git a/src/pages/calendar/calendar.scss b/src/pages/calendar/calendar.scss index 7c6e64c..b095b2f 100644 --- a/src/pages/calendar/calendar.scss +++ b/src/pages/calendar/calendar.scss @@ -142,6 +142,7 @@ searchPage { padding: 12px 16px; margin: 0 0 2px 0; width: 100%; + background-color: #fff!important; box-shadow: none; } .card-header { diff --git a/src/pages/calendar/search.html b/src/pages/calendar/search.html index 0d951f9..87488eb 100644 --- a/src/pages/calendar/search.html +++ b/src/pages/calendar/search.html @@ -12,7 +12,6 @@ Template for the modal window for search -

{{Error}}

From 25b1524738c9758bcc9e9d53d1032e55f8f13dce Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:30:38 +0000 Subject: [PATCH 7/17] fix type of meeting time --- diff --git a/src/pages/calendar/calendar.html b/src/pages/calendar/calendar.html index 2a0f711..120765b 100644 --- a/src/pages/calendar/calendar.html +++ b/src/pages/calendar/calendar.html @@ -32,15 +32,15 @@ -

{{meeting.display.meetingMonth}}

-

{{meeting.display.meetingDate}}

+

{{meeting.time.toLocaleDateString([], { month: 'short' })}}

+

{{meeting.time.toLocaleDateString([], { day: '2-digit' })}}

{{meeting.name}}

- +

diff --git a/src/providers/fedo-cal/fedo-cal.ts b/src/providers/fedo-cal/fedo-cal.ts index fe0d5d5..f9baabb 100644 --- a/src/providers/fedo-cal/fedo-cal.ts +++ b/src/providers/fedo-cal/fedo-cal.ts @@ -126,16 +126,6 @@ export interface Meeting { * Meeting end time */ timeEnd: Date, - - /** - * Display Meeting date and time in readable format - */ - display: { - startTime: string, - endTime: string, - meetingMonth: string, - meetingDate: string - } } /** @@ -221,8 +211,8 @@ export class FedoCalService { return this.http.get(`${ENDPOINT}/meetings/`, { params: { calendar: calendar.realName, [type]: todaysDate } }) .pipe( map((data: any) => data.meetings.map(m => { - const mTime: Date = dateToMoment(m.meeting_date, m.meeting_time_start, m.meeting_timezone); - const mTimeEnd: Date = dateToMoment(m.meeting_date_end, m.meeting_time_stop, m.meeting_timezone); + const mTime: Date = dateToMoment(m.meeting_date, m.meeting_time_start, m.meeting_timezone).toDate(); + const mTimeEnd: Date = dateToMoment(m.meeting_date_end, m.meeting_time_stop, m.meeting_timezone).toDate(); return { name: m.meeting_name, @@ -230,12 +220,6 @@ export class FedoCalService { time: mTime, timeEnd: mTimeEnd, location: m.meeting_location, - display: { - startTime: mTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), - endTime: mTimeEnd.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), - meetingMonth: mTime.toLocaleDateString([], { month: 'short' }), - meetingDate: mTime.toLocaleDateString([], { day: '2-digit' }) - } }; })) ); From bcd1ae75fb5c53d826460b1f9b24c6bbc613c5f9 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:30:38 +0000 Subject: [PATCH 8/17] add notification page --- diff --git a/src/pages/calendar/calendar.ts b/src/pages/calendar/calendar.ts index 9e97943..edd6bbd 100644 --- a/src/pages/calendar/calendar.ts +++ b/src/pages/calendar/calendar.ts @@ -1,7 +1,8 @@ import { Component } from '@angular/core'; import { Calendar } from '@ionic-native/calendar'; -import { ModalController, ViewController, NavParams } from 'ionic-angular'; +import { ModalController, ViewController, NavParams, NavController } from 'ionic-angular'; +import { NotificationsPage } from '../../pages/notifications/notifications'; import { FedoCalService, Calendar as CalendarType, Meeting } from '../../providers/fedo-cal/fedo-cal'; @@ -42,7 +43,7 @@ export class CalendarPage { */ public selectedCalendar: CalendarType; - constructor(private fedoCal: FedoCalService, private calendar: Calendar, public modalCtrl: ModalController) { + constructor(private fedoCal: FedoCalService, private calendar: Calendar, public modalCtrl: ModalController, public navCtrl: NavController) { this.calendars = []; this.meetings = []; @@ -135,6 +136,14 @@ export class CalendarPage { compareCalendar(a: CalendarType, b: CalendarType) { return a.realName === b.realName; } + + + /** + * Open the notifications pane from the home page + */ + openNotificationPage() { + this.navCtrl.push(NotificationsPage, { animate: true, direction: 'forward' }); + } } /** From 565f6325f8cd48fb8c5e5b7a614f6989aa009ad3 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:30:38 +0000 Subject: [PATCH 9/17] fix font --- diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 80dc426..d2e0246 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -44,6 +44,13 @@ $app-direction: ltr; font-style: normal; } +@font-face { + font-family: 'OpenSans-Bold'; + src: url('../assets/fonts/opensans-bold-webfont.woff2') format('woff2'), url('../assets/fonts/opensans-bold-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + // Shared Variables // -------------------------------------------------- // To customize the look and feel of this app, you can override From 2170e5d06e80963f61b47d5866e3be06e705c62a Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:30:38 +0000 Subject: [PATCH 10/17] fix search icon --- diff --git a/src/pages/calendar/calendar.scss b/src/pages/calendar/calendar.scss index b095b2f..e102bc6 100644 --- a/src/pages/calendar/calendar.scss +++ b/src/pages/calendar/calendar.scss @@ -113,12 +113,13 @@ searchPage { .searchbar { padding: 16px 0 0 0; .searchbar-search-icon { - left: 90%; + right: 90%; background-image: url(../assets/img/search.svg); } .searchbar-input { box-shadow: none; - padding: 8px 12px; + padding: 8px 12px 8px 48px; + line-height: 2.5rem; border: 1px solid transparent; font-family: "OpenSans-Regular"; background: rgba(239, 240, 241, 0.50); From 6e283b7f2b60055f3f476441c51d37107bc4a6bf Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:30:38 +0000 Subject: [PATCH 11/17] add toast on calendar subscribe --- diff --git a/src/assets/img/fav.svg b/src/assets/img/fav.svg deleted file mode 100644 index c25b7c6..0000000 --- a/src/assets/img/fav.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - notstar - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/img/star-active.svg b/src/assets/img/star-active.svg new file mode 100644 index 0000000..6a3e383 --- /dev/null +++ b/src/assets/img/star-active.svg @@ -0,0 +1,12 @@ + + + + star - FontAwesome + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/assets/img/star-inactive.svg b/src/assets/img/star-inactive.svg new file mode 100644 index 0000000..c25b7c6 --- /dev/null +++ b/src/assets/img/star-inactive.svg @@ -0,0 +1,18 @@ + + + + notstar + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/calendar/calendar.ts b/src/pages/calendar/calendar.ts index edd6bbd..e8e24ee 100644 --- a/src/pages/calendar/calendar.ts +++ b/src/pages/calendar/calendar.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { Calendar } from '@ionic-native/calendar'; -import { ModalController, ViewController, NavParams, NavController } from 'ionic-angular'; +import { ModalController, ViewController, NavParams, NavController, ToastController } from 'ionic-angular'; import { NotificationsPage } from '../../pages/notifications/notifications'; import { FedoCalService, Calendar as CalendarType, Meeting } from '../../providers/fedo-cal/fedo-cal'; @@ -26,7 +26,7 @@ export class CalendarPage { /** * Set the current active segment as Upcoming Events in the interface */ - showEventsBy: String = "upcoming"; + showEventsBy: string = "upcoming"; /** * List of calendars in FedoCal @@ -159,8 +159,18 @@ export class Search { public calendars: any; - constructor(public viewCtrl: ViewController, navParams: NavParams) { + //Initialize array for showing calendar icon + calendarIcon: string[] = []; + //set icon values + activeIcon: string = '/assets/img/star-active.svg'; + inactiveIcon: string = '/assets/img/star-inactive.svg'; + + constructor(public viewCtrl: ViewController, navParams: NavParams, public toastCtrl: ToastController) { this.calendars = navParams.get('calendars'); + for (let i = 0; i < this.calendars.length; i++) { + //update src of icon + this.calendarIcon[i] = this.inactiveIcon; + } } /** @@ -181,4 +191,31 @@ export class Search { }) } } + /** + * Function called when someone taps the star to subscribe to the calendar + */ + subscribeToCal(calendar: CalendarType, i: number): void { + /** + * Declare toasts for showing events + */ + const subscribedToast = this.toastCtrl.create({ + message: 'Subscribed to calendar: ' + calendar.realName, + duration: 2000 + }); + const unsubscribedToast = this.toastCtrl.create({ + message: 'Unsubscribed from calendar: ' + calendar.realName, + duration: 2000 + }); + + /** + * Fire event on the basis of selected icon + */ + if (this.calendarIcon[i] === this.inactiveIcon) { + this.calendarIcon[i] = this.activeIcon; + subscribedToast.present(); + } else { + this.calendarIcon[i] = this.inactiveIcon; + unsubscribedToast.present(); + } + } } \ No newline at end of file diff --git a/src/pages/calendar/search.html b/src/pages/calendar/search.html index 87488eb..3f52da8 100644 --- a/src/pages/calendar/search.html +++ b/src/pages/calendar/search.html @@ -13,18 +13,18 @@ Template for the modal window for search - + - - + + - + {{calendar.displayName}} - + {{calendar.description}} From 543cd1ead8b02d4362342f25332b1119c513c00c Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:30:38 +0000 Subject: [PATCH 12/17] fix relative path to icon --- diff --git a/src/pages/calendar/calendar.ts b/src/pages/calendar/calendar.ts index e8e24ee..b2e5f2d 100644 --- a/src/pages/calendar/calendar.ts +++ b/src/pages/calendar/calendar.ts @@ -162,8 +162,8 @@ export class Search { //Initialize array for showing calendar icon calendarIcon: string[] = []; //set icon values - activeIcon: string = '/assets/img/star-active.svg'; - inactiveIcon: string = '/assets/img/star-inactive.svg'; + activeIcon: string = './assets/img/star-active.svg'; + inactiveIcon: string = './assets/img/star-inactive.svg'; constructor(public viewCtrl: ViewController, navParams: NavParams, public toastCtrl: ToastController) { this.calendars = navParams.get('calendars'); From 10c80e714de44312223e6e10ec0ba5bfe52f6e88 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:30:54 +0000 Subject: [PATCH 13/17] Add Empty States --- diff --git a/src/app/app.scss b/src/app/app.scss index 730f49b..3c7e1db 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -162,4 +162,46 @@ ion-segment { font-size: 12px; color: #3C6EB4; padding: 0; +} + +//empty state styles +.emptystate { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + align-items: center; + height: 100%; + img { + margin-bottom: 20px; + } + h1 { + font-family: "Montserrat-SemiBold"; + font-size: 19px; + color: #79818B; + margin: 0; + } + h2 { + font-family: "OpenSans-Regular"; + font-size: 14px; + color: #79818B; + line-height: 20px; + margin: 10px 0 20px 0; + img { + margin: 0 2px; + display: inline-block; + margin-bottom: 0px; + } + } + button { + padding: 12px; + width: auto; + background: transparent; + border: 1px solid #3C6EB4; + border-radius: 2px; + font-family: "Montserrat-SemiBold"; + font-size: 14px; + color: #3C6EB4; + line-height: 14px; + } } \ No newline at end of file diff --git a/src/assets/img/es-cal.svg b/src/assets/img/es-cal.svg new file mode 100644 index 0000000..ae74bfe --- /dev/null +++ b/src/assets/img/es-cal.svg @@ -0,0 +1,27 @@ + + + + event + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/es-search.svg b/src/assets/img/es-search.svg new file mode 100644 index 0000000..4c15805 --- /dev/null +++ b/src/assets/img/es-search.svg @@ -0,0 +1,21 @@ + + + + search + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/fedora.png b/src/assets/img/fedora.png new file mode 100644 index 0000000..f80951d Binary files /dev/null and b/src/assets/img/fedora.png differ diff --git a/src/pages/calendar/calendar.html b/src/pages/calendar/calendar.html index 120765b..97bed89 100644 --- a/src/pages/calendar/calendar.html +++ b/src/pages/calendar/calendar.html @@ -51,5 +51,11 @@ +

+ +

We couldn't find any events

+

Seems like the schedule is light. +
Relax and Enjoy the moment

+
\ No newline at end of file diff --git a/src/pages/calendar/calendar.scss b/src/pages/calendar/calendar.scss index e102bc6..8bd91e9 100644 --- a/src/pages/calendar/calendar.scss +++ b/src/pages/calendar/calendar.scss @@ -23,6 +23,9 @@ float: right; } } + .emptystate{ + height: 50vh; + } ion-row { .date { background-color: rgba(#E8EFF8, 0.5); diff --git a/src/pages/calendar/calendar.ts b/src/pages/calendar/calendar.ts index b2e5f2d..8074097 100644 --- a/src/pages/calendar/calendar.ts +++ b/src/pages/calendar/calendar.ts @@ -159,6 +159,10 @@ export class Search { public calendars: any; + //to store the calendars in one place when reseting the list during search query + public allCalendars: any; + + //Initialize array for showing calendar icon calendarIcon: string[] = []; //set icon values @@ -166,7 +170,11 @@ export class Search { inactiveIcon: string = './assets/img/star-inactive.svg'; constructor(public viewCtrl: ViewController, navParams: NavParams, public toastCtrl: ToastController) { - this.calendars = navParams.get('calendars'); + //store all the calendars in one place + this.allCalendars = navParams.get('calendars'); + + //initialise active list + this.calendars = this.allCalendars; for (let i = 0; i < this.calendars.length; i++) { //update src of icon this.calendarIcon[i] = this.inactiveIcon; @@ -180,16 +188,25 @@ export class Search { * * @param query search query entered in the input box */ - onInput(query: string): void { - let val: string = query; - /** - * DON'T filter the calendar IF the supplied input is an empty string - * */ - if (val.trim() !== '') { - this.calendars = this.calendars.filter((item) => { - return item.displayName.toLowerCase().indexOf(val.toLowerCase()) > -1; - }) + onInput(query:string): void { + + //reset the value of list + this.calendars = this.allCalendars + + // if the value is an empty string don't filter the items + if (!query) { + return; } + + this.calendars = this.calendars.filter((v) => { + console.log(v); + if (v.realName && query) { + if (v.realName.toLowerCase().indexOf(query.toLowerCase()) > -1) { + return true; + } + return false; + } + }); } /** * Function called when someone taps the star to subscribe to the calendar diff --git a/src/pages/calendar/search.html b/src/pages/calendar/search.html index 3f52da8..d638457 100644 --- a/src/pages/calendar/search.html +++ b/src/pages/calendar/search.html @@ -30,4 +30,9 @@ Template for the modal window for search +
+ +

We couldn’t find anything

+

Maybe a little spelling mistake?

+
\ No newline at end of file From cc538fa0451ababe6b2e05722731a0c54901b2d4 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:31:14 +0000 Subject: [PATCH 14/17] fix merge conflict and rebase --- diff --git a/src/app/app.scss b/src/app/app.scss index 3c7e1db..6b060c3 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -22,7 +22,8 @@ width: 100%; height: 100%; } -//tab icons-active + +//tab icons-active ion-icon { &[class*="fedora-"] { mask-size: contain; diff --git a/src/providers/fedo-cal/fedo-cal.ts b/src/providers/fedo-cal/fedo-cal.ts index f9baabb..c64d8b6 100644 --- a/src/providers/fedo-cal/fedo-cal.ts +++ b/src/providers/fedo-cal/fedo-cal.ts @@ -206,9 +206,10 @@ export class FedoCalService { /** * set search parameters to current date in order to get past and upcoming events */ - let todaysDate = moment().format('YYYY-MM-DD'); + let todaysDate: Date = new Date(); + let todaysString: string = todaysDate.toISOString().split('T')[0]; - return this.http.get(`${ENDPOINT}/meetings/`, { params: { calendar: calendar.realName, [type]: todaysDate } }) + return this.http.get(`${ENDPOINT}/meetings/`, { params: { calendar: calendar.realName, [type]: todaysString } }) .pipe( map((data: any) => data.meetings.map(m => { const mTime: Date = dateToMoment(m.meeting_date, m.meeting_time_start, m.meeting_timezone).toDate(); From cf862f836c4e437695ada871fd7ef991cfce4d9b Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:31:14 +0000 Subject: [PATCH 15/17] rebase and fix conflicts --- diff --git a/src/pages/calendar/calendar.html b/src/pages/calendar/calendar.html index 97bed89..c51d151 100644 --- a/src/pages/calendar/calendar.html +++ b/src/pages/calendar/calendar.html @@ -40,7 +40,7 @@

- +

@@ -51,11 +51,11 @@ -

- -

We couldn't find any events

-

Seems like the schedule is light. -
Relax and Enjoy the moment

-
+
+ +

We couldn't find any events

+

Seems like the schedule is light. +
Relax and Enjoy the moment

+
\ No newline at end of file diff --git a/src/providers/fedo-cal/fedo-cal.ts b/src/providers/fedo-cal/fedo-cal.ts index c64d8b6..e724f19 100644 --- a/src/providers/fedo-cal/fedo-cal.ts +++ b/src/providers/fedo-cal/fedo-cal.ts @@ -20,6 +20,7 @@ const ENDPOINT = chooseEndpoint('/fedocal', 'https://apps.fedoraproject.org/cale */ const CALENDAR_STORAGE_KEY = 'fedocal__calendars'; + /** * Convert calendar name from API to a value suitable for display * @@ -193,12 +194,9 @@ export class FedoCalService { } /** - * Fetch the list of meetings for a given FedoCal calendar name + * Fetch the list of meetings for a given FedoCal calendar name from FedoCal API * * @param calendar FedoCal calendar name - * @param type Type of Meetings to fetch: - * - start(starting after today i.e upcoming meetings) - * - end(ended today i.e past meetings) * @returns Observable which emits an array of meetings */ fetchMeetings(calendar: Calendar, type: string): Observable { @@ -206,14 +204,16 @@ export class FedoCalService { /** * set search parameters to current date in order to get past and upcoming events */ - let todaysDate: Date = new Date(); - let todaysString: string = todaysDate.toISOString().split('T')[0]; + let todaysDate: any = new Date(); + todaysDate = todaysDate.toISOString().split('T')[0]; - return this.http.get(`${ENDPOINT}/meetings/`, { params: { calendar: calendar.realName, [type]: todaysString } }) + return this.http.get(`${ENDPOINT}/meetings/`, { params: { calendar: calendar.realName, [type]: todaysDate } }) .pipe( map((data: any) => data.meetings.map(m => { - const mTime: Date = dateToMoment(m.meeting_date, m.meeting_time_start, m.meeting_timezone).toDate(); - const mTimeEnd: Date = dateToMoment(m.meeting_date_end, m.meeting_time_stop, m.meeting_timezone).toDate(); + // FedoCal splits an ISO8601 string and sends us the date and time, + // combine them together + const mTime: Date = new Date(`${m.meeting_date}T${m.meeting_time_start}Z`); + const mTimeEnd: Date = new Date(`${m.meeting_date_end}T${m.meeting_time_stop}Z`); return { name: m.meeting_name, @@ -233,6 +233,9 @@ export class FedoCalService { * request is persisted into the disk cache for further requests. * * @param calendar FedoCal calendar name + * @param type Type of Meetings to fetch: + * - start(starting after today i.e upcoming meetings) + * - end(ended today i.e past meetings) * @returns Observable which emits an array of meetings */ getMeetings(calendar: Calendar, type: string): Observable { diff --git a/src/theme/variables.scss b/src/theme/variables.scss index d2e0246..0c1b523 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -39,14 +39,14 @@ $app-direction: ltr; @font-face { font-family: 'OpenSans-Semibold'; - src: url($font-path+'/fonts/opensans-semibold-webfont.woff2') format('woff2'), url('../assets/fonts/opensans-semibold-webfont.woff') format('woff'); + src: url($font-path+'/opensans-semibold-webfont.woff2') format('woff2'), url('../assets/fonts/opensans-semibold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSans-Bold'; - src: url('../assets/fonts/opensans-bold-webfont.woff2') format('woff2'), url('../assets/fonts/opensans-bold-webfont.woff') format('woff'); + src: url($font-path+'/opensans-bold-webfont.woff2') format('woff2'), url('../assets/fonts/opensans-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } From 9175725d7716cfeb35b3f5f7e3cd293ca5d9d60b Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jul 04 2018 16:31:47 +0000 Subject: [PATCH 16/17] add meeting detail page --- diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 87cef94..9ae6982 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,7 +15,7 @@ import { TabsPage } from '../pages/tabs/tabs'; import { HomePage } from '../pages/home/home'; import { MagazinePage } from '../pages/magazine/magazine'; import { AskPage } from '../pages/ask/ask'; -import { CalendarPage, Search } from '../pages/calendar/calendar'; +import { CalendarPage, Search, meetingDetails } from '../pages/calendar/calendar'; import { MorePage} from '../pages/more/more'; import { NotificationsPage} from '../pages/notifications/notifications'; import { WomenPage } from '../pages/women/women'; @@ -37,7 +37,8 @@ import { Browser } from '../providers/browser/browser'; WomenPage, PackageSearchPage, ViewPackagePage, - Search + Search, + meetingDetails ], imports: [ BrowserModule, @@ -58,7 +59,8 @@ import { Browser } from '../providers/browser/browser'; WomenPage, PackageSearchPage, ViewPackagePage, - Search + Search, + meetingDetails ], providers: [ Browser, diff --git a/src/pages/calendar/calendar.html b/src/pages/calendar/calendar.html index c51d151..e6e2fb6 100644 --- a/src/pages/calendar/calendar.html +++ b/src/pages/calendar/calendar.html @@ -31,14 +31,14 @@
- +

{{meeting.time.toLocaleDateString([], { month: 'short' })}}

{{meeting.time.toLocaleDateString([], { day: '2-digit' })}}

- {{meeting.name}} + {{meeting.name}} -

+

diff --git a/src/pages/calendar/calendar.scss b/src/pages/calendar/calendar.scss index 8bd91e9..92a387a 100644 --- a/src/pages/calendar/calendar.scss +++ b/src/pages/calendar/calendar.scss @@ -23,7 +23,7 @@ float: right; } } - .emptystate{ + .emptystate { height: 50vh; } ion-row { @@ -87,7 +87,7 @@ } } -searchPage { +searchpage { position: absolute; top: 0 !important; left: 0 !important; @@ -99,6 +99,41 @@ searchPage { background-image: none; box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); } + ion-content { + [col-1], + [col-11] { + padding: 0 !important; + } + background-color: #EFF0F1 !important; + ion-list { + margin: 0 !important; + } + .card { + padding: 12px 16px; + margin: 0 0 2px 0; + width: 100%; + background-color: #fff !important; + box-shadow: none; + } + .card-header { + font-family: "OpenSans-Semibold"; + font-size: 14px; + color: #3B6FBB; + line-height: 20px; + padding: 0; + } + .card-content { + font-family: "OpenSans-Regular"; + font-size: 12px; + color: #535961; + line-height: 20px; + padding: 0; + } + } +} + +searchpage, +meetingdetails { ion-header { padding: 16px 24px; background-color: #fff; @@ -133,35 +168,48 @@ searchPage { } } } - ion-content { - [col-1], - [col-11] { - padding: 0 !important; +} + +meetingdetails { + .header-md::after { + background-color: #ECEDEE; + background-image: none; + } + .scroll-content { + padding: 24px !important; + h1 { + margin: 0 0 12px 0; + font-family: "OpenSans-Semibold"; + font-size: 16px; + color: #3C6EB4; + line-height: 20px; } - background-color: #EFF0F1 !important; - ion-list { - margin: 0 !important; + hr { + height: 0; + background-color: none; + border: 1px solid #EFF0F1; + margin: 0; } - .card { - padding: 12px 16px; - margin: 0 0 2px 0; - width: 100%; - background-color: #fff!important; - box-shadow: none; + .info { + margin: 12px 0; + max-width: 100%; + ion-label { + margin: 0 0 6px 0; + font-size: 11px; + } + p { + margin: 0; + } } - .card-header { + button { + margin-top: 12px; + background-color: #3C6EB4; + width: 100%; + padding: 14px; font-family: "OpenSans-Semibold"; font-size: 14px; - color: #3B6FBB; - line-height: 20px; - padding: 0; - } - .card-content { - font-family: "OpenSans-Regular"; - font-size: 12px; - color: #535961; - line-height: 20px; - padding: 0; + color: #FFFFFF; + text-align: center; } } } \ No newline at end of file diff --git a/src/pages/calendar/calendar.ts b/src/pages/calendar/calendar.ts index 8074097..4edfbbe 100644 --- a/src/pages/calendar/calendar.ts +++ b/src/pages/calendar/calendar.ts @@ -144,6 +144,14 @@ export class CalendarPage { openNotificationPage() { this.navCtrl.push(NotificationsPage, { animate: true, direction: 'forward' }); } + + /** + * Pushes the meeting details page for specific meeting + * @param meeting meeting page to open + */ + openMeetingDetails(meeting: Meeting) { + this.navCtrl.push(meetingDetails, { meeting: meeting }); + } } /** @@ -152,7 +160,7 @@ export class CalendarPage { @Component({ templateUrl: 'search.html', - selector: 'searchPage', + selector: 'searchpage', providers: [FedoCalService, Calendar] }) export class Search { @@ -172,7 +180,7 @@ export class Search { constructor(public viewCtrl: ViewController, navParams: NavParams, public toastCtrl: ToastController) { //store all the calendars in one place this.allCalendars = navParams.get('calendars'); - + //initialise active list this.calendars = this.allCalendars; for (let i = 0; i < this.calendars.length; i++) { @@ -188,11 +196,11 @@ export class Search { * * @param query search query entered in the input box */ - onInput(query:string): void { + onInput(query: string): void { //reset the value of list this.calendars = this.allCalendars - + // if the value is an empty string don't filter the items if (!query) { return; @@ -235,4 +243,31 @@ export class Search { unsubscribedToast.present(); } } +} + +@Component({ + templateUrl: 'meeting-details.html', + selector: 'meetingdetails', + providers: [Calendar] +}) +export class meetingDetails { + private meeting: Meeting; + constructor(public navCtrl: NavController, params: NavParams, private calendar: Calendar) { + this.meeting = params.data.meeting; + } + + /** + * Add a FedoCal meeting to the system calendar + * + * @param meeting meeting to add to the calendar + */ + addToCalendar(meeting: Meeting): void { + this.calendar.createEventInteractively( + meeting.name, + meeting.location, + meeting.description, + meeting.time, + meeting.timeEnd + ); + } } \ No newline at end of file diff --git a/src/pages/calendar/meeting-details.html b/src/pages/calendar/meeting-details.html new file mode 100644 index 0000000..0c86f36 --- /dev/null +++ b/src/pages/calendar/meeting-details.html @@ -0,0 +1,43 @@ + + + + + + Meeting Details + + + +

{{meeting.name}}

+
+ +
+ Description +

+
+ + + +
+ Date +

{{meeting.time.toLocaleDateString([], { month: 'long', year: 'numeric', day: '2-digit' })}}

+
+ + +
+ Time +

+
+ + + +
+ Location +

{{meeting.location}}

+
+ + + \ No newline at end of file From 5c5dfe93f6174ff43c6ffb4e5b90e91c79cb2c07 Mon Sep 17 00:00:00 2001 From: Abhishek Date: Jul 09 2018 13:42:57 +0000 Subject: [PATCH 17/17] fix add to calendar button --- diff --git a/src/pages/calendar/calendar.ts b/src/pages/calendar/calendar.ts index 4edfbbe..4e97e46 100644 --- a/src/pages/calendar/calendar.ts +++ b/src/pages/calendar/calendar.ts @@ -250,6 +250,7 @@ export class Search { selector: 'meetingdetails', providers: [Calendar] }) + export class meetingDetails { private meeting: Meeting; constructor(public navCtrl: NavController, params: NavParams, private calendar: Calendar) { diff --git a/src/pages/calendar/meeting-details.html b/src/pages/calendar/meeting-details.html index 0c86f36..d781b51 100644 --- a/src/pages/calendar/meeting-details.html +++ b/src/pages/calendar/meeting-details.html @@ -37,7 +37,7 @@ Template for the meeting detail

{{meeting.location}}

- \ No newline at end of file