diff --git a/angular.json b/angular.json index 73d735f6..5b40970d 100644 --- a/angular.json +++ b/angular.json @@ -37,7 +37,8 @@ "node_modules/nebular-icons/scss/nebular-icons.scss", "node_modules/pace-js/templates/pace-theme-flash.tmpl.css", "node_modules/leaflet/dist/leaflet.css", - "src/app/@theme/styles/styles.scss" + "src/app/@theme/styles/styles.scss", + "node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss" ], "scripts": [ "node_modules/pace-js/pace.min.js", diff --git a/package-lock.json b/package-lock.json index d1b53df1..90aaa524 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "intl": "1.2.5", "ionicons": "2.0.1", "leaflet": "1.2.0", + "mdb-angular-ui-kit": "^4.1.0", "nebular-icons": "1.1.0", "ng2-ckeditor": "~1.2.9", "ng2-completer": "^9.0.1", @@ -1349,6 +1350,7 @@ "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-15.2.10.tgz", "integrity": "sha512-/TSnm/ZQML6A4lvunyN2tjTB5utuvk3d1Pnfyehp/FXtV6YfZm6+EZrOpKkKPCxTuAgW6c9KK4yQtt3RuNVpwQ==", "dev": true, + "license": "MIT", "dependencies": { "@angular-devkit/architect": "0.1502.10", "@angular-devkit/core": "15.2.10", @@ -5949,6 +5951,7 @@ "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==", "dev": true, "hasInstallScript": true, + "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)", "engines": { "node": ">=6" } @@ -18654,6 +18657,22 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/mdb-angular-ui-kit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/mdb-angular-ui-kit/-/mdb-angular-ui-kit-4.1.0.tgz", + "integrity": "sha512-9W6JZDsizTq8aVIDucIQpPqdiw0p3ILYf25lH76u/9UfjNf5M1LchMfDc1PiL3FSEpU+OImZ0LbAMLzhGvZn9g==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/animations": "^15.0.0", + "@angular/cdk": "^15.0.0", + "@angular/common": "^15.0.0", + "@angular/core": "^15.0.0", + "@angular/forms": "^15.0.0" + } + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", diff --git a/package.json b/package.json index 2fa12af0..1ff72b42 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "intl": "1.2.5", "ionicons": "2.0.1", "leaflet": "1.2.0", + "mdb-angular-ui-kit": "^4.1.0", "nebular-icons": "1.1.0", "ng2-ckeditor": "~1.2.9", "ng2-completer": "^9.0.1", diff --git a/src/app/admin/banner/banner.service.ts b/src/app/admin/banner/banner.service.ts index 7af318a9..3143386e 100644 --- a/src/app/admin/banner/banner.service.ts +++ b/src/app/admin/banner/banner.service.ts @@ -1,36 +1,14 @@ import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; -import { delay, map } from 'rxjs/operators'; import { Apollo } from 'apollo-angular'; import { FIND_UNIQUE_BANNER, LIST_BANNERS } from './graphql/queries'; import { Banner } from './banner.model'; import { CREATE_BANNER, UPDATE_BANNER } from './graphql/mutations'; -const TOTAL_PAGES = 7; - -export class NewsPost { - title: string; - link: string; - creator: string; - text: string; -} - @Injectable() export class BannerService { - constructor(private http: HttpClient, private readonly apollo: Apollo) {} - - load(page: number, pageSize: number): Observable { - const startIndex = ((page - 1) % TOTAL_PAGES) * pageSize; - - return this.http - .get('assets/data/news.json') - .pipe( - map(news => news.splice(startIndex, pageSize)), - delay(1500), - ); - } + constructor(private readonly apollo: Apollo) {} listBanners(): Observable { return this.apollo diff --git a/src/app/admin/category/category.model.ts b/src/app/admin/category/category.model.ts index 129847da..e6391497 100644 --- a/src/app/admin/category/category.model.ts +++ b/src/app/admin/category/category.model.ts @@ -5,6 +5,7 @@ export class Category { name!: string; createdAt!: Date; updatedAt!: Date | null; + icon?: string | null; //Products?: Array; SubCategory?: Array; //TODO: _count?: CategoryCount; diff --git a/src/app/admin/product/product.ts b/src/app/admin/product/product.ts new file mode 100644 index 00000000..73f546f5 --- /dev/null +++ b/src/app/admin/product/product.ts @@ -0,0 +1,37 @@ +export class Product { + id!: string; + userId!: string; + categoryId!: string; + sub_categoryId!: string; + brandId!: string; + name!: string; + description!: string; + conditionId!: string; + price!: number; + countryId!: string | null; + stateId!: string | null; + cityId!: string | null; + neighbourhoodId!: string | null; + zip_code!: string | null; + createdAt!: Date; + approvedAt!: Date | null; + updatedAt!: Date | null; + isActive!: boolean; + isPromoted!: boolean; + viewCount!: number | null; + //user?: User; + //category?: Category; + //sub_category?: SubCategory; + //brand?: Brand; + //condition?: Condition; + //country?: Country | null; + //state?: State | null; + //city?: City | null; + //neighbourhood?: Neighbourhood | null; + //favorites?: Array; + //comments?: Array; + //img_urls?: Array; + //report?: Report | null; + //shares?: Array; + //_count?: ProductCount; +} diff --git a/src/app/public/home/banner/banner.component.html b/src/app/public/home/banner/banner.component.html new file mode 100644 index 00000000..69a15f91 --- /dev/null +++ b/src/app/public/home/banner/banner.component.html @@ -0,0 +1,23 @@ + + + ... + + + ... + + + ... + + diff --git a/src/app/public/home/banner/banner.component.scss b/src/app/public/home/banner/banner.component.scss new file mode 100644 index 00000000..ff1cbb81 --- /dev/null +++ b/src/app/public/home/banner/banner.component.scss @@ -0,0 +1,20 @@ +@import '../../../@theme/styles/themes'; +@import 'bootstrap/scss/mixins/breakpoints'; +@import '@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + .solar-card nb-card-header { + border: none; + padding-bottom: 0; + } + + @include media-breakpoint-down(sm) { + ngx-traffic { + display: none; + } + } +} + +mdb-carousel-item { + height: 320px; +} \ No newline at end of file diff --git a/src/app/public/home/banner/banner.component.ts b/src/app/public/home/banner/banner.component.ts new file mode 100644 index 00000000..3a0522c5 --- /dev/null +++ b/src/app/public/home/banner/banner.component.ts @@ -0,0 +1,30 @@ +import {Component, OnDestroy, OnInit} from '@angular/core'; +import { Subject } from 'rxjs'; +import { Banner } from '../../../admin/banner/banner.model'; + +interface CardSettings { + title: string; + iconClass: string; + type: string; +} + +@Component({ + selector: 'ngx-home-banner', + styleUrls: ['./banner.component.scss'], + templateUrl: './banner.component.html', +}) +export class BannerHomeComponent implements OnInit, OnDestroy { + private destroy$: Subject = new Subject(); + banners: Banner[]; + + constructor() {} + + ngOnInit(): void { + console.log('init'); + } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } +} diff --git a/src/app/public/home/home.component.html b/src/app/public/home/home.component.html index 8a2b5180..6d57485b 100644 --- a/src/app/public/home/home.component.html +++ b/src/app/public/home/home.component.html @@ -1,3 +1,35 @@
- Home +
+ +
+ +
+
+ +
+ + {{category.name}} + +
+ +
+ +
+
+

Publicidade

+ +
+
+ +
+
+

Anúncios patrocinados

+
+
+
+ +
+
+
+ diff --git a/src/app/public/home/home.component.scss b/src/app/public/home/home.component.scss index 223bcbe6..35eef98f 100644 --- a/src/app/public/home/home.component.scss +++ b/src/app/public/home/home.component.scss @@ -1,6 +1,6 @@ -@import '../../@theme/styles/themes'; -@import 'bootstrap/scss/mixins/breakpoints'; -@import '@nebular/theme/styles/global/breakpoints'; +@import "../../@theme/styles/themes"; +@import "bootstrap/scss/mixins/breakpoints"; +@import "@nebular/theme/styles/global/breakpoints"; @include nb-install-component() { .solar-card nb-card-header { @@ -14,3 +14,145 @@ } } } + +mdb-carousel-item { + height: 320px; +} + +.row .col-12 { + margin-bottom: 20px; +} + +@media (min-width: 1280px) { + .category + [_nghost-pwx-c109] + .settings-column[_ngcontent-pwx-c109] + ngd-page-tabs[_ngcontent-pwx-c109] { + margin-bottom: 1.5rem; + } +} + +.category { + display: flex; + flex-wrap: wrap; + overflow: hidden; + max-width: 100%; + -webkit-flex-wrap: wrap; + height: 130px; +} + +.category a { + display: flex; + flex: 1; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 1rem; + min-width: 120px; + height: 7.5rem; + font-size: 0.875rem; + text-decoration: none; + color: #8994a3; + margin-bottom: 1rem; + background: white; + color: #000000e0; + box-shadow: 0 8px 20px #dae0eb99; + margin-left: 10px; + margin-right: 10px; +} + +.category a { + color: #36f; + text-decoration: none; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; +} + +.category a .text-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.category a nb-icon { + font-size: 1.875rem; + margin-bottom: 1rem; +} + +.category nb-icon { + font-size: 1.25rem; + line-height: 1; + width: 1em; + height: 1em; + display: inline-block; +} + +.category a .title { + padding-bottom: 0.75rem; + font-weight: 500; + text-align: center; +} + +.category a .line { + display: none; + height: 0.1875rem; + width: 60%; + background: #3366ff; + border-radius: 1.5px; +} + +.category a:hover .line { + display: block; +} + +.ad-row { + display: flex; + justify-content: center; +} + +.ad-container { + display: flex; + justify-content: center; + width: 970px; + height: 90px; + margin: 24px 12px; + border: 1px gray; +} + +.ad { + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + background-color: #e1e1e1; +} + +.ad p { + position: absolute; + width: 100px; + text-align: center; +} + +.card-col { + flex: 1 0 calc(16.66% - 1rem); + margin: 0 0.5rem; +} + +@media screen and (min-width: 1500px) { + .card-col { + flex: 0 0 calc(16.66% - 1rem); + } +} +@media screen and (min-width: 1200px) { + .card-col { + flex: 0 0 calc(20% - 1rem); + } +} +@media screen and (min-width: 840px) { + .card-col { + flex: 0 0 calc(16.66% - 1rem); + } +} diff --git a/src/app/public/home/home.component.ts b/src/app/public/home/home.component.ts index 51f60040..beb411a9 100644 --- a/src/app/public/home/home.component.ts +++ b/src/app/public/home/home.component.ts @@ -2,6 +2,10 @@ import {Component, OnDestroy} from '@angular/core'; import { NbThemeService } from '@nebular/theme'; import { takeWhile } from 'rxjs/operators' ; import { SolarData } from '../../@core/data/solar'; +import { Banner } from '../../admin/banner/banner.model'; +import { Subject } from 'rxjs'; +import { Category } from '../../admin/category/category.model'; +import { Product } from '../../admin/product/product'; interface CardSettings { title: string; @@ -15,85 +19,108 @@ interface CardSettings { templateUrl: './home.component.html', }) export class HomeComponent implements OnDestroy { + private destroy$: Subject = new Subject(); + banners: Banner[]; + categories: Category[]; + products: any[]; - private alive = true; + constructor() {} - solarValue: number; - lightCard: CardSettings = { - title: 'Light', - iconClass: 'nb-lightbulb', - type: 'primary', - }; - rollerShadesCard: CardSettings = { - title: 'Roller Shades', - iconClass: 'nb-roller-shades', - type: 'success', - }; - wirelessAudioCard: CardSettings = { - title: 'Wireless Audio', - iconClass: 'nb-audio', - type: 'info', - }; - coffeeMakerCard: CardSettings = { - title: 'Coffee Maker', - iconClass: 'nb-coffee-maker', - type: 'warning', - }; + ngOnInit(): void { + console.log('init'); - statusCards: string; - - commonStatusCardsSet: CardSettings[] = [ - this.lightCard, - this.rollerShadesCard, - this.wirelessAudioCard, - this.coffeeMakerCard, - ]; - - statusCardsByThemes: { - default: CardSettings[]; - cosmic: CardSettings[]; - corporate: CardSettings[]; - dark: CardSettings[]; - } = { - default: this.commonStatusCardsSet, - cosmic: this.commonStatusCardsSet, - corporate: [ + this.categories = [ { - ...this.lightCard, - type: 'warning', - }, - { - ...this.rollerShadesCard, - type: 'primary', - }, - { - ...this.wirelessAudioCard, - type: 'danger', - }, - { - ...this.coffeeMakerCard, - type: 'info', - }, - ], - dark: this.commonStatusCardsSet, - }; + "name": "Nutrientes", + "id": "Nutrientes", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "arrow-ios-back-outline" + }, + { + "name": "Iluminação", + "id": "Decoração", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "bulb-outline" + }, + { + "name": "Hidroponia", + "id": "Hidroponia", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "droplet-outline" + }, + { + "name": "Irrigação", + "id": "Irrigação", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "arrow-ios-back-outline" + }, + { + "name": "Colheita", + "id": "Colheita", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "arrow-ios-back-outline" + }, + { + "name": "Pragas", + "id": "Pragas", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "arrow-ios-back-outline" + }, + { + "name": "Potes e Vasos", + "id": "Potes e Vasos", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "arrow-ios-back-outline" + }, + { + "name": "Substratos", + "id": "Substratos", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "arrow-ios-back-outline" + }, + { + "name": "Controle", + "id": "Controle", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "arrow-ios-back-outline" + }, + { + "name": "Clonagem", + "id": "Clonagem", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "copy-outline" + }, + { + "name": "Tendas", + "id": "Tendas", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "arrow-ios-back-outline" + }, + { + "name": "Circulação", + "id": "Circulação", + "updatedAt": new Date(), + "createdAt": new Date(), + "icon": "arrow-ios-back-outline" + }, + ] - constructor(private themeService: NbThemeService, - private solarService: SolarData) { - this.themeService.getJsTheme() - .pipe(takeWhile(() => this.alive)) - .subscribe(theme => { - this.statusCards = this.statusCardsByThemes[theme.name]; - }); - - this.solarService.getSolarData() - .pipe(takeWhile(() => this.alive)) - .subscribe((data) => { - this.solarValue = data; - }); + this.products = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] } ngOnDestroy() { - this.alive = false; + this.destroy$.next(); + this.destroy$.complete(); } } diff --git a/src/app/public/home/home.module.ts b/src/app/public/home/home.module.ts index 9ee7f036..6edc63e1 100644 --- a/src/app/public/home/home.module.ts +++ b/src/app/public/home/home.module.ts @@ -1,4 +1,4 @@ -import { NgModule } from '@angular/core'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { NbActionsModule, NbButtonModule, @@ -15,6 +15,9 @@ import { NgxEchartsModule } from 'ngx-echarts'; import { ThemeModule } from '../../@theme/theme.module'; import { HomeComponent } from './home.component'; import { FormsModule } from '@angular/forms'; +import { MdbCarouselModule } from 'mdb-angular-ui-kit/carousel'; +import { BannerHomeComponent } from './banner/banner.component'; +import { ProductHomeComponent } from './product/product.component'; @NgModule({ imports: [ @@ -31,9 +34,13 @@ import { FormsModule } from '@angular/forms'; NbIconModule, NbButtonModule, NgxEchartsModule, + MdbCarouselModule ], declarations: [ - HomeComponent + HomeComponent, + BannerHomeComponent, + ProductHomeComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class HomeModule { } diff --git a/src/app/public/home/product/product.component.html b/src/app/public/home/product/product.component.html new file mode 100644 index 00000000..5cabe265 --- /dev/null +++ b/src/app/public/home/product/product.component.html @@ -0,0 +1,23 @@ + + +
    +
  • + + +
    • +
+ Destaque + + +
Bioledz 38400 - 800 watts
+

R$ 3.475,99

+ +
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+ + Ver + + diff --git a/src/app/public/home/product/product.component.scss b/src/app/public/home/product/product.component.scss new file mode 100644 index 00000000..70dd3e94 --- /dev/null +++ b/src/app/public/home/product/product.component.scss @@ -0,0 +1,75 @@ +@import '../../../@theme/styles/themes'; +@import 'bootstrap/scss/mixins/breakpoints'; +@import '@nebular/theme/styles/global/breakpoints'; + +.card-img-top { + font-size: 1.125rem; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + text-anchor: middle; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + overflow: hidden; + border-bottom: 0; + height: 180px; + padding: 0; + position: relative; +} + +.card-img-top ul { + align-items: center; + display: flex; + height: 100%; + justify-content: flex-start; + margin: 0; + overflow: scroll hidden; + padding: 0; + scroll-snap-type: x mandatory; + scrollbar-width: none; + pointer-events: auto; +} + +.card-img-top ul li { + align-items: center; + display: flex; + height: 100%; + justify-content: center; + list-style: none; + margin: 0; + min-width: 100%; + overflow: hidden; + padding: 0; + position: relative; + scroll-snap-align: start; + scroll-snap-stop: always; +} + +.card-img-top ul li img, .card-img-top ul li svg { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + overflow-clip-margin: content-box; + overflow: clip; +} + +.card-img-top span.badge { + align-items: center; + background: blue; + color:white; + font-weight: 600; + overflow: hidden; + white-space: nowrap; + border-radius: 4px; + font-size: 12px; + height: 24px; + left: 16px; + top: 16px; + max-width: calc(100% - 16px); + position: absolute; + z-index: 8; + display: block; + text-overflow: ellipsis; + padding: 4px 8px; +} \ No newline at end of file diff --git a/src/app/public/home/product/product.component.ts b/src/app/public/home/product/product.component.ts new file mode 100644 index 00000000..4096ada3 --- /dev/null +++ b/src/app/public/home/product/product.component.ts @@ -0,0 +1,24 @@ +import {Component, Input, OnDestroy, OnInit} from '@angular/core'; +import { Subject } from 'rxjs'; +import { Product } from '../../../admin/product/product'; + +@Component({ + selector: 'ngx-home-product', + styleUrls: ['./product.component.scss'], + templateUrl: './product.component.html', +}) +export class ProductHomeComponent implements OnInit, OnDestroy { + private destroy$: Subject = new Subject(); + @Input() product: Product; + + constructor() {} + + ngOnInit(): void { + console.log('init'); + } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } +} diff --git a/src/app/public/public.module.ts b/src/app/public/public.module.ts index 6c53feed..c806d72c 100644 --- a/src/app/public/public.module.ts +++ b/src/app/public/public.module.ts @@ -5,12 +5,14 @@ import { ThemeModule } from '../@theme/theme.module'; import { PublicComponent } from './public.component'; import { PublicRoutingModule } from './public-routing.module'; import { MiscellaneousModule } from './miscellaneous/miscellaneous.module'; +import { HomeModule } from './home/home.module'; @NgModule({ imports: [ PublicRoutingModule, ThemeModule, NbMenuModule, - MiscellaneousModule + MiscellaneousModule, + HomeModule ], declarations: [ PublicComponent, diff --git a/src/index.html b/src/index.html index b68c6bf7..d1b5a186 100644 --- a/src/index.html +++ b/src/index.html @@ -9,6 +9,7 @@ +