Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Ross I Kinsey
where
Commits
6ce4429b
Commit
6ce4429b
authored
Feb 18, 2020
by
Andrew Hrdy
Browse files
Dark mode map and some other stuff
parent
b1c6b3c4
Changes
17
Hide whitespace changes
Inline
Side-by-side
where-web/.editorconfig
0 → 100644
View file @
6ce4429b
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
where-web/angular.json
View file @
6ce4429b
...
...
@@ -24,9 +24,8 @@
"src/assets"
],
"styles"
:
[
"./node_modules/@angular/material/prebuilt-themes/purple-green.css"
,
"./node_modules/leaflet/dist/leaflet.css"
,
"src/styles.scss"
"src/
sass/app-
styles.scss"
],
"scripts"
:
[]
},
...
...
@@ -90,7 +89,6 @@
"src/assets"
],
"styles"
:
[
"./node_modules/@angular/material/prebuilt-themes/purple-green.css"
,
"src/styles.css"
],
"scripts"
:
[]
...
...
where-web/src/app/app.component.html
View file @
6ce4429b
<mat-toolbar>
<span>
Where
</span>
<button
mat-icon-button
(click)=
"sidenav.toggle()"
>
<mat-icon>
menu
</mat-icon>
</button>
<h1>
Where
</h1>
</mat-toolbar>
<mat-
drawer
-container>
<mat-
drawer
[mode]=
"'side'"
[opened]=
"true
"
>
Drawyer Content
</mat-
drawer
>
<mat-
sidenav
-container>
<mat-
sidenav
#sidenav
[mode]=
"isMobile ? 'over' : 'side'"
[fixedInViewport]=
"isMobile"
[fixedTopGap]=
"56
"
>
<app-search></app-search>
</mat-
sidenav
>
<mat-
drawer
-content>
<mat-
sidenav
-content>
<app-map></app-map>
</mat-drawer-content>
</mat-drawer-container>
\ No newline at end of file
</mat-sidenav-content>
</mat-sidenav-container>
\ No newline at end of file
where-web/src/app/app.component.ts
View file @
6ce4429b
import
{
Component
,
OnInit
,
ChangeDetectorRef
,
ChangeDetectionStrategy
,
Input
,
OnChanges
}
from
'
@angular/core
'
;
import
{
Component
,
ChangeDetectionStrategy
,
ChangeDetectorRef
,
OnDestroy
}
from
'
@angular/core
'
;
import
{
MediaMatcher
}
from
'
@angular/cdk/layout
'
;
@
Component
({
selector
:
'
app-root
'
,
templateUrl
:
'
./app.component.html
'
,
styleUrls
:
[
'
./app.component.scss
'
],
changeDetection
:
ChangeDetectionStrategy
.
OnPush
selector
:
'
app-root
'
,
templateUrl
:
'
./app.component.html
'
,
styleUrls
:
[
'
./app.component.scss
'
],
changeDetection
:
ChangeDetectionStrategy
.
OnPush
})
export
class
AppComponent
{
export
class
AppComponent
implements
OnDestroy
{
private
mobileQuery
:
MediaQueryList
;
private
mobileQueryListener
;
constructor
(
cd
:
ChangeDetectorRef
,
media
:
MediaMatcher
)
{
this
.
mobileQuery
=
media
.
matchMedia
(
'
(max-width: 600px)
'
);
this
.
mobileQueryListener
=
()
=>
cd
.
detectChanges
();
this
.
mobileQuery
.
addListener
(
this
.
mobileQueryListener
);
}
get
isMobile
():
boolean
{
return
this
.
mobileQuery
.
matches
;
}
ngOnDestroy
()
{
this
.
mobileQuery
.
removeListener
(
this
.
mobileQueryListener
);
}
}
where-web/src/app/app.module.ts
View file @
6ce4429b
...
...
@@ -2,6 +2,11 @@ import { BrowserModule } from '@angular/platform-browser';
import
{
NgModule
}
from
'
@angular/core
'
;
import
{
MatToolbarModule
}
from
'
@angular/material/toolbar
'
;
import
{
MatSidenavModule
}
from
'
@angular/material/sidenav
'
;
import
{
MatIconModule
}
from
'
@angular/material/icon
'
;
import
{
MatButtonModule
}
from
'
@angular/material/button
'
;
import
{
MatFormFieldModule
,
MAT_FORM_FIELD_DEFAULT_OPTIONS
}
from
'
@angular/material/form-field
'
;
import
{
MatAutocompleteModule
}
from
'
@angular/material/autocomplete
'
;
import
{
MatInputModule
}
from
'
@angular/material/input
'
;
import
{
LeafletModule
}
from
'
@asymmetrik/ngx-leaflet
'
;
import
{
StoreModule
}
from
'
@ngrx/store
'
;
...
...
@@ -9,21 +14,37 @@ import { AppComponent } from './app.component';
import
{
BrowserAnimationsModule
}
from
'
@angular/platform-browser/animations
'
;
import
{
MapComponent
}
from
'
./map/map.component
'
;
import
{
reducers
}
from
'
./store/app.reducer
'
;
import
{
SearchComponent
}
from
'
./search/search.component
'
;
import
{
ReactiveFormsModule
}
from
'
@angular/forms
'
;
@
NgModule
({
declarations
:
[
AppComponent
,
MapComponent
],
imports
:
[
BrowserModule
,
BrowserAnimationsModule
,
MatToolbarModule
,
MatSidenavModule
,
LeafletModule
.
forRoot
(),
StoreModule
.
forRoot
(
reducers
),
],
providers
:
[],
bootstrap
:
[
AppComponent
]
declarations
:
[
AppComponent
,
MapComponent
,
SearchComponent
],
imports
:
[
BrowserModule
,
BrowserAnimationsModule
,
ReactiveFormsModule
,
MatToolbarModule
,
MatSidenavModule
,
MatIconModule
,
MatButtonModule
,
MatFormFieldModule
,
MatAutocompleteModule
,
MatInputModule
,
LeafletModule
.
forRoot
(),
StoreModule
.
forRoot
(
reducers
),
],
providers
:
[
{
provide
:
MAT_FORM_FIELD_DEFAULT_OPTIONS
,
useValue
:
{
appearance
:
'
outline
'
}
}
],
bootstrap
:
[
AppComponent
]
})
export
class
AppModule
{
}
where-web/src/app/map/map.component.html
View file @
6ce4429b
<div
class=
"map-root"
leaflet
[leafletOptions]=
"
o
ptions"
>
<div
class=
"map-root"
leaflet
[leafletOptions]=
"
mapO
ptions"
[leafletLayers]=
"mapLayers"
>
</div>
\ No newline at end of file
where-web/src/app/map/map.component.scss
View file @
6ce4429b
.map-root
{
height
:
650px
;
// TODO: Don't hardcode appbar height
height
:
calc
(
100vh
-
64px
);
@media
(
max-width
:
599px
)
{
height
:
calc
(
100vh
-
56px
);
}
}
\ No newline at end of file
where-web/src/app/map/map.component.ts
View file @
6ce4429b
import
{
Component
}
from
'
@angular/core
'
;
import
{
latLng
,
tileLayer
}
from
'
leaflet
'
;
import
{
Component
,
ChangeDetectorRef
,
OnDestroy
,
ChangeDetectionStrategy
}
from
'
@angular/core
'
;
import
{
latLng
,
tileLayer
,
MapOptions
,
TileLayer
}
from
'
leaflet
'
;
import
{
MediaMatcher
}
from
'
@angular/cdk/layout
'
;
const
createLayer
=
(
map
)
=>
tileLayer
(
map
,
{
attribution
:
'
© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>
'
,
subdomains
:
'
abcd
'
,
maxZoom
:
19
}
);
const
LIGHT_MODE_LAYER
=
createLayer
(
'
https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png
'
);
const
DARK_MODE_LAYER
=
createLayer
(
'
https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png
'
);
@
Component
({
selector
:
'
app-map
'
,
templateUrl
:
'
./map.component.html
'
,
styleUrls
:
[
'
./map.component.scss
'
]
styleUrls
:
[
'
./map.component.scss
'
],
changeDetection
:
ChangeDetectionStrategy
.
OnPush
})
export
class
MapComponent
{
options
=
{
layers
:
[
tileLayer
(
'
http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
'
,
{
maxZoom
:
19
,
attribution
:
'
...
'
})
],
zoom
:
17
,
center
:
latLng
(
38.831493
,
-
77.311485
)
export
class
MapComponent
implements
OnDestroy
{
mapOptions
:
MapOptions
=
{
zoom
:
17
,
center
:
latLng
(
38.831493
,
-
77.311485
)
};
private
darkModeQuery
:
MediaQueryList
;
private
darkModeQueryListener
;
constructor
(
private
cd
:
ChangeDetectorRef
,
media
:
MediaMatcher
)
{
this
.
darkModeQuery
=
media
.
matchMedia
(
'
(prefers-color-scheme: dark)
'
);
this
.
darkModeQueryListener
=
()
=>
cd
.
detectChanges
();
this
.
darkModeQuery
.
addListener
(
this
.
darkModeQueryListener
);
}
get
isDarkMode
():
boolean
{
return
this
.
darkModeQuery
.
matches
;
}
get
mapLayers
():
TileLayer
[]
{
return
this
.
isDarkMode
?
[
DARK_MODE_LAYER
]
:
[
LIGHT_MODE_LAYER
];
}
ngOnDestroy
()
{
this
.
darkModeQuery
.
removeListener
(
this
.
darkModeQueryListener
);
}
}
where-web/src/app/models/point_of_interest.model.ts
View file @
6ce4429b
...
...
@@ -6,4 +6,4 @@ export interface PointOfInterest {
parent
:
number
;
lat
:
number
;
lon
:
number
;
}
;
}
where-web/src/app/search/search.component.html
0 → 100644
View file @
6ce4429b
<form
[formGroup]=
"form"
class=
"search-container"
>
<mat-form-field>
<mat-label>
Search
</mat-label>
<input
type=
"text"
matInput
[formControlName]=
"'search'"
[matAutocomplete]=
"search"
/>
</mat-form-field>
<mat-autocomplete
#search
="
matAutocomplete
"
>
<mat-option
*ngFor=
"let option of autocompleteOptions"
[value]=
"option"
>
{{option}}
</mat-option>
</mat-autocomplete>
</form>
where-web/src/app/search/search.component.scss
0 → 100644
View file @
6ce4429b
.search-container
{
margin
:
15px
;
}
\ No newline at end of file
where-web/src/app/search/search.component.ts
0 → 100644
View file @
6ce4429b
import
{
Component
}
from
'
@angular/core
'
;
import
{
FormBuilder
,
FormGroup
}
from
'
@angular/forms
'
;
@
Component
({
selector
:
'
app-search
'
,
templateUrl
:
'
./search.component.html
'
,
styleUrls
:
[
'
./search.component.scss
'
]
})
export
class
SearchComponent
{
form
:
FormGroup
;
// TODO: Make dynamic
autocompleteOptions
:
string
[]
=
[
'
Water Fountain
'
,
'
Johnson Center
'
];
constructor
(
fb
:
FormBuilder
)
{
this
.
form
=
fb
.
group
({
search
:
''
});
// TODO: Actually do stuff when user searches
}
}
where-web/src/app/store/poi.selectors.ts
View file @
6ce4429b
import
{
createFeatureSelector
}
from
'
@ngrx/store
'
;
import
{
PoiState
}
from
'
./poi.reducer
'
;
const
getPoiState
=
createFeatureSelector
<
PoiState
>
(
'
poi
'
);
export
const
get
\ No newline at end of file
const
getPoiState
=
createFeatureSelector
<
PoiState
>
(
'
poi
'
);
\ No newline at end of file
where-web/src/sass/app-styles.scss
0 → 100644
View file @
6ce4429b
@import
"theming"
;
html
,
body
{
height
:
100%
;
}
body
{
margin
:
0
;
font-family
:
Roboto
,
"Helvetica Neue"
,
sans-serif
;
}
where-web/src/sass/theming.scss
0 → 100644
View file @
6ce4429b
@import
'~@angular/material/theming'
;
@include
mat-core
();
@import
'~@angular/material/theming'
;
$where-light-primary
:
mat-palette
(
$mat-indigo
);
$where-light-accent
:
mat-palette
(
$mat-amber
,
A200
,
A100
,
A400
);
$where-light-warn
:
mat-palette
(
$mat-red
);
$where-light-theme
:
mat-light-theme
(
$where-light-primary
,
$where-light-accent
,
$where-light-warn
);
$where-dark-primary
:
mat-palette
(
$mat-blue-grey
);
$where-dark-accent
:
mat-palette
(
$mat-amber
,
A200
,
A100
,
A400
);
$where-dark-warn
:
mat-palette
(
$mat-red
);
$where-dark-theme
:
mat-dark-theme
(
$where-dark-primary
,
$where-dark-accent
,
$where-dark-warn
);
@media
(
prefers-color-scheme
:
light
)
{
@include
angular-material-theme
(
$where-light-theme
);
}
@media
(
prefers-color-scheme
:
dark
)
{
@include
angular-material-theme
(
$where-dark-theme
);
}
\ No newline at end of file
where-web/src/styles.scss
deleted
100644 → 0
View file @
b1c6b3c4
/* You can add global styles to this file, and also import other style files */
html
,
body
{
height
:
100%
;
}
body
{
margin
:
0
;
font-family
:
Roboto
,
"Helvetica Neue"
,
sans-serif
;
}
where-web/tslint.json
View file @
6ce4429b
...
...
@@ -28,8 +28,7 @@
"interface-name"
:
false
,
"max-classes-per-file"
:
false
,
"max-line-length"
:
[
true
,
140
false
],
"member-access"
:
false
,
"member-ordering"
:
[
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment