mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 12:37:53 +00:00
Add calendar timeline
This commit is contained in:
Peter Maquiran
@@ -28,6 +28,10 @@
|
||||
<ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
|
||||
<ion-label>Chat</ion-label>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="search">
|
||||
<ion-icon name="search"></ion-icon>
|
||||
<ion-label>Pesquisa</ion-label>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
|
||||
</ion-tabs>
|
||||
|
||||
@@ -16,223 +16,211 @@
|
||||
<ion-header>
|
||||
<ion-toolbar class="bg-blue">
|
||||
<div class="main-content">
|
||||
<!-- Toolbar -->
|
||||
<ion-toolbar>
|
||||
<!-- <ion-segment [(ngModel)]="segment">
|
||||
<ion-segment-button value="Combinada">
|
||||
Combinada
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Oficial">
|
||||
Oficial
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Pessoal">
|
||||
Pessoal
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
-->
|
||||
|
||||
<!-- Calendar is here -->
|
||||
<div [ngSwitch]="segment">
|
||||
<div *ngSwitchCase="'Combinada'">
|
||||
|
||||
<ion-row class="ion-justify-content-between calendar-tool-tip">
|
||||
<ion-row class="ion-align-items-center">
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-button fill="clear" (click)="back()">
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
|
||||
</ion-button>
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
<ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<ion-button fill="clear" (click)="next()">
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-row>
|
||||
<ion-row class="ion-align-items-center">
|
||||
<ion-icon name="add-circle-outline"></ion-icon>
|
||||
<ion-icon name="add-circle-outline"></ion-icon>
|
||||
<ion-icon name="add" (click)="openCalModal()" ></ion-icon>
|
||||
</ion-row>
|
||||
</ion-row>
|
||||
|
||||
<calendar
|
||||
[eventSource]="eventSource"
|
||||
[calendarMode]="calendar.mode"
|
||||
[currentDate]="calendar.currentDate"
|
||||
(onEventSelected)="onEventSelected($event)"
|
||||
(onTitleChanged)="onViewTitleChanged($event)"
|
||||
(onRangeChanged)="onRangeChanged($event)"
|
||||
(onCurrentDateChanged)="onCurrentChanged($event)"
|
||||
queryMode="remote"
|
||||
startHour="6"
|
||||
endHour="20"
|
||||
step="30"
|
||||
startingDayMonth="1"
|
||||
noEventsLabel="Sem Eventos"
|
||||
allDayLabel="Todo o dia"
|
||||
[monthviewDisplayEventTemplate]="template"
|
||||
>
|
||||
</calendar>
|
||||
|
||||
<!-- Adding a customized ng-template -->
|
||||
<ng-template #template let-view="view" let-row="row" let-col="col">
|
||||
<div [class.with-event]="view.dates[row*7+col].events.length">
|
||||
{{view.dates[row*7+col].label}}
|
||||
<div class="indicator-container">
|
||||
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div *ngSwitchCase="'Pessoal'">
|
||||
<ion-row>
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="back()">
|
||||
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<!-- The title of the calendar in the middle -->
|
||||
<ion-col size="8" class="ion-text-center">
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
</ion-col>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="next()">
|
||||
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<calendar
|
||||
[eventSource]="eventSource"
|
||||
[calendarMode]="calendar.mode"
|
||||
[currentDate]="calendar.currentDate"
|
||||
(onEventSelected)="onEventSelected($event)"
|
||||
(onTitleChanged)="onViewTitleChanged($event)"
|
||||
(onRangeChanged)="onRangeChanged($event)"
|
||||
(onCurrentDateChanged)="onCurrentChanged($event)"
|
||||
queryMode="remote"
|
||||
startHour="6"
|
||||
endHour="20"
|
||||
step="30"
|
||||
startingDayMonth="1"
|
||||
noEventsLabel="Sem Eventos"
|
||||
allDayLabel="Todo o dia"
|
||||
[monthviewDisplayEventTemplate]="template"
|
||||
>
|
||||
</calendar>
|
||||
<!-- (onTimeSelected)="onTimeSelected($event)" -->
|
||||
|
||||
<!-- Adding a customized ng-template -->
|
||||
<ng-template #template let-view="view" let-row="row" let-col="col">
|
||||
<div [class.with-event]="view.dates[row*7+col].events.length">
|
||||
{{view.dates[row*7+col].label}}
|
||||
<div class="indicator-container">
|
||||
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
<div *ngSwitchCase="'Oficial'">
|
||||
<ion-row>
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="back()">
|
||||
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<!-- The title of the calendar in the middle -->
|
||||
<ion-col size="8" class="ion-text-center">
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
</ion-col>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="next()">
|
||||
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<calendar
|
||||
[eventSource]="eventSource"
|
||||
[calendarMode]="calendar.mode"
|
||||
[currentDate]="calendar.currentDate"
|
||||
(onEventSelected)="onEventSelected($event)"
|
||||
(onTitleChanged)="onViewTitleChanged($event)"
|
||||
(onRangeChanged)="onRangeChanged($event)"
|
||||
(onCurrentDateChanged)="onCurrentChanged($event)"
|
||||
queryMode="remote"
|
||||
startHour="6"
|
||||
endHour="20"
|
||||
step="30"
|
||||
startingDayMonth="1"
|
||||
noEventsLabel="Sem Eventos"
|
||||
allDayLabel="Todo o dia"
|
||||
[monthviewDisplayEventTemplate]="template"
|
||||
>
|
||||
</calendar>
|
||||
|
||||
<!-- Adding a customized ng-template -->
|
||||
<ng-template #template let-view="view" let-row="row" let-col="col">
|
||||
<div [class.with-event]="view.dates[row*7+col].events.length">
|
||||
{{view.dates[row*7+col].label}}
|
||||
<div class="indicator-container">
|
||||
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
|
||||
<!-- Calendar is here -->
|
||||
|
||||
<!-- Progress bar -->
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div [ngSwitch]="segment">
|
||||
<div *ngSwitchCase="'Combinada'">
|
||||
<ion-row>
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="back()">
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<!-- The title of the calendar in the middle -->
|
||||
<ion-col size="8" class="ion-text-center">
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
</ion-col>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="next()">
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<calendar
|
||||
[eventSource]="eventSource"
|
||||
[calendarMode]="calendar.mode"
|
||||
[currentDate]="calendar.currentDate"
|
||||
(onEventSelected)="onEventSelected($event)"
|
||||
(onTitleChanged)="onViewTitleChanged($event)"
|
||||
(onRangeChanged)="onRangeChanged($event)"
|
||||
(onCurrentDateChanged)="onCurrentChanged($event)"
|
||||
queryMode="remote"
|
||||
startHour="6"
|
||||
endHour="20"
|
||||
step="30"
|
||||
startingDayMonth="1"
|
||||
noEventsLabel="Sem Eventos"
|
||||
allDayLabel="Todo o dia"
|
||||
[monthviewDisplayEventTemplate]="template"
|
||||
>
|
||||
</calendar>
|
||||
|
||||
<!-- Adding a customized ng-template -->
|
||||
<ng-template #template let-view="view" let-row="row" let-col="col">
|
||||
<div [class.with-event]="view.dates[row*7+col].events.length">
|
||||
{{view.dates[row*7+col].label}}
|
||||
<div class="indicator-container">
|
||||
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div *ngSwitchCase="'Pessoal'">
|
||||
<ion-row>
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="back()">
|
||||
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<!-- The title of the calendar in the middle -->
|
||||
<ion-col size="8" class="ion-text-center">
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
</ion-col>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="next()">
|
||||
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<calendar
|
||||
[eventSource]="eventSource"
|
||||
[calendarMode]="calendar.mode"
|
||||
[currentDate]="calendar.currentDate"
|
||||
(onEventSelected)="onEventSelected($event)"
|
||||
(onTitleChanged)="onViewTitleChanged($event)"
|
||||
(onRangeChanged)="onRangeChanged($event)"
|
||||
(onCurrentDateChanged)="onCurrentChanged($event)"
|
||||
queryMode="remote"
|
||||
startHour="6"
|
||||
endHour="20"
|
||||
step="30"
|
||||
startingDayMonth="1"
|
||||
noEventsLabel="Sem Eventos"
|
||||
allDayLabel="Todo o dia"
|
||||
[monthviewDisplayEventTemplate]="template"
|
||||
>
|
||||
</calendar>
|
||||
<!-- (onTimeSelected)="onTimeSelected($event)" -->
|
||||
<!-- Calendar currente date -->
|
||||
|
||||
<!-- Adding a customized ng-template -->
|
||||
<ng-template #template let-view="view" let-row="row" let-col="col">
|
||||
<div [class.with-event]="view.dates[row*7+col].events.length">
|
||||
{{view.dates[row*7+col].label}}
|
||||
<div class="indicator-container">
|
||||
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
<div *ngSwitchCase="'Oficial'">
|
||||
<ion-row>
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="back()">
|
||||
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<!-- The title of the calendar in the middle -->
|
||||
<ion-col size="8" class="ion-text-center">
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
</ion-col>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="next()">
|
||||
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<calendar
|
||||
[eventSource]="eventSource"
|
||||
[calendarMode]="calendar.mode"
|
||||
[currentDate]="calendar.currentDate"
|
||||
(onEventSelected)="onEventSelected($event)"
|
||||
(onTitleChanged)="onViewTitleChanged($event)"
|
||||
(onRangeChanged)="onRangeChanged($event)"
|
||||
(onCurrentDateChanged)="onCurrentChanged($event)"
|
||||
queryMode="remote"
|
||||
startHour="6"
|
||||
endHour="20"
|
||||
step="30"
|
||||
startingDayMonth="1"
|
||||
noEventsLabel="Sem Eventos"
|
||||
allDayLabel="Todo o dia"
|
||||
[monthviewDisplayEventTemplate]="template"
|
||||
>
|
||||
</calendar>
|
||||
|
||||
<!-- Adding a customized ng-template -->
|
||||
<ng-template #template let-view="view" let-row="row" let-col="col">
|
||||
<div [class.with-event]="view.dates[row*7+col].events.length">
|
||||
{{view.dates[row*7+col].label}}
|
||||
<div class="indicator-container">
|
||||
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="end" slot="fixed" (click)="openCalModal()">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add" ></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
</div>
|
||||
<ion-row class="ion-justify-content-between ion-align-items-center currente-date-timelien">
|
||||
<ion-row class="timeline-date">
|
||||
Hoje, {{ timelineDate }}
|
||||
</ion-row>
|
||||
<ion-row class="filter ion-align-items-center">
|
||||
<div class="filter-name">Tudos</div>
|
||||
<ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
|
||||
</ion-row>
|
||||
</ion-row>
|
||||
|
||||
<!-- Timelien -->
|
||||
<div *ngIf="showTimeline">
|
||||
<mwl-demo-utils-calendar-header class="timeline"
|
||||
[(view)]="view"
|
||||
[(viewDate)]="viewDate"
|
||||
[dayStartHour]="9"
|
||||
[dayEndHour]="17">
|
||||
[dayStartHour]="0"
|
||||
[dayEndHour]="23">
|
||||
</mwl-demo-utils-calendar-header>
|
||||
|
||||
<div [ngSwitch]="view">
|
||||
<mwl-calendar-month-view
|
||||
*ngSwitchCase="'month'"
|
||||
[viewDate]="viewDate"
|
||||
[events]="events"
|
||||
>
|
||||
</mwl-calendar-month-view>
|
||||
<mwl-calendar-week-view
|
||||
*ngSwitchCase="'week'"
|
||||
[viewDate]="viewDate"
|
||||
[events]="events"
|
||||
>
|
||||
</mwl-calendar-week-view>
|
||||
<mwl-calendar-day-view
|
||||
*ngSwitchCase="'day'"
|
||||
[viewDate]="viewDate"
|
||||
[events]="events"
|
||||
(eventClicked)="eventClicked($event)"
|
||||
>
|
||||
</mwl-calendar-day-view>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</ion-content>
|
||||
@@ -282,3 +282,35 @@ label{
|
||||
background-color: #42b9fe !important;
|
||||
}
|
||||
|
||||
.calendar-tool-tip{
|
||||
ion-icon{
|
||||
font-size: 35px;
|
||||
}
|
||||
.arrow-down{
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.currente-date-timelien{
|
||||
padding: 10px 20px;
|
||||
.timeline-date{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.filter{
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
ion-icon{
|
||||
font-size: 35px;
|
||||
color: #0d89d1;
|
||||
}
|
||||
.filter-name{
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -30,8 +30,6 @@ import { CustomDateFormatter } from './custom-date-formatter.provider';
|
||||
],
|
||||
})
|
||||
export class AgendaPage implements OnInit {
|
||||
|
||||
title = 'my-dream-app';
|
||||
|
||||
view: CalendarView = CalendarView.Day;
|
||||
|
||||
@@ -43,6 +41,8 @@ export class AgendaPage implements OnInit {
|
||||
|
||||
CalendarView = CalendarView;
|
||||
|
||||
timelineDate: string;
|
||||
|
||||
setView(view: CalendarView) {
|
||||
this.view = view;
|
||||
}
|
||||
@@ -115,6 +115,9 @@ export class AgendaPage implements OnInit {
|
||||
private router: Router,
|
||||
private alertCrontroller: AlertService
|
||||
) {
|
||||
|
||||
this.timelineDate = formatDate(new Date,'dd MMMM yyyy', 'pt');
|
||||
|
||||
setTimeout(()=>{
|
||||
// console.log(JSON.stringify(this.events));
|
||||
// console.log(this.events);
|
||||
@@ -156,13 +159,26 @@ export class AgendaPage implements OnInit {
|
||||
onViewTitleChanged(title){
|
||||
this.viewTitle = title;
|
||||
}
|
||||
|
||||
// Show information of the event for timeline
|
||||
eventClicked({ event }: { event: CalendarEvent }): void {
|
||||
console.log('Event clicked', event);
|
||||
this.eventSelectedDate = event.start;
|
||||
this.router.navigate(["/home/agenda", event.id, 'agenda']);
|
||||
}
|
||||
|
||||
//Show information of the event
|
||||
async onEventSelected(ev: { event: Event}){
|
||||
this.router.navigate(["/home/agenda", ev.event.EventId, 'agenda']);
|
||||
}
|
||||
|
||||
|
||||
onCurrentChanged = (ev: Date) => {
|
||||
this.eventSelectedDate = ev;
|
||||
// timeline change date
|
||||
this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt');
|
||||
this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt'));
|
||||
// calendar change date
|
||||
this.eventSelectedDate = ev;
|
||||
};
|
||||
|
||||
/* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
|
||||
@@ -173,6 +189,7 @@ export class AgendaPage implements OnInit {
|
||||
onRangeChanged (ev: { startTime: Date, endTime: Date }) {
|
||||
this.rangeStartDate = ev.startTime;
|
||||
this.rangeEndDate = ev.endTime;
|
||||
console.log('!!!')
|
||||
|
||||
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
||||
};
|
||||
@@ -224,6 +241,9 @@ export class AgendaPage implements OnInit {
|
||||
}
|
||||
|
||||
loadRangeEvents(startTime: Date, endTime: Date){
|
||||
|
||||
console.log('Update date');
|
||||
|
||||
this.showTimeline = false;
|
||||
this.showLoader = true;
|
||||
|
||||
@@ -236,7 +256,7 @@ export class AgendaPage implements OnInit {
|
||||
|
||||
|
||||
if(this.profile == "mdgpr"){
|
||||
this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
|
||||
this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd', 'pt'), formatDate(endTime, 'yyyy-MM-dd', 'pt')).subscribe(
|
||||
response => {
|
||||
this.eventsList = response;
|
||||
// loop
|
||||
@@ -250,8 +270,8 @@ export class AgendaPage implements OnInit {
|
||||
event: element
|
||||
});
|
||||
|
||||
const startHours = formatDate(new Date(element.StartDate), 'HH:mm', 'pt');
|
||||
const EndHours = formatDate(new Date(element.EndDate), 'HH:mm', 'pt');
|
||||
const startHours = formatDate(new Date(element.StartDate), 'HH', 'pt');
|
||||
const EndHours = formatDate(new Date(element.EndDate), 'HH', 'pt');
|
||||
|
||||
this.events.push({
|
||||
title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName),
|
||||
@@ -261,6 +281,7 @@ export class AgendaPage implements OnInit {
|
||||
primary: 'white',
|
||||
secondary: 'white'
|
||||
},
|
||||
id: element.EventId
|
||||
});
|
||||
|
||||
});
|
||||
@@ -377,6 +398,10 @@ export class AgendaPage implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
actions(){
|
||||
|
||||
}
|
||||
|
||||
doRefresh(ev: any){
|
||||
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -94,7 +94,14 @@
|
||||
<!-- most searched word-->
|
||||
<div class="most-searched-words" *ngIf="!showDocuments">
|
||||
<p class="title ion-text-center">Palavras mais pesquisadas</p>
|
||||
|
||||
<div>
|
||||
<angular-tag-cloud class="world-cloud"
|
||||
[data]="data"
|
||||
[width]=width
|
||||
[height]=height
|
||||
[overflow]=true>
|
||||
</angular-tag-cloud>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- search result document-->
|
||||
|
||||
@@ -33,20 +33,18 @@ export class SearchPage implements OnInit {
|
||||
showDocuments = false;
|
||||
showAdvanceSearch = false;
|
||||
|
||||
options: CloudOptions = {
|
||||
// if width is between 0 and 1 it will be set to the width of the upper element multiplied by the value
|
||||
width: 1000,
|
||||
// if height is between 0 and 1 it will be set to the height of the upper element multiplied by the value
|
||||
height: 400,
|
||||
overflow: false,
|
||||
};
|
||||
|
||||
data: CloudData[] = [
|
||||
{text: 'Weight-8-link-color', weight: 8, link: 'https://google.com', color: '#ffaaee'},
|
||||
{text: 'Weight-10-link', weight: 10, link: 'https://google.com', tooltip: 'display a tooltip'},
|
||||
// ...
|
||||
];
|
||||
height: number = 411;
|
||||
width: number = 411;
|
||||
|
||||
data: CloudData[] = [
|
||||
{text: 'Docents', weight: 0.1, color: '#ffaaee'},
|
||||
{text: '1232', weight: 0.2, tooltip: 'display a tooltip'},
|
||||
{text: 'Dcuments', weight: 0.1, color: '#ffaaee'},
|
||||
{text: 'Cat', weight: 0.3, color: '#ffaaee'},
|
||||
{text: 'Dogs', weight: 0.1, tooltip: 'display a tooltip'},
|
||||
{text: 'cars', weight: 0.2, color: '#ffaaee'},
|
||||
];
|
||||
|
||||
// See http://idangero.us/swiper/api/ for valid options.
|
||||
slideOpts = {
|
||||
slidesPerView: 3,
|
||||
|
||||
Executable
+11
@@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
|
||||
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g stroke="#42B9FE" stroke-width="2">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M15.5 7.5L9.5 13 15.5 18.5" transform="translate(-161 -114) translate(0 109) matrix(-1 0 0 1 186 5) matrix(0 -1 -1 0 25.5 25.5)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 480 B |
+25
-6
@@ -45,7 +45,6 @@ td.monthview-current{
|
||||
text-align: center;
|
||||
padding-left: 9px;
|
||||
color: white;
|
||||
background: #42b9fe;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,9 +68,6 @@ td.monthview-selected {
|
||||
background-color: #42b9fe !important;
|
||||
}
|
||||
.timeline .cal-event, .cal-event{
|
||||
background-color: white !important;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important;
|
||||
border: solid 1px #e9e9e9 !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
@@ -89,7 +85,7 @@ td.monthview-selected {
|
||||
left: 55px;
|
||||
position: absolute;
|
||||
border-radius: 91px;
|
||||
top: -2.5px;
|
||||
top: -3.5px;
|
||||
|
||||
}
|
||||
|
||||
@@ -100,6 +96,10 @@ td.monthview-selected {
|
||||
}
|
||||
|
||||
.timeline-box{
|
||||
padding: 3px;
|
||||
background-color: white !important;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important;
|
||||
border: solid 1px #e9e9e9 !important;
|
||||
color: black;
|
||||
.timeline-start-time, .timeline-location{
|
||||
font-family: Roboto;
|
||||
@@ -123,7 +123,26 @@ td.monthview-selected {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.table-bordered, .table-bordered{
|
||||
border: none !important;
|
||||
td, th {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
.cal-tooltip, .cal-tooltip-top{
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ionic calendar2
|
||||
.event-detail-container{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cal-week-view {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.timeline-box-{}
|
||||
/* angular-cli file: src/styles.css */
|
||||
@import "../node_modules/angular-calendar/css/angular-calendar.css";
|
||||
@import "../node_modules/angular-calendar/css/angular-calendar.css";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user