-
{{ 'name' | thingTranslate: item }}
+
{{ 'name' | thingTranslate: item }}
diff --git a/src/app/modules/data/types/dish/dish-list-item.html b/src/app/modules/data/types/dish/dish-list-item.html
index 5d5f5817..30e19772 100644
--- a/src/app/modules/data/types/dish/dish-list-item.html
+++ b/src/app/modules/data/types/dish/dish-list-item.html
@@ -2,8 +2,8 @@
-
{{ 'name' | thingTranslate: item }}
-
+ {{ 'name' | thingTranslate: item }}
+
{{ 'description' | thingTranslate: item }}
{{ 'categories' | thingTranslate: item | join: ', ' }}
diff --git a/src/app/modules/data/types/event/event-list-item.html b/src/app/modules/data/types/event/event-list-item.html
index 30b02e82..a1a66915 100644
--- a/src/app/modules/data/types/event/event-list-item.html
+++ b/src/app/modules/data/types/event/event-list-item.html
@@ -2,18 +2,22 @@
-
{{ item.name }}
-
{{ item.description }}
-
{{ item.academicTerms[0].name }}
+
{{ item.name }}
+
{{ item.description }}
+
+ {{ item.academicTerms[0].name }}
+
{{ item.type }} ({{ item.categories.join(', ') }})
- {{ item.name }}
- {{ item.description }}
- {{ item.academicTerms[0].name }}
+ {{ item.name }}
+ {{ item.description }}
+
+ {{ item.academicTerms[0].name }}
+
{{ item.type }}
diff --git a/src/app/modules/data/types/favorite/favorite-list-item.html b/src/app/modules/data/types/favorite/favorite-list-item.html
index 9e4f76bb..3b018797 100644
--- a/src/app/modules/data/types/favorite/favorite-list-item.html
+++ b/src/app/modules/data/types/favorite/favorite-list-item.html
@@ -2,11 +2,11 @@
-
+
{{ 'name' | thingTranslate: item }}:
{{ 'name' | thingTranslate: item.data }}
-
-
+
+
@@ -44,7 +47,7 @@
{{ item.name }}
diff --git a/src/app/modules/data/types/message/message-detail-content.scss b/src/app/modules/data/types/message/message-detail-content.scss
index aff5a181..13622255 100644
--- a/src/app/modules/data/types/message/message-detail-content.scss
+++ b/src/app/modules/data/types/message/message-detail-content.scss
@@ -36,4 +36,10 @@
margin: 0 auto;
}
}
+
+ .date-published {
+ --ion-card-color: var(--ion-color-medium-shade);
+ text-transform: uppercase;
+ font-weight: var(--font-weight-semi-bold);
+ }
}
diff --git a/src/app/modules/data/types/message/message-list-item.html b/src/app/modules/data/types/message/message-list-item.html
index 0132c6f1..27d43f43 100644
--- a/src/app/modules/data/types/message/message-list-item.html
+++ b/src/app/modules/data/types/message/message-list-item.html
@@ -2,7 +2,7 @@
-
{{ 'name' | thingTranslate: item }}
+
{{ 'name' | thingTranslate: item }}
-
{{ 'name' | thingTranslate: item }}
-
+ {{ 'name' | thingTranslate: item }}
+
{{ 'description' | thingTranslate: item }}
{{ 'type' | thingTranslate: item }}
diff --git a/src/app/modules/data/types/person/person-list-item.html b/src/app/modules/data/types/person/person-list-item.html
index 9578abf1..c6b68007 100644
--- a/src/app/modules/data/types/person/person-list-item.html
+++ b/src/app/modules/data/types/person/person-list-item.html
@@ -2,10 +2,10 @@
-
+
{{ 'name' | thingTranslate: item }}
, {{ item.honorificPrefix }}
-
+
diff --git a/src/app/modules/data/types/place/place-list-item.html b/src/app/modules/data/types/place/place-list-item.html
index d4146272..11a2cac3 100644
--- a/src/app/modules/data/types/place/place-list-item.html
+++ b/src/app/modules/data/types/place/place-list-item.html
@@ -2,12 +2,10 @@
-
{{ 'name' | thingTranslate: item }}
+
{{ 'name' | thingTranslate: item }}
-
-
- {{ item.openingHours | openingHours }}
-
+
+ {{ item.openingHours | openingHours }}
{
- void this.router.navigate(['data-detail', item.uid]);
- }),
- );
+ if (!this.openAsModal) {
+ this.subscriptions.push(
+ this.dataRoutingService.itemSelectListener().subscribe(item => {
+ void this.router.navigate(['/data-detail', item.uid]);
+ }),
+ );
+ }
}
/**
diff --git a/src/app/modules/data/types/place/special/mensa/place-mensa.html b/src/app/modules/data/types/place/special/mensa/place-mensa.html
index 600f417e..e03e70f7 100644
--- a/src/app/modules/data/types/place/special/mensa/place-mensa.html
+++ b/src/app/modules/data/types/place/special/mensa/place-mensa.html
@@ -16,10 +16,27 @@
diff --git a/src/app/modules/data/types/semester/semester-list-item.html b/src/app/modules/data/types/semester/semester-list-item.html
index 863a2d23..4390753a 100644
--- a/src/app/modules/data/types/semester/semester-list-item.html
+++ b/src/app/modules/data/types/semester/semester-list-item.html
@@ -2,8 +2,8 @@
-
{{ 'name' | thingTranslate: item }}
-
+ {{ 'name' | thingTranslate: item }}
+
{{ item.startDate | dateFormat }} -
diff --git a/src/app/modules/data/types/video/video-list-item.html b/src/app/modules/data/types/video/video-list-item.html
index 863a039c..abfe344e 100644
--- a/src/app/modules/data/types/video/video-list-item.html
+++ b/src/app/modules/data/types/video/video-list-item.html
@@ -2,8 +2,8 @@
-
{{ 'name' | thingTranslate: item }}
-
+ {{ 'name' | thingTranslate: item }}
+
-
+
-
{{ 'feedback.page.TITLE' | translate }}
diff --git a/src/app/modules/feedback/feedback.module.ts b/src/app/modules/feedback/feedback.module.ts
index 044accaf..5a39cf35 100644
--- a/src/app/modules/feedback/feedback.module.ts
+++ b/src/app/modules/feedback/feedback.module.ts
@@ -20,6 +20,7 @@ import {FeedbackPageComponent} from './feedback-page.component';
import {RouterModule, Routes} from '@angular/router';
import {TranslateModule} from '@ngx-translate/core';
import {MarkdownModule} from 'ngx-markdown';
+import {UtilModule} from '../../util/util.module';
const feedbackRoutes: Routes = [
{
@@ -36,6 +37,7 @@ const feedbackRoutes: Routes = [
RouterModule.forChild(feedbackRoutes),
TranslateModule,
MarkdownModule,
+ UtilModule,
],
declarations: [FeedbackPageComponent],
})
diff --git a/src/app/modules/hebis/hebis-detail/hebis-detail-content.html b/src/app/modules/hebis/hebis-detail/hebis-detail-content.html
index 5d1287a1..14cb9475 100644
--- a/src/app/modules/hebis/hebis-detail/hebis-detail-content.html
+++ b/src/app/modules/hebis/hebis-detail/hebis-detail-content.html
@@ -14,7 +14,7 @@
-
diff --git a/src/app/modules/hebis/hebis-detail/hebis-detail.html b/src/app/modules/hebis/hebis-detail/hebis-detail.html
index 75859e20..02e1f449 100644
--- a/src/app/modules/hebis/hebis-detail/hebis-detail.html
+++ b/src/app/modules/hebis/hebis-detail/hebis-detail.html
@@ -1,31 +1,48 @@
+
+
-
+
-
{{ 'data.detail.TITLE' | translate }}
-
-
-
+
+
+
{{ 'data.detail.COULD_NOT_CONNECT' | translate }}
-
-
+
+
{{ 'data.detail.NOT_FOUND' | translate }}
diff --git a/src/app/modules/hebis/hebis-routing.module.ts b/src/app/modules/hebis/hebis-routing.module.ts
index 338e7d47..48764484 100644
--- a/src/app/modules/hebis/hebis-routing.module.ts
+++ b/src/app/modules/hebis/hebis-routing.module.ts
@@ -19,6 +19,7 @@ import {HebisSearchPageComponent} from './list/hebis-search-page.component';
const hebisRoutes: Routes = [
{path: 'hebis-search', component: HebisSearchPageComponent},
+ {path: 'hebis-search/:term', component: HebisSearchPageComponent},
{path: 'hebis-detail/:uid', component: HebisDetailComponent},
];
diff --git a/src/app/modules/hebis/list/hebis-search-page.component.ts b/src/app/modules/hebis/list/hebis-search-page.component.ts
index 054d4e9b..ee2a7ca1 100644
--- a/src/app/modules/hebis/list/hebis-search-page.component.ts
+++ b/src/app/modules/hebis/list/hebis-search-page.component.ts
@@ -13,7 +13,7 @@
* this program. If not, see
.
*/
import {Component, Input, OnInit, OnDestroy} from '@angular/core';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
import {AlertController} from '@ionic/angular';
import {NGXLogger} from 'ngx-logger';
import {combineLatest} from 'rxjs';
@@ -24,6 +24,7 @@ import {DataRoutingService} from '../../data/data-routing.service';
import {SearchPageComponent} from '../../data/list/search-page.component';
import {HebisDataProvider} from '../hebis-data.provider';
import {PositionService} from '../../map/position.service';
+import {ConfigProvider} from '../../config/config.provider';
/**
* HebisSearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -31,6 +32,7 @@ import {PositionService} from '../../map/position.service';
@Component({
selector: 'stapps-hebissearch-page',
templateUrl: 'hebis-search-page.html',
+ styleUrls: ['../../data/list/search-page.scss'],
})
export class HebisSearchPageComponent
extends SearchPageComponent
@@ -56,7 +58,9 @@ export class HebisSearchPageComponent
* @param logger An angular logger
* @param dataRoutingService DataRoutingService
* @param router Router
+ * @param route Active Route
* @param positionService PositionService
+ * @param configProvider ConfigProvider
*/
constructor(
protected readonly alertController: AlertController,
@@ -66,7 +70,9 @@ export class HebisSearchPageComponent
protected readonly logger: NGXLogger,
protected dataRoutingService: DataRoutingService,
protected router: Router,
+ route: ActivatedRoute,
protected positionService: PositionService,
+ configProvider: ConfigProvider,
) {
super(
alertController,
@@ -76,7 +82,9 @@ export class HebisSearchPageComponent
logger,
dataRoutingService,
router,
+ route,
positionService,
+ configProvider,
);
}
diff --git a/src/app/modules/hebis/list/hebis-search-page.html b/src/app/modules/hebis/list/hebis-search-page.html
index f02ee4e0..fc548e71 100644
--- a/src/app/modules/hebis/list/hebis-search-page.html
+++ b/src/app/modules/hebis/list/hebis-search-page.html
@@ -1,19 +1,19 @@
-
-
+
-
-
-
-
+
+ {{ 'hebisSearch.title' | translate }}
+
+
+
+
+ {{ 'search.type' | translate }}
+
+ {{
+ 'hebisSearch.type' | translate
+ }}
+
+
diff --git a/src/app/modules/library/account/account.page.html b/src/app/modules/library/account/account.page.html
index 0e89587c..6c46c2f3 100644
--- a/src/app/modules/library/account/account.page.html
+++ b/src/app/modules/library/account/account.page.html
@@ -1,8 +1,10 @@
-
+
-
{{ 'library.account.title' | translate | titlecase }}
@@ -18,11 +20,11 @@
-
-
@@ -30,7 +32,7 @@
>{{ 'library.account.pages.checked_out.title' | translate | titlecase }}
-
diff --git a/src/app/modules/library/account/checked-out/checked-out-page.html b/src/app/modules/library/account/checked-out/checked-out-page.html
index 8aecccb7..86744fbe 100644
--- a/src/app/modules/library/account/checked-out/checked-out-page.html
+++ b/src/app/modules/library/account/checked-out/checked-out-page.html
@@ -1,8 +1,10 @@
-
+
-
{{
'library.account.pages.checked_out.title' | translate | titlecase
diff --git a/src/app/modules/library/account/fines/fines-page.html b/src/app/modules/library/account/fines/fines-page.html
index bcbe5a13..41e532e1 100644
--- a/src/app/modules/library/account/fines/fines-page.html
+++ b/src/app/modules/library/account/fines/fines-page.html
@@ -1,8 +1,10 @@
-
+
-
{{
'library.account.pages.fines.title' | translate | titlecase
diff --git a/src/app/modules/library/account/holds-and-reservations/holds-and-reservations-page.html b/src/app/modules/library/account/holds-and-reservations/holds-and-reservations-page.html
index 2176be45..45e6f448 100644
--- a/src/app/modules/library/account/holds-and-reservations/holds-and-reservations-page.html
+++ b/src/app/modules/library/account/holds-and-reservations/holds-and-reservations-page.html
@@ -1,8 +1,10 @@
-
+
-
{{
'library.account.pages.holds.title' | translate | titlecase
diff --git a/src/app/modules/library/account/profile/profile-page.html b/src/app/modules/library/account/profile/profile-page.html
index 32a5a182..52674166 100644
--- a/src/app/modules/library/account/profile/profile-page.html
+++ b/src/app/modules/library/account/profile/profile-page.html
@@ -1,8 +1,10 @@
-
+
-
{{
'library.account.pages.profile.title' | translate | titlecase
diff --git a/src/app/modules/library/library.module.ts b/src/app/modules/library/library.module.ts
index 3b89d5e6..6f25a311 100644
--- a/src/app/modules/library/library.module.ts
+++ b/src/app/modules/library/library.module.ts
@@ -16,6 +16,7 @@ import {ProtectedRoutes} from '../auth/protected.routes';
import {MomentModule} from 'ngx-moment';
import {FeeItemComponent} from './account/elements/fee-item/fee-item.component';
import {DataModule} from '../data/data.module';
+import {UtilModule} from '../../util/util.module';
const routes: ProtectedRoutes | Routes = [
{
@@ -59,6 +60,7 @@ const routes: ProtectedRoutes | Routes = [
TranslateModule,
MomentModule,
DataModule,
+ UtilModule,
],
declarations: [
LibraryAccountPageComponent,
diff --git a/src/app/modules/map/item/map-item.component.html b/src/app/modules/map/item/map-item.component.html
index 7090ffa9..c1995b30 100644
--- a/src/app/modules/map/item/map-item.component.html
+++ b/src/app/modules/map/item/map-item.component.html
@@ -8,6 +8,7 @@
trigger="show-more"
[presentingElement]="routerOutlet.nativeEl"
swipeToClose="true"
+ class="modal-large"
>
@@ -15,36 +16,35 @@
+
-
-
-
-
-
- {{ $any(item).inPlace.name }},
- {{ address.streetAddress }}, {{ address.addressLocality }}
-
-
-
-
- More
-
-
-
-
-
-
-
-
-
+
+
+ {{ $any(item).inPlace.name }},
+ {{ address.streetAddress }}, {{ address.addressLocality }}
+
+
+ {{
+ 'map.page.buttons.MORE' | translate
+ }}
+
+
+
+
+
+
diff --git a/src/app/modules/map/item/map-item.component.scss b/src/app/modules/map/item/map-item.component.scss
index e8941db6..3c542e64 100644
--- a/src/app/modules/map/item/map-item.component.scss
+++ b/src/app/modules/map/item/map-item.component.scss
@@ -1,8 +1,57 @@
-ion-col:nth-child(2) {
- display: flex;
- justify-content: flex-end;
+@import '../../../../theme/util/mixins';
- ion-button {
- margin-top: auto;
+:host {
+ display: block;
+ max-width: 100%;
+
+ ion-card {
+ padding: 0;
+ overflow: visible;
+
+ ion-card-header{
+ padding: 0;
+ border-bottom: var(--border-width-default) solid var(--border-color-default);
+
+ stapps-data-list-item {
+ --ion-margin: 0;
+
+ &::ng-deep ion-item {
+ --padding-start: 0;
+ --padding-end: 0;
+
+ ion-label {
+ white-space: break-spaces;
+ }
+ }
+ }
+
+ .close {
+ position: absolute;
+ top: -15px;
+ right: -15px;
+ z-index: 1;
+ --padding-top: 0;
+ --padding-bottom: 0;
+ --padding-start: 0;
+ --padding-end: 0;
+
+ ion-icon {
+ width: 30px;
+ height: 30px;
+ }
+ }
+ }
+
+ ion-card-content {
+ padding: var(--spacing-md);
+ display: flex;
+ flex-direction: row;
+
+ #show-more-button {
+ text-transform: uppercase;
+ margin-left: auto;
+ }
+ }
}
+
}
diff --git a/src/app/modules/map/item/map-item.component.ts b/src/app/modules/map/item/map-item.component.ts
index 6a9c116c..856339ab 100644
--- a/src/app/modules/map/item/map-item.component.ts
+++ b/src/app/modules/map/item/map-item.component.ts
@@ -12,7 +12,7 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see ();
+
constructor(readonly routerOutlet: IonRouterOutlet) {}
+
+ /**
+ * Action when edit is clicked
+ */
+ onCloseClick() {
+ this.onClose.emit();
+ }
}
diff --git a/src/app/modules/map/map.module.ts b/src/app/modules/map/map.module.ts
index 4e40eea7..366a1749 100644
--- a/src/app/modules/map/map.module.ts
+++ b/src/app/modules/map/map.module.ts
@@ -33,6 +33,7 @@ import {MapListModalComponent} from './page/modals/map-list-modal.component';
import {MapSingleModalComponent} from './page/modals/map-single-modal.component';
import {MapItemComponent} from './item/map-item.component';
import {NgModule} from '@angular/core';
+import {UtilModule} from '../../util/util.module';
/**
* Initializes the default area to show in advance (before components are initialized)
@@ -78,6 +79,7 @@ const mapRoutes: Routes = [
DataModule,
FormsModule,
ThingTranslateModule,
+ UtilModule,
],
providers: [
Geolocation,
diff --git a/src/app/modules/map/map.provider.ts b/src/app/modules/map/map.provider.ts
index 21fd37b7..ebc80b0f 100644
--- a/src/app/modules/map/map.provider.ts
+++ b/src/app/modules/map/map.provider.ts
@@ -76,7 +76,7 @@ export class MapProvider {
? `
`
- : ' {
+ async fetchAndUpdateItems(
+ fetchAll = false,
+ animate?: boolean,
+ ): Promise {
try {
const result = await this.mapProvider.searchPlaces(
this.filterQuery,
- this.queryText,
+ fetchAll ? '' : this.queryText,
);
if (result.data.length === 0) {
const alert = await this.alertController.create({
@@ -353,7 +376,7 @@ export class MapPageComponent {
this.subscriptions.push(
this.contextMenuService.filterQueryChanged$.subscribe(query => {
this.filterQuery = query;
- this.fetchAndUpdateItems(true);
+ this.fetchAndUpdateItems(false, true);
}),
);
@@ -414,7 +437,7 @@ export class MapPageComponent {
*/
async resetView() {
this.location.go('/map');
- await this.fetchAndUpdateItems();
+ await this.fetchAndUpdateItems(this.items.length > 0);
this.ref.detectChanges();
}
@@ -437,7 +460,7 @@ export class MapPageComponent {
*/
searchStringChanged(queryText?: string) {
this.queryText = queryText || '';
- void this.fetchAndUpdateItems(true);
+ void this.fetchAndUpdateItems(false, true);
}
/**
@@ -451,7 +474,7 @@ export class MapPageComponent {
this.distance = this.positionService.getDistance(this.items[0].geo.point);
this.addToMap(this.items, true);
this.ref.detectChanges();
- const url = this.router.createUrlTree([[], uid]).toString();
+ const url = this.router.createUrlTree(['/map', uid]).toString();
this.location.go(url);
// center the selected place
this.focus(geoJSON(this.items[0].geo.point).getBounds().getCenter());
diff --git a/src/app/modules/map/page/map-page.html b/src/app/modules/map/page/map-page.html
index 05ebcc1d..08bd3c99 100644
--- a/src/app/modules/map/page/map-page.html
+++ b/src/app/modules/map/page/map-page.html
@@ -16,31 +16,39 @@
-
+
+
+ {{ 'map.page.TITLE' | translate }}
+
+
-
-
-
-
+
@@ -61,6 +69,7 @@
-
-
diff --git a/src/app/modules/map/page/map-page.scss b/src/app/modules/map/page/map-page.scss
index d64f3efc..d66465de 100644
--- a/src/app/modules/map/page/map-page.scss
+++ b/src/app/modules/map/page/map-page.scss
@@ -1,22 +1,3 @@
-ion-header {
- ion-toolbar {
- --background: transparent;
- --ion-color-base: transparent;
-
- ion-buttons {
- ion-back-button::part(native), ion-menu-button::part(native) {
- box-shadow: var(--map-box-shadow);
- //padding: 2px;
- }
- }
- }
- ion-searchbar {
- --background: white;
- // important for iOS
- --box-shadow: var(--map-box-shadow);
- }
-}
-
ion-content {
// fixes the unexpected issue that the content is not fullscreen (behind the header)
position: absolute;
@@ -24,12 +5,13 @@ ion-content {
width: 100%;
height: 100%;
}
+ & > div {
+ overflow: hidden;
+ }
}
-ion-back-button, ion-menu-button {
- --background: white;
- --background-hover: whitesmoke;
- --background-focused: whitesmoke;
+ion-toolbar:first-of-type {
+ padding: 0 var(--spacing-md) var(--spacing-xs);
}
::ng-deep {
@@ -50,14 +32,20 @@ ion-back-button, ion-menu-button {
}
div.floating-content {
- display: grid;
+ display: block;
position: absolute;
- bottom: 15px;
+ left: 0;
+ right: 0;
+ bottom: 0;
z-index: 1000;
width: 100%;
- padding: 0 20px;
+ padding: 0 var(--spacing-md) 8vh;
justify-content: center;
+ ion-card {
+ margin: 0;
+ }
+
div.map-buttons {
display: flex;
justify-content: flex-end;
@@ -67,7 +55,7 @@ ion-back-button, ion-menu-button {
width: 550px;
position: center;
justify-self: center;
- margin: 2px;
+ margin: var(--spacing-sm) auto;
}
}
}
diff --git a/src/app/modules/map/page/modals/map-list.html b/src/app/modules/map/page/modals/map-list.html
index 2715b706..7da284ee 100644
--- a/src/app/modules/map/page/modals/map-list.html
+++ b/src/app/modules/map/page/modals/map-list.html
@@ -15,7 +15,7 @@
-
+
{{ 'map.modals.list.TITLE' | translate }}
{{
diff --git a/src/app/modules/map/page/modals/map-single.html b/src/app/modules/map/page/modals/map-single.html
index 99140ef4..118a7b0f 100644
--- a/src/app/modules/map/page/modals/map-single.html
+++ b/src/app/modules/map/page/modals/map-single.html
@@ -1,5 +1,5 @@
-
+
{{ 'map.modals.single.TITLE' | translate }}
{{
@@ -9,5 +9,8 @@
-
diff --git a/src/app/modules/map/page/modals/map-single.scss b/src/app/modules/map/page/modals/map-single.scss
index e69de29b..4cef8a0c 100644
--- a/src/app/modules/map/page/modals/map-single.scss
+++ b/src/app/modules/map/page/modals/map-single.scss
@@ -0,0 +1,4 @@
+:host {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/src/app/modules/map/widget/map-widget.component.ts b/src/app/modules/map/widget/map-widget.component.ts
index a3dd5540..550d8d3a 100644
--- a/src/app/modules/map/widget/map-widget.component.ts
+++ b/src/app/modules/map/widget/map-widget.component.ts
@@ -13,6 +13,7 @@
* this program. If not, see
-
+
+
-
{{ i + hoursRange.from }}:00
-
+
+
+
+ {{ i + hoursRange.from }}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/modules/schedule/page/calendar-view.scss b/src/app/modules/schedule/page/calendar-view.scss
index d8da0377..40ab8523 100644
--- a/src/app/modules/schedule/page/calendar-view.scss
+++ b/src/app/modules/schedule/page/calendar-view.scss
@@ -12,71 +12,3 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
.
*/
-
-.header-swiper {
- width: 100%;
- height: 100%;
-}
-
-.header {
- position: relative;
-
- .left-button, .right-button {
- position: absolute;
- top: 0;
- bottom: 0;
- margin: auto;
- z-index: 5;
- }
-
- .left-button {
- left: 0;
- }
-
- .right-button {
- right: 0;
- }
-}
-
-// phantom element
-.phantom {
- position: absolute;
- visibility: hidden;
- height: 0 !important;
-}
-
-.day-labels {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-
- ion-button {
- width: 100%;
- height: 100%;
-
- text-transform: none;
- ion-label {
- overflow: visible !important;
- }
- }
-}
-
-.hour-lines {
- top: 0;
- position: absolute;
- display: flex;
- flex-direction: row;
- width: 100%;
-
- ion-label {
- padding: 0 20px 20px;
- }
-
- .horizontal-line {
- width: 100%;
- top: 0;
- border-top: 1px solid #dbdbdb;
- }
-}
diff --git a/src/app/modules/schedule/page/components/calendar-component.html b/src/app/modules/schedule/page/components/calendar-component.html
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/modules/schedule/page/components/calendar-component.scss b/src/app/modules/schedule/page/components/calendar-component.scss
new file mode 100644
index 00000000..590a3a5c
--- /dev/null
+++ b/src/app/modules/schedule/page/components/calendar-component.scss
@@ -0,0 +1,123 @@
+/*!
+ * Copyright (C) 2021 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see
.
+ */
+
+$header-height: 50px;
+$hours-width: 40px;
+
+.header {
+ height: $header-height;
+ background-color: var(--ion-color-light);
+ position: relative;
+
+ .left-button, .right-button {
+ color: var(--ion-color-medium-shade);
+ position: absolute;
+ z-index: 99;
+ height: 100%;
+ margin: 0;
+ --padding-start: 0;
+ --padding-end: 0;
+ }
+ .left-button {
+ left: 0;
+ padding: 0 var(--spacing-sm);
+ }
+ .right-button {
+ right: 0;
+ padding: 0 var(--spacing-sm);
+ }
+
+ .day-labels {
+ ion-button {
+ width: unset;
+ color: var(--ion-color-light-contrast);
+ overflow: visible !important;
+ }
+ }
+
+ .header-swiper {
+ background-color: var(--ion-color-light);
+ }
+}
+
+.full-height {
+ height: 100%;
+}
+
+.day-labels {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ ion-button {
+ width: 100%;
+ height: 100%;
+
+ text-transform: none;
+ ion-label {
+ overflow: visible !important;
+ }
+ }
+}
+
+ion-content {
+ overflow-y: auto;
+}
+
+.schedule-wrapper {
+ display: grid;
+ grid-template-columns: 40px calc(100% - 40px); // swiper.js can't calculate width when using 1fr instead of 100%
+ height: 100%;
+
+ .hours-wrapper {
+ z-index: 100;
+ background-color: var(--ion-color-primary-contrast);
+
+ .hour-lines {
+ width: 40px;
+ height: 70px;
+ border-right: 1px solid var(--ion-color-light);
+ text-align: center;
+ top: 0;
+ position: absolute;
+ font-weight: var(--font-weight-bold);
+ background-color: var(--calender-background-color);
+ }
+ }
+
+ .infinite-swiper-wrapper {
+ width: 100%;
+ }
+}
+
+.date-header {
+ border-bottom: 1px solid var(--calender-date-line-gray);
+ padding: var(--spacing-sm) auto;
+ height: fit-content;
+ font-weight: var(--font-weight-bold);
+ text-transform: uppercase;
+ text-align: center;
+}
+
+.day-labels > ion-button[disabled] {
+ opacity: 1;
+}
+
+
+div {
+ height: 100%;
+}
diff --git a/src/app/modules/schedule/page/components/calendar.component.ts b/src/app/modules/schedule/page/components/calendar.component.ts
new file mode 100644
index 00000000..da242f5f
--- /dev/null
+++ b/src/app/modules/schedule/page/components/calendar.component.ts
@@ -0,0 +1,264 @@
+/*
+ * Copyright (C) 2021 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see
.
+ */
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {SCISO8601Date, SCUuid} from '@openstapps/core';
+import moment, {Moment} from 'moment';
+import {
+ materialFade,
+ materialManualFade,
+ materialSharedAxisX,
+} from '../../../../animation/material-motion';
+import {ScheduleProvider} from '../../../calendar/schedule.provider';
+import {ScheduleEvent, ScheduleResponsiveBreakpoint} from '../schema/schema';
+import {SwiperComponent} from 'swiper/angular';
+import {InfiniteSwiperComponent} from '../grid/infinite-swiper.component';
+import {IonDatetime} from '@ionic/angular';
+import {Subscription} from 'rxjs';
+import {CalendarService} from '../../../calendar/calendar.service';
+
+/**
+ * Component that displays the schedule
+ */
+@Component({
+ selector: 'stapps-calendar-component',
+ templateUrl: 'calendar-component.html',
+ styleUrls: ['calendar-component.scss'],
+ animations: [materialFade, materialSharedAxisX, materialManualFade],
+})
+export class CalendarComponent implements OnInit, OnDestroy {
+ /**
+ * The day that the schedule started out on
+ */
+ @Input() baselineDate: Moment;
+
+ /**
+ * Range of date of the slides shown on screen.
+ */
+ dateRange: {
+ startDate: string;
+ endDate: string;
+ } = {
+ startDate: '',
+ endDate: '',
+ };
+
+ calendarServiceSubscription: Subscription;
+
+ prevHeaderIndex = 0;
+
+ /**
+ * Hours for grid
+ */
+ @Input() hours: number[];
+
+ /**
+ * Range of hours to display
+ */
+ @Input() readonly hoursRange = {
+ from: 5,
+ to: 22,
+ };
+
+ todaySlideIndex: number;
+
+ initialSlideIndex?: Promise
;
+
+ /**
+ * Layout of the schedule
+ */
+ @Input() layout: ScheduleResponsiveBreakpoint;
+
+ /**
+ * Route fragment
+ */
+ routeFragment = 'schedule/calendar';
+
+ /**
+ * Vertical scale of the schedule (distance between hour lines)
+ */
+ @Input() scale = 70;
+
+ /**
+ * unix -> (uid -> event)
+ */
+ @Input() testSchedule: Record> =
+ {};
+
+ /**
+ * UUIDs
+ */
+ @Input() uuids: SCUuid[];
+
+ /**
+ * UUID subscription
+ */
+ uuidSubscription: Subscription;
+
+ @Input() useInfiniteSwiper = true;
+
+ @Input() weekDates: Array;
+
+ constructor(
+ protected readonly activatedRoute: ActivatedRoute,
+ protected readonly calendarService: CalendarService,
+ protected readonly scheduleProvider: ScheduleProvider,
+ ) {}
+
+ ngOnInit() {
+ this.onInit();
+ }
+
+ ngOnDestroy() {
+ this.onDestroy();
+ }
+
+ onInit() {
+ this.dateRange.startDate = this.calculateDateFromIndex(0, 0, 'DD.MM.YY');
+ this.dateRange.endDate = this.calculateDateFromIndex(
+ 0,
+ this.layout.days - 1,
+ 'DD.MM.YY',
+ );
+
+ let dayString: string | number | null =
+ this.activatedRoute.snapshot.paramMap.get('date');
+ if (dayString == undefined || dayString === 'now') {
+ const fragments = window.location.href.split('/');
+ const urlFragment: string = fragments[fragments.length - 1] ?? '';
+
+ dayString = /^\d{4}-\d{2}-\d{2}$/.test(urlFragment)
+ ? urlFragment
+ : moment.now();
+ }
+
+ this.baselineDate = moment(dayString).startOf('day');
+
+ this.initialSlideIndex = new Promise(resolve => {
+ this.uuidSubscription = this.scheduleProvider.uuids$.subscribe(
+ async result => {
+ this.uuids = result;
+ resolve(await this.loadEvents());
+ },
+ );
+ });
+ }
+
+ onDestroy() {
+ this.uuidSubscription.unsubscribe();
+ if (this.calendarServiceSubscription) {
+ this.calendarServiceSubscription.unsubscribe();
+ }
+ }
+
+ /**
+ * Get date from baseline date and index of current slide.
+ *
+ * @param index number
+ * @param delta number - is added to index
+ * @param dateFormat string
+ */
+ calculateDateFromIndex(index: number, delta = 0, dateFormat = 'YYYY-MM-DD') {
+ return moment(this.baselineDate)
+ .add(index + delta, 'days')
+ .format(dateFormat);
+ }
+
+ /**
+ * Change page
+ */
+ onPageChange(index: number) {
+ this.setDateRange(index);
+
+ window.history.replaceState(
+ {},
+ '',
+ `${this.routeFragment}/${this.calculateDateFromIndex(index)}`,
+ );
+ }
+
+ setDateRange(index: number) {
+ this.dateRange.startDate = this.calculateDateFromIndex(
+ index,
+ 0,
+ 'DD.MM.YY',
+ );
+ this.dateRange.endDate = this.calculateDateFromIndex(
+ index,
+ this.layout.days - 1,
+ 'DD.MM.YY',
+ );
+ }
+
+ onHeaderSwipe(index: number, infiniteController: InfiniteSwiperComponent) {
+ if (index < this.prevHeaderIndex) {
+ infiniteController?.pageBackwards();
+ }
+ if (index > this.prevHeaderIndex) {
+ infiniteController?.pageForward();
+ }
+ this.prevHeaderIndex = index;
+ }
+
+ syncSwiper(self: SwiperComponent, other: SwiperComponent) {
+ other.swiperRef.slideTo(self.swiperRef.activeIndex);
+ }
+
+ presentDatePopover(
+ mainSwiper: InfiniteSwiperComponent,
+ headerSwiper: InfiniteSwiperComponent,
+ index: number,
+ popoverDateTime: IonDatetime,
+ ) {
+ const nextIndex =
+ moment(popoverDateTime.value).diff(this.baselineDate, 'days') -
+ headerSwiper.virtualIndex -
+ index;
+
+ mainSwiper.goToIndex(nextIndex).then(() => {
+ this.setDateRange(nextIndex);
+ });
+ popoverDateTime.confirm(true);
+ }
+
+ /**
+ * Load events
+ */
+ async loadEvents(): Promise {
+ const dateSeries = await this.scheduleProvider.getDateSeries(this.uuids);
+
+ this.testSchedule = {};
+
+ for (const series of dateSeries.dates) {
+ for (const date of series.dates) {
+ const index = moment(date)
+ .startOf('day')
+ .diff(this.baselineDate, 'days');
+
+ // fall back to default
+ (this.testSchedule[index] ?? (this.testSchedule[index] = {}))[
+ series.uid
+ ] = {
+ dateSeries: series,
+ time: {
+ start: moment(date).hours(),
+ duration: series.duration,
+ },
+ };
+ }
+ }
+ return this.todaySlideIndex;
+ }
+}
diff --git a/src/app/modules/schedule/page/grid/infinite-swiper.component.ts b/src/app/modules/schedule/page/grid/infinite-swiper.component.ts
index 711e0407..7161e510 100644
--- a/src/app/modules/schedule/page/grid/infinite-swiper.component.ts
+++ b/src/app/modules/schedule/page/grid/infinite-swiper.component.ts
@@ -73,6 +73,8 @@ export class InfiniteSwiperComponent
@Output() indexChange = new EventEmitter();
+ @Output() indexChangeStart = new EventEmitter();
+
slidesArray: number[];
@ViewChild('swiper', {static: true})
@@ -158,6 +160,12 @@ export class InfiniteSwiperComponent
this.indexChange.emit(this.virtualIndex);
this.preventControllerCallback = false;
});
+
+ this.swiper.on('slideChangeTransitionStart', swiper => {
+ this.indexChangeStart.emit(
+ this.virtualIndex + swiper.activeIndex - swiper.previousIndex,
+ );
+ });
}
clearSlides() {
diff --git a/src/app/modules/schedule/page/grid/infinite-swiper.scss b/src/app/modules/schedule/page/grid/infinite-swiper.scss
index 47cd69aa..a61126e4 100644
--- a/src/app/modules/schedule/page/grid/infinite-swiper.scss
+++ b/src/app/modules/schedule/page/grid/infinite-swiper.scss
@@ -17,3 +17,7 @@
height: 100%;
width: 100%;
}
+
+.swiper, .swiper-wrapper, .swiper-slide {
+ overflow: unset;
+}
diff --git a/src/app/modules/schedule/page/grid/range-overlap.ts b/src/app/modules/schedule/page/grid/range-overlap.ts
index ea09699c..2357398c 100644
--- a/src/app/modules/schedule/page/grid/range-overlap.ts
+++ b/src/app/modules/schedule/page/grid/range-overlap.ts
@@ -51,11 +51,18 @@ function within(a: number, b: number, c: number): boolean {
return a > b && a < c;
}
+/**
+ *
+ */
+function equals(start1: number, end1: number, start2: number, end2: number) {
+ return start1 === start2 && end1 === end2;
+}
+
/**
*
*/
function hasOverlap(a1: number, b1: number, a2: number, b2: number): boolean {
- return within(a1, a2, b2) || within(b1, a2, b2);
+ return within(a1, a2, b2) || within(b1, a2, b2) || equals(a1, b1, a2, b2);
}
/**
diff --git a/src/app/modules/schedule/page/grid/schedule-card.component.ts b/src/app/modules/schedule/page/grid/schedule-card.component.ts
index 19c66b01..f1be8c60 100644
--- a/src/app/modules/schedule/page/grid/schedule-card.component.ts
+++ b/src/app/modules/schedule/page/grid/schedule-card.component.ts
@@ -26,6 +26,12 @@ import {ScheduleEvent} from '../schema/schema';
styleUrls: ['../../../data/list/data-list-item.scss', 'schedule-card.scss'],
})
export class ScheduleCardComponent implements OnInit {
+ cardColor = {
+ isBlack: false,
+ isBlue: false,
+ isDefault: false,
+ };
+
/**
* The hour from which on the schedule is displayed
*/
@@ -56,6 +62,11 @@ export class ScheduleCardComponent implements OnInit {
*/
@Input() scheduleEvent: ScheduleEvent;
+ /**
+ * Card shows the name of the place the event takes place
+ */
+ @Input() showPlaceName = false;
+
/**
* The title of the event
*/
@@ -67,8 +78,8 @@ export class ScheduleCardComponent implements OnInit {
* Get the note text
*/
getNote(): string | undefined {
- return 'categories' in this.scheduleEvent.dateSeries.event
- ? this.scheduleEvent.dateSeries.event.categories?.join(', ')
+ return this.scheduleEvent?.dateSeries?.name
+ ? this.scheduleEvent.dateSeries.name
: undefined;
}
@@ -80,6 +91,27 @@ export class ScheduleCardComponent implements OnInit {
this.height = moment.duration(this.scheduleEvent.time.duration).asHours();
this.title = this.scheduleEvent.dateSeries.event.name;
+
+ this.cardColor = {
+ isBlack: false,
+ isBlue: false,
+ isDefault: false,
+ };
+
+ switch (
+ 'categories' in this.scheduleEvent.dateSeries.event
+ ? this.scheduleEvent.dateSeries.event?.categories[0]
+ : ''
+ ) {
+ case 'lecture':
+ this.cardColor.isBlue = true;
+ break;
+ case 'exercise':
+ this.cardColor.isBlack = true;
+ break;
+ default:
+ this.cardColor.isDefault = true;
+ }
}
/**
diff --git a/src/app/modules/schedule/page/grid/schedule-card.html b/src/app/modules/schedule/page/grid/schedule-card.html
index a8baa1e5..2f4f4d2f 100644
--- a/src/app/modules/schedule/page/grid/schedule-card.html
+++ b/src/app/modules/schedule/page/grid/schedule-card.html
@@ -13,41 +13,30 @@
~ this program. If not, see
{{
- this.scheduleEvent.dateSeries.event.name
- | nullishCoalesce: this.scheduleEvent.dateSeries.name
+ this.scheduleEvent?.dateSeries?.event?.name
+ | nullishCoalesce: this.scheduleEvent?.dateSeries?.name
}}
-
-
- {{ 'schedule.card.forEach' | translate }}
- {{
- scheduleEvent.dateSeries.repeatFrequency
- | durationLocalized: true
- | sentencecase
- }}
- {{ 'schedule.card.until' | translate }}
- {{
- scheduleEvent.dateSeries.dates | last | amDateFormat: 'DD. MMM YYYY'
- }}
-
-
{{ getNote() }}
+ {{
+ scheduleEvent?.dateSeries?.inPlace?.name
+ }}
-
diff --git a/src/app/modules/schedule/page/grid/schedule-card.scss b/src/app/modules/schedule/page/grid/schedule-card.scss
index 3eb7c5a9..31b659d9 100644
--- a/src/app/modules/schedule/page/grid/schedule-card.scss
+++ b/src/app/modules/schedule/page/grid/schedule-card.scss
@@ -1,13 +1,84 @@
ion-card {
width: inherit;
z-index: 2;
+ margin-left: 0;
+ margin-right: 0;
+ border-radius: 0;
+
+ &.blueCard {
+ --background: var(--calender-blue-card);
+
+ ion-card-title, ion-card-subtitle span, ion-card-content ion-note, ion-card-content ion-text {
+ color: var(--ion-color-primary-contrast);
+ }
+
+ &:after {
+ background: linear-gradient(rgba(var(--calender-blue-card-rgb), 0%), rgba(var(--calender-blue-card-rgb), 100%));
+ }
+ }
+ &.blackCard {
+ --background: var(--calender-black-card);
+
+ ion-card-title, ion-card-subtitle span, ion-card-content ion-note, ion-card-content ion-text {
+ color: var(--ion-color-primary-contrast);
+ }
+
+ &:after {
+ background: linear-gradient(rgba(var(--calender-black-card-rgb), 0%), rgba(var(--calender-black-card-rgb), 100%));
+ }
+ }
+ &.defaultCard {
+ --background: var(--calender-default-card);
+
+ ion-card-title, ion-card-subtitle span, ion-card-content ion-note, ion-card-content ion-text {
+ color: var(--ion-color-light-contrast);
+ }
+
+ &:after {
+ background: linear-gradient(rgba(var(--calender-light-card-rgb), 0%), rgba(var(--calender-light-card-rgb), 100%));
+ }
+ }
+
+ &:after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ height: 33%;
+ width: 100%;
+ background: linear-gradient(rgba(var(--calender-blue-card-rgb), 0%), rgba(var(--calender-blue-card-rgb), 100%));
+ }
ion-card-header {
height: available;
+ padding-bottom: var(--spacing-xs);
ion-card-title {
overflow-wrap: break-word;
}
+
+ ion-card-subtitle {
+ display: flex;
+ ion-icon.icon-white {
+ color: var(--ion-color-primary-contrast);
+ margin-right: var(--spacing-xs);
+ }
+ }
+ }
+
+ ion-card-header, ion-card-title, ion-card-subtitle span, ion-card-content ion-note {
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-bold);
+ font-family: var(--headline-font-family);
+ text-overflow: ellipsis;
+ }
+
+ ion-card-content .place-name {
+ display: block;
+ font-family: var(--headline-font-family);
+ }
+
+ ion-card-content .place-name {
+ display: block;
}
div {
diff --git a/src/app/modules/schedule/page/grid/schedule-cursor.html b/src/app/modules/schedule/page/grid/schedule-cursor.html
index 06048b32..76fcfd90 100644
--- a/src/app/modules/schedule/page/grid/schedule-cursor.html
+++ b/src/app/modules/schedule/page/grid/schedule-cursor.html
@@ -1,4 +1,4 @@
-
+
diff --git a/src/app/modules/schedule/page/grid/schedule-cursor.scss b/src/app/modules/schedule/page/grid/schedule-cursor.scss
index 422c14d5..6e016687 100644
--- a/src/app/modules/schedule/page/grid/schedule-cursor.scss
+++ b/src/app/modules/schedule/page/grid/schedule-cursor.scss
@@ -21,7 +21,7 @@ div {
flex-direction: row;
width: 100%;
top: 4px;
- z-index: 0;
+ z-index: 2;
div {
width: 100%;
@@ -33,7 +33,7 @@ div {
margin-right: 16px;
margin-top: 8px;
height: 2px;
- border-top: 2px solid var(--ion-color-primary);
+ border-top: 2px solid var(--ion-color-danger);
margin-block-start: 0;
margin-block-end: 0;
}
@@ -45,7 +45,7 @@ div {
top: -3px;
border-radius: 50% 0 50% 50%;
transform: rotateZ(45deg);
- background-color: var(--ion-color-primary);
+ background-color: var(--ion-color-danger);
}
}
}
diff --git a/src/app/modules/schedule/page/grid/schedule-day.component.ts b/src/app/modules/schedule/page/grid/schedule-day.component.ts
index 50830880..31046728 100644
--- a/src/app/modules/schedule/page/grid/schedule-day.component.ts
+++ b/src/app/modules/schedule/page/grid/schedule-day.component.ts
@@ -12,9 +12,13 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
.
*/
-import {Component, Input} from '@angular/core';
+import {Component, HostListener, Input, OnInit} from '@angular/core';
import moment from 'moment';
-import {Range, ScheduleEvent} from '../schema/schema';
+import {
+ Range,
+ ScheduleEvent,
+ ScheduleResponsiveBreakpoint,
+} from '../schema/schema';
import {ScheduleProvider} from '../../../calendar/schedule.provider';
import {SCISO8601Duration, SCUuid} from '@openstapps/core';
import {materialFade} from '../../../../animation/material-motion';
@@ -26,7 +30,7 @@ import {groupRangeOverlaps} from './range-overlap';
styleUrls: ['schedule-day.scss'],
animations: [materialFade],
})
-export class ScheduleDayComponent {
+export class ScheduleDayComponent implements OnInit {
@Input() day: moment.Moment;
@Input() hoursRange: Range
;
@@ -37,6 +41,10 @@ export class ScheduleDayComponent {
@Input() frequencies?: SCISO8601Duration[];
+ @Input() layout: ScheduleResponsiveBreakpoint;
+
+ @Input() isLeftmost = false;
+
dateSeriesGroups?: ScheduleEvent[][];
@Input() set dateSeries(value: Record) {
@@ -52,8 +60,28 @@ export class ScheduleDayComponent {
).map(it => it.elements);
}
+ dateFormat = 'dd';
+
constructor(protected readonly scheduleProvider: ScheduleProvider) {}
+ ngOnInit() {
+ this.determineDateFormat();
+ }
+
+ @HostListener('window:resize', ['$event'])
+ _onResize() {
+ this.determineDateFormat();
+ }
+
+ private determineDateFormat() {
+ this.dateFormat =
+ this.layout &&
+ window.innerWidth > 1024 &&
+ window.innerWidth <= this.layout?.until
+ ? 'dddd'
+ : 'dd';
+ }
+
// TODO: backend bug results in the wrong date series being returned
/* async fetchDateSeries(): Promise {
const dateSeries = await this.scheduleProvider.getDateSeries(
diff --git a/src/app/modules/schedule/page/grid/schedule-day.html b/src/app/modules/schedule/page/grid/schedule-day.html
index cd97ad40..f20e5aea 100644
--- a/src/app/modules/schedule/page/grid/schedule-day.html
+++ b/src/app/modules/schedule/page/grid/schedule-day.html
@@ -12,7 +12,10 @@
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see
+
+
-
.
*/
-.schedule-card {
- overflow: hidden;
-}
-
-div {
- height: 100%;
- width: 100%;
-}
-
-.horizontal-group {
- position: absolute;
- top: 13px;
- left: 0;
- grid-column: 1;
- grid-row: 1;
- width: 100%;
-
- box-sizing: border-box;
- max-width: inherit;
-
- display: flex;
- flex-direction: row;
- align-items: flex-start;
-}
-
-.vertical-line {
- position: absolute;
- top: 0;
- left: 0;
- width: 1px;
- height: 100%;
- background-color: #dbdbdb;
+:host {
+ .day-wrapper {
+ border-left: 1px solid var(--calender-date-line-gray);
+ border-right: 1px solid var(--calender-date-line-gray);
+
+ &.leftmost {
+ border-left: unset;
+ }
+
+ .day-header {
+ position: sticky;
+ top: 0;
+ left: 0;
+ height: fit-content;
+ padding: var(--spacing-md);
+ border-bottom: 2px solid var(--ion-color-light);
+ font-size: var(--font-size-md);
+ font-weight: var(--font-weight-bold);
+ text-align: center;
+ text-transform: uppercase;
+ background-color: var(--ion-color-primary-contrast);
+ z-index: 3;
+
+ &.leftmost {
+ border-left: 1px solid var(--ion-color-light);
+ }
+ }
+ }
+
+ .schedule-card {
+ overflow: hidden;
+ }
+
+ div {
+ height: 100%;
+ width: 100%;
+ }
+
+ .horizontal-group {
+ position: absolute;
+ top: 10px;
+ left: 0;
+ grid-column: 1;
+ grid-row: 1;
+ width: 100%;
+
+ box-sizing: border-box;
+ max-width: inherit;
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ }
+
+ .vertical-line {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1px;
+ height: 100%;
+ background-color: var(--calender-date-line-gray);
+ }
}
diff --git a/src/app/modules/schedule/page/modal/modal-event-creator.html b/src/app/modules/schedule/page/modal/modal-event-creator.html
index 943976a7..643d8208 100644
--- a/src/app/modules/schedule/page/modal/modal-event-creator.html
+++ b/src/app/modules/schedule/page/modal/modal-event-creator.html
@@ -13,7 +13,7 @@
~ this program. If not, see
.
-->
-
+
{{
'schedule.addEventModal.addEvent' | translate | titlecase
}}
@@ -29,5 +29,7 @@
[showDrawer]="false"
[forcedFilter]="filter"
[itemRouting]="false"
+ [showTopToolbar]="false"
+ [showNavigation]="false"
>
diff --git a/src/app/modules/schedule/page/modal/modal-event-creator.scss b/src/app/modules/schedule/page/modal/modal-event-creator.scss
index 7facf36d..2e12b0b8 100644
--- a/src/app/modules/schedule/page/modal/modal-event-creator.scss
+++ b/src/app/modules/schedule/page/modal/modal-event-creator.scss
@@ -1,3 +1,10 @@
+:host {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 20%;
+}
+
ion-button {
ion-label {
color: var(--ion-color-light);
diff --git a/src/app/modules/schedule/page/schedule-page.component.ts b/src/app/modules/schedule/page/schedule-page.component.ts
index f86eba7c..d4b5fff4 100644
--- a/src/app/modules/schedule/page/schedule-page.component.ts
+++ b/src/app/modules/schedule/page/schedule-page.component.ts
@@ -16,6 +16,7 @@ import {
AfterViewInit,
Component,
HostListener,
+ Input,
OnInit,
ViewChild,
} from '@angular/core';
@@ -25,6 +26,8 @@ import {IonRouterOutlet} from '@ionic/angular';
import {SharedAxisChoreographer} from '../../../animation/animation-choreographer';
import {materialSharedAxisX} from '../../../animation/material-motion';
import {ScheduleResponsiveBreakpoint} from './schema/schema';
+import {CalendarService} from '../../calendar/calendar.service';
+import moment from 'moment';
/**
* This needs to be sorted by break point low -> high
@@ -34,7 +37,7 @@ import {ScheduleResponsiveBreakpoint} from './schema/schema';
const responsiveConfig: ScheduleResponsiveBreakpoint[] = [
{
until: 768,
- days: 1,
+ days: 3,
startOf: 'day',
},
{
@@ -69,6 +72,10 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
*/
actualSegmentValue?: string | null;
+ /**
+ * Trigger event to go to today in calendar component
+ */
+
/**
* Layout
*/
@@ -76,18 +83,25 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
this.currentWindowWidth,
);
- /**
- * Vertical scale of the schedule (distance between hour lines)
- */
- scale = 60;
-
@ViewChild('segment') segmentView!: HTMLIonSegmentElement;
+ /**
+ * Show the navigation drawer
+ */
+ @Input() showDrawer = true;
+
+ /**
+ * Search value from search bar
+ */
+ queryText: string;
+
/**
* Choreographer for the tab switching
*/
tabChoreographer: SharedAxisChoreographer;
+ isModalOpen = false;
+
/**
* Amount of days that should be shown according to current display width
*/
@@ -104,22 +118,36 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
constructor(
private readonly activatedRoute: ActivatedRoute,
+ private calendarService: CalendarService,
readonly routerOutlet: IonRouterOutlet,
private router: Router,
private location: Location,
) {}
ngOnInit() {
- this.tabChoreographer = new SharedAxisChoreographer(
- this.activatedRoute.snapshot.paramMap.get('mode'),
- ['calendar', 'recurring', 'single'],
- );
+ this.onInit();
+ }
+
+ /**
+ * ngOnInit is not reliably called after first navigation to app/schedule. This leads to URL and segmentView being out of sync.
+ * ionViewWillEnter is called on second, third, ... navigation to app/schedule
+ */
+ ionViewWillEnter() {
+ this.onInit();
+ this.segmentView.value = this.tabChoreographer.currentValue;
}
ngAfterViewInit() {
this.segmentView.value = this.tabChoreographer.currentValue;
}
+ onInit() {
+ this.tabChoreographer = new SharedAxisChoreographer(
+ this.activatedRoute.snapshot.paramMap.get('mode'),
+ ['calendar', 'recurring', 'single'],
+ );
+ }
+
/**
* Resize callback
*
@@ -144,9 +172,21 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
*/
onSegmentChange() {
const url = this.router
- .createUrlTree([[], this.segmentView.value])
+ .createUrlTree([[], 'schedule', this.segmentView.value])
.toString();
this.location.go(url);
this.tabChoreographer.changeViewForState(this.segmentView.value);
}
+
+ onTodayClick() {
+ this.calendarService.emitGoToDate(moment().startOf('day'));
+ }
+
+ onFABClick() {
+ this.isModalOpen = true;
+ }
+
+ onModalDismiss() {
+ this.isModalOpen = false;
+ }
}
diff --git a/src/app/modules/schedule/page/schedule-page.html b/src/app/modules/schedule/page/schedule-page.html
index 350b6093..8d5b6c38 100644
--- a/src/app/modules/schedule/page/schedule-page.html
+++ b/src/app/modules/schedule/page/schedule-page.html
@@ -14,13 +14,35 @@
-->
-
+
-
-
-
+ {{
+ 'schedule.calendar' | translate | titlecase
+ }}
+ {{
+ 'schedule.recurring' | translate | titlecase
+ }}
+ {{
+ 'schedule.single' | translate | titlecase
+ }}
+
+
+ {{ 'schedule.view.today' | translate | uppercase }}
+
+
+
+
+
{{ 'schedule.calendar' | translate }}
@@ -34,35 +56,43 @@
-
-
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
+
diff --git a/src/app/modules/schedule/page/schedule-page.scss b/src/app/modules/schedule/page/schedule-page.scss
index 6aa3458a..dfc23470 100644
--- a/src/app/modules/schedule/page/schedule-page.scss
+++ b/src/app/modules/schedule/page/schedule-page.scss
@@ -13,6 +13,49 @@
* this program. If not, see
-
- {{ event.event.dateSeries.dates[0] | amDateFormat: 'HH:mm' }}
-
+
+
+ {{ event.event.time.startAsString }}
+
+ {{
+ event.event.time.endAsString
+ }}
+
diff --git a/src/app/modules/schedule/page/schedule-single-events.scss b/src/app/modules/schedule/page/schedule-single-events.scss
index 0b6c1487..4172f74c 100644
--- a/src/app/modules/schedule/page/schedule-single-events.scss
+++ b/src/app/modules/schedule/page/schedule-single-events.scss
@@ -1,17 +1,35 @@
-ion-content {
- height: 100%;
-}
+:host {
+ ion-content {
+ height: 100%;
+ }
-.hour-label {
- width: fit-content;
-}
+ .hour-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: var(--spacing-md);
-.day-label {
- padding: 16px;
- font-size: large;
- font-weight: bold;
-}
+ .hour-label {
+ width: fit-content;
+ display: inline-block;
+ text-align: center;
+ }
+ .hour-line {
+ width: 1px;
+ height: 20px;
+ border-left: 1px solid var(--ion-color-primary);
+ margin: var(--spacing-xs) 0;
+ }
+ }
-.event-card {
- width: 100%
+ .day-label {
+ padding: 16px;
+ font-size: large;
+ font-weight: bold;
+ }
+
+ .event-card {
+ width: 100%;
+ max-width: 600px;
+ }
}
diff --git a/src/app/modules/schedule/page/schedule-single-events.spec.ts b/src/app/modules/schedule/page/schedule-single-events.spec.ts
index b395dc3b..3562ae20 100644
--- a/src/app/modules/schedule/page/schedule-single-events.spec.ts
+++ b/src/app/modules/schedule/page/schedule-single-events.spec.ts
@@ -46,7 +46,11 @@ describe('ScheduleSingleEvents', () => {
dateSeries: series as SCDateSeries,
time: {
start: time.hour() + time.minute() / 60,
+ startAsString: moment(time).format('LT'),
duration: series.duration as string,
+ endAsString: moment(time)
+ .add(series.duration?.[index])
+ .format('LT'),
},
},
};
diff --git a/src/app/modules/schedule/page/schedule-view.component.ts b/src/app/modules/schedule/page/schedule-view.component.ts
index ff334c31..8a1e0e8d 100644
--- a/src/app/modules/schedule/page/schedule-view.component.ts
+++ b/src/app/modules/schedule/page/schedule-view.component.ts
@@ -12,18 +12,27 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see > = {};
+
+ /**
+ * unix -> (uid -> event)
+ */
+ @Input() testSchedule: Record> =
+ {};
+
/**
* Route Fragment
*/
// @Override
routeFragment = 'schedule/recurring';
+ // start at sunday
weekDates = Array.from({length: 7}).map(
- /* eslint-disable-next-line unicorn/consistent-function-scoping */
- (_, i) => moment(new Date(2022, 0, 2 + i)), // 02/01/2022 is a Sunday
+ // eslint-disable-next-line unicorn/consistent-function-scoping
+ (_, i) =>
+ moment()
+ .startOf('week')
+ .add(i - 1, 'days'),
);
constructor(
- scheduleProvider: ScheduleProvider,
activatedRoute: ActivatedRoute,
- datePipe: DateFormatPipe,
- platform: Platform,
+ calendarService: CalendarService,
+ scheduleProvider: ScheduleProvider,
) {
- super(scheduleProvider, activatedRoute, datePipe, platform);
- }
-
- syncSwiper(self: SwiperComponent, other: SwiperComponent) {
- other.swiperRef.slideTo(self.swiperRef.activeIndex);
+ super(activatedRoute, calendarService, scheduleProvider);
+ const hoursAmount = this.hoursRange.to - this.hoursRange.from + 1;
+ this.hours = [...Array.from({length: hoursAmount}).keys()];
}
/**
- * Determine displayed dates according to display size
+ * Initialize
*/
- // @Override
- determineDisplayDates() {
- // let's boldly assume that we at least display one day
-
- const out = [moment(moment.now()).startOf(this.layout.startOf)];
- for (let i = 1; i < this.layout.days; i++) {
- out.push(out[0].clone().add(i, 'day'));
+ ngOnInit() {
+ super.onInit();
+ if (this.calendarServiceSubscription) {
+ this.calendarServiceSubscription.unsubscribe();
}
+ this.calendarServiceSubscription =
+ this.calendarService.goToDateClicked.subscribe(() => {
+ this.slideToToday();
+ });
+ }
- this.displayDates = [out];
+ ngAfterViewInit() {
+ this.slideToToday();
+ }
- // void this.mainSlides.slideTo(this.mode === 'schedule' ? 0 : 1, 0, false);
+ /**
+ * OnDestroy
+ */
+ ngOnDestroy(): void {
+ super.onDestroy();
+ }
+
+ /**
+ * Slide today into view.
+ */
+ slideToToday() {
+ const todayIndex = Number(moment().startOf('week').format('d')) + 1;
+ this.mainSwiper?.swiperRef.slideTo(todayIndex);
+ this.setDateRange(todayIndex);
}
/**
@@ -113,4 +178,15 @@ export class ScheduleViewComponent extends CalendarViewComponent {
return this.todaySlideIndex;
}
+
+ presentScheduleDatePopover(index: number, popoverDateTime: IonDatetime) {
+ const nextIndex =
+ moment(popoverDateTime.value).diff(this.baselineDate, 'days') -
+ this.headerSwiper.swiperRef.realIndex -
+ index;
+
+ this.mainSwiper.swiperRef.slideTo(nextIndex);
+ this.setDateRange(nextIndex);
+ popoverDateTime.confirm(true);
+ }
}
diff --git a/src/app/modules/schedule/page/schedule-view.html b/src/app/modules/schedule/page/schedule-view.html
index f95ffc3b..de538b76 100644
--- a/src/app/modules/schedule/page/schedule-view.html
+++ b/src/app/modules/schedule/page/schedule-view.html
@@ -6,72 +6,101 @@
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public Licens for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see
-
-
+
-
+
+ {{ dateRange.startDate }} - {{ dateRange.endDate }}
+
+
+
+
+
+
+
+
+
+
+
+
-
{{ i + hoursRange.from }}:00
-
+
+
+
+ {{ i + hoursRange.from }}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/modules/schedule/page/schedule-view.scss b/src/app/modules/schedule/page/schedule-view.scss
index 6398e1a9..72433d07 100644
--- a/src/app/modules/schedule/page/schedule-view.scss
+++ b/src/app/modules/schedule/page/schedule-view.scss
@@ -13,18 +13,6 @@
* this program. If not, see
.
*/
-.full-height {
- height: 100%;
-}
-
-.day-labels > ion-button[disabled] {
- opacity: 1;
-}
-
-.day-labels {
- ion-button {
- ion-label {
- overflow: visible !important;
- }
- }
+.swiper, .swiper-wrapper, .swiper-slide {
+ overflow: unset;
}
diff --git a/src/app/modules/schedule/page/schema/schema.ts b/src/app/modules/schedule/page/schema/schema.ts
index 92fd9488..faafb114 100644
--- a/src/app/modules/schedule/page/schema/schema.ts
+++ b/src/app/modules/schedule/page/schema/schema.ts
@@ -19,6 +19,8 @@ import {unitOfTime} from 'moment';
interface DateRange {
duration: SCISO8601Duration;
start: number;
+ startAsString?: string;
+ endAsString?: string;
}
export interface Range
{
diff --git a/src/app/modules/schedule/schedule.module.ts b/src/app/modules/schedule/schedule.module.ts
index 341a903b..da3369ea 100644
--- a/src/app/modules/schedule/schedule.module.ts
+++ b/src/app/modules/schedule/schedule.module.ts
@@ -36,6 +36,7 @@ import {ScheduleDayComponent} from './page/grid/schedule-day.component';
import {ThingTranslateModule} from '../../translation/thing-translate.module';
import {InfiniteSwiperComponent} from './page/grid/infinite-swiper.component';
import {FileOpener} from '@ionic-native/file-opener/ngx';
+import {CalendarComponent} from './page/components/calendar.component';
const settingsRoutes: Routes = [
{path: 'schedule', redirectTo: 'schedule/calendar/now'},
@@ -51,6 +52,7 @@ const settingsRoutes: Routes = [
*/
@NgModule({
declarations: [
+ CalendarComponent,
CalendarViewComponent,
ModalEventCreatorComponent,
ScheduleCardComponent,
diff --git a/src/app/modules/settings/item/settings-item.html b/src/app/modules/settings/item/settings-item.html
index 1bb980b3..e5b75d77 100644
--- a/src/app/modules/settings/item/settings-item.html
+++ b/src/app/modules/settings/item/settings-item.html
@@ -12,7 +12,7 @@
{{ vals.name }}
Sync Now
-
@@ -97,7 +97,7 @@
{{
'settings.calendar.export.backup' | translate
}}
-
{{
diff --git a/src/app/modules/settings/page/settings-page.html b/src/app/modules/settings/page/settings-page.html
index 12b36dff..ca0c6c3f 100644
--- a/src/app/modules/settings/page/settings-page.html
+++ b/src/app/modules/settings/page/settings-page.html
@@ -1,8 +1,10 @@
-
+
-
{{ 'settings.title' | translate | titlecase }}
@@ -43,6 +45,6 @@
(click)="presentResetAlert()"
>
{{ 'settings.resetSettings' | translate }}
-
diff --git a/src/app/modules/settings/settings.module.ts b/src/app/modules/settings/settings.module.ts
index 03c4f57f..dcc41454 100644
--- a/src/app/modules/settings/settings.module.ts
+++ b/src/app/modules/settings/settings.module.ts
@@ -33,6 +33,7 @@ import {ScheduleSyncService} from '../background/schedule/schedule-sync.service'
import {CalendarService} from '../calendar/calendar.service';
import {CalendarModule} from '../calendar/calendar.module';
import {BackgroundModule} from '../background/background.module';
+import {UtilModule} from '../../util/util.module';
const settingsRoutes: Routes = [
{path: 'settings', component: SettingsPageComponent},
@@ -58,6 +59,7 @@ const settingsRoutes: Routes = [
TranslateModule.forChild(),
ThingTranslateModule.forChild(),
RouterModule.forChild(settingsRoutes),
+ UtilModule,
],
providers: [
ScheduleSyncService,
diff --git a/src/app/translation/i18n.spec.ts b/src/app/translation/i18n.spec.ts
index c6e7e105..b957a42e 100644
--- a/src/app/translation/i18n.spec.ts
+++ b/src/app/translation/i18n.spec.ts
@@ -28,6 +28,10 @@ const exceptions = new Set([
'ejournal',
'backup',
'export',
+ 'dashboard',
+ 'home',
+ 'email',
+ 'logins',
]);
const languages = [
diff --git a/src/app/util/daytime-key.pipe.ts b/src/app/util/daytime-key.pipe.ts
new file mode 100644
index 00000000..5aa8f6e6
--- /dev/null
+++ b/src/app/util/daytime-key.pipe.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2021 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see
+
+
+
diff --git a/src/assets/tabler-icons/arrow-loop-left.svg b/src/assets/tabler-icons/arrow-loop-left.svg
index bc1cbcaa..70ea7929 100644
--- a/src/assets/tabler-icons/arrow-loop-left.svg
+++ b/src/assets/tabler-icons/arrow-loop-left.svg
@@ -1,7 +1,7 @@
diff --git a/src/assets/tabler-icons/arrow-loop-right.svg b/src/assets/tabler-icons/arrow-loop-right.svg
index 351fac07..4f69ae6b 100644
--- a/src/assets/tabler-icons/arrow-loop-right.svg
+++ b/src/assets/tabler-icons/arrow-loop-right.svg
@@ -1,7 +1,7 @@
diff --git a/src/assets/tabler-icons/brand-vk.svg b/src/assets/tabler-icons/brand-vk.svg
index 1ecee228..d7e81e3f 100644
--- a/src/assets/tabler-icons/brand-vk.svg
+++ b/src/assets/tabler-icons/brand-vk.svg
@@ -1,6 +1,8 @@
diff --git a/src/assets/tabler-icons/bulb-off.svg b/src/assets/tabler-icons/bulb-off.svg
index 86b1433b..68e79900 100644
--- a/src/assets/tabler-icons/bulb-off.svg
+++ b/src/assets/tabler-icons/bulb-off.svg
@@ -1,9 +1,7 @@
diff --git a/src/assets/tabler-icons/cardboards.svg b/src/assets/tabler-icons/cardboards.svg
index 490074bd..4b0cd7bb 100644
--- a/src/assets/tabler-icons/cardboards.svg
+++ b/src/assets/tabler-icons/cardboards.svg
@@ -1,8 +1,8 @@
diff --git a/src/assets/tabler-icons/cloud.svg b/src/assets/tabler-icons/cloud.svg
index a5345f6d..1bda7e15 100644
--- a/src/assets/tabler-icons/cloud.svg
+++ b/src/assets/tabler-icons/cloud.svg
@@ -1,6 +1,6 @@
diff --git a/src/assets/tabler-icons/currency-bath.svg b/src/assets/tabler-icons/currency-bath.svg
new file mode 100644
index 00000000..4051da0e
--- /dev/null
+++ b/src/assets/tabler-icons/currency-bath.svg
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/src/assets/tabler-icons/device-mobile-rotated.svg b/src/assets/tabler-icons/device-mobile-rotated.svg
index 491d7758..6c9bc749 100644
--- a/src/assets/tabler-icons/device-mobile-rotated.svg
+++ b/src/assets/tabler-icons/device-mobile-rotated.svg
@@ -1,8 +1,10 @@
+
diff --git a/src/assets/tabler-icons/device-mobile-vibration.svg b/src/assets/tabler-icons/device-mobile-vibration.svg
index d0ea731e..a53750a5 100644
--- a/src/assets/tabler-icons/device-mobile-vibration.svg
+++ b/src/assets/tabler-icons/device-mobile-vibration.svg
@@ -1,9 +1,9 @@
diff --git a/src/assets/tabler-icons/device-mobile.svg b/src/assets/tabler-icons/device-mobile.svg
index 378e2053..667bd813 100644
--- a/src/assets/tabler-icons/device-mobile.svg
+++ b/src/assets/tabler-icons/device-mobile.svg
@@ -1,7 +1,7 @@
diff --git a/src/assets/tabler-icons/directions.svg b/src/assets/tabler-icons/directions.svg
index 819c6e71..b036bfab 100644
--- a/src/assets/tabler-icons/directions.svg
+++ b/src/assets/tabler-icons/directions.svg
@@ -1,11 +1,10 @@
diff --git a/src/assets/tabler-icons/edit.svg b/src/assets/tabler-icons/edit.svg
index 07540044..316a8a8d 100644
--- a/src/assets/tabler-icons/edit.svg
+++ b/src/assets/tabler-icons/edit.svg
@@ -1,8 +1,8 @@
diff --git a/src/assets/tabler-icons/eraser.svg b/src/assets/tabler-icons/eraser.svg
index 36a2cc5a..1e4ff1e8 100644
--- a/src/assets/tabler-icons/eraser.svg
+++ b/src/assets/tabler-icons/eraser.svg
@@ -1,7 +1,7 @@
diff --git a/src/assets/tabler-icons/file-download.svg b/src/assets/tabler-icons/file-download.svg
index 942b215a..1f5d958a 100644
--- a/src/assets/tabler-icons/file-download.svg
+++ b/src/assets/tabler-icons/file-download.svg
@@ -2,8 +2,8 @@
diff --git a/src/assets/tabler-icons/hanger.svg b/src/assets/tabler-icons/hanger.svg
index 59fdc04c..7c88b1f4 100644
--- a/src/assets/tabler-icons/hanger.svg
+++ b/src/assets/tabler-icons/hanger.svg
@@ -1,6 +1,6 @@
diff --git a/src/assets/tabler-icons/heart-broken.svg b/src/assets/tabler-icons/heart-broken.svg
index 0afc1847..79fa2b93 100644
--- a/src/assets/tabler-icons/heart-broken.svg
+++ b/src/assets/tabler-icons/heart-broken.svg
@@ -1,7 +1,7 @@
diff --git a/src/assets/tabler-icons/heart.svg b/src/assets/tabler-icons/heart.svg
index 8747966f..56211a9b 100644
--- a/src/assets/tabler-icons/heart.svg
+++ b/src/assets/tabler-icons/heart.svg
@@ -1,6 +1,6 @@
diff --git a/src/assets/tabler-icons/letters-case.svg b/src/assets/tabler-icons/letters-case.svg
new file mode 100644
index 00000000..e8e16df8
--- /dev/null
+++ b/src/assets/tabler-icons/letters-case.svg
@@ -0,0 +1,9 @@
+
+
+
+
diff --git a/src/assets/tabler-icons/miliraty-award.svg b/src/assets/tabler-icons/miliraty-award.svg
new file mode 100644
index 00000000..53c2cd79
--- /dev/null
+++ b/src/assets/tabler-icons/miliraty-award.svg
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/src/assets/tabler-icons/plug.svg b/src/assets/tabler-icons/plug.svg
index 6ea4a764..63c4b2d5 100644
--- a/src/assets/tabler-icons/plug.svg
+++ b/src/assets/tabler-icons/plug.svg
@@ -1,9 +1,9 @@
diff --git a/src/assets/tabler-icons/smart-home.svg b/src/assets/tabler-icons/smart-home.svg
index b340c22a..7c3e1cc8 100644
--- a/src/assets/tabler-icons/smart-home.svg
+++ b/src/assets/tabler-icons/smart-home.svg
@@ -1,6 +1,7 @@
diff --git a/src/assets/tabler-icons/test-pipe.svg b/src/assets/tabler-icons/test-pipe.svg
index 0b7b3d61..14c00e6b 100644
--- a/src/assets/tabler-icons/test-pipe.svg
+++ b/src/assets/tabler-icons/test-pipe.svg
@@ -1,9 +1,8 @@
diff --git a/src/assets/tabler-icons/vector-beizer-2.svg b/src/assets/tabler-icons/vector-beizer-2.svg
new file mode 100644
index 00000000..1697d014
--- /dev/null
+++ b/src/assets/tabler-icons/vector-beizer-2.svg
@@ -0,0 +1,12 @@
+
+
+
+
diff --git a/src/global.scss b/src/global.scss
index 984392f2..51255ffc 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -37,7 +37,7 @@ ion-item {
font-weight: bold;
}
ion-thumbnail {
- background: var(--placeholder-gray);
+ background: transparent;
--size: 36px;
display: flex;
align-items: center;
diff --git a/src/index.html b/src/index.html
index 7046d987..c39e6c12 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,7 +24,7 @@
- {{ appName }}
+