Fixes #887: Create route '/settings' to display all project configurations

src/app/app-routing.module.ts

@@ -39,6 +39,10 @@ const routes: Routes = [
 	{
 		path: 'wall',
 		loadChildren: './media-wall/media-wall.module#MediaWallModule'
+	},
+	{
+		path: 'settings',
+		loadChildren: './settings/settings.module#SettingsModule'
 	}
 ];
 

src/app/feed/feed-advanced-search/feed-advanced-search.component.html

@@ -89,13 +89,16 @@ <h5 class="display-media">UK</h5>
 				<!-- Hook up a message if needed like google does "About xxxxx results (y.yy seconds)" -->
 			</div>
 		</div>
-			<a mat-menu-item class="media-wall-route views-search"
-				*ngIf="viewButtonChecked"
-				type="button"
-				[routerLink]="['/wall']"
-				[queryParams]="{ query : (query$ | async).queryString }"
-				target="_blank">
-					<h5 class="display-media">Display as Media Wall</h5>
-			</a>
+		<a mat-menu-item class="media-wall-route views-search"
+			*ngIf="viewButtonChecked"
+			type="button"
+			[routerLink]="['/wall']"
+			[queryParams]="{ query : (query$ | async).queryString }"
+			target="_blank">
+				<h5 class="display-media">Display as Media Wall</h5>
+		</a>
+		<a routerLink="/settings" target="_blank" class="tab">
+			Settings
+		</a>
 	</div>
 </div>

src/app/feed/feed-advanced-search/feed-advanced-search.component.scss

@@ -46,7 +46,7 @@ div.wrapper{
 		display: flex;
 		flex-direction: row;
 		align-items: baseline;
-		margin-left: 177px;
+		margin-left: 131px;
 		button {
 			outline: none;
 		}
@@ -65,13 +65,29 @@ div.wrapper{
 				color: #222;
 			}
 		}
+		a.tab {
+			cursor: pointer;
+			min-width: 50px;
+			text-decoration: none;
+			background:  transparent;
+			border: none;
+			padding: 12px;
+			margin-right: 15px;
+			font-family: Arial, sans-serif;
+			color: #777;
+			text-align: center;
+			font-size: 0.9em;
+			&:hover {
+				color: #222;
+			}
+		}
 		a.views-search {
 			position: absolute;
 			box-shadow: 0px 2px 2px 0px grey;
 			margin: 0px;
 			top: 38px;
 			z-index: 52;
-			left: 689px;
+			left: 642px;
 			color: rgba(0,0,0,.87);
 		}
 		button.toggleButton {

src/app/settings/settings-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SettingsComponent } from './settings.component';
+const routes: Routes = [
+	{
+		path: '',
+		component: SettingsComponent
+	}
+];
+@NgModule({
+	imports: [RouterModule.forChild(routes)],
+	exports: [RouterModule],
+	providers: []
+})
+export class LoklakSettingsRoutingModule { }

src/app/settings/settings.component.html

@@ -0,0 +1,17 @@
+<div class="outer-wrapper">
+	<div class="wrapper">
+    <!-- Source Url Config -->
+    <h1><u>URL Configuration</u></h1>
+    <div class="url-container" *ngFor="let key of urlObject">
+      <h2>{{key[0]}}</h2>
+      <div *ngFor="let value of key[1]">
+        <h4>{{value | lowercase}}</h4>
+      </div>
+    </div>
+    <!-- News Config -->
+    <h1><u>News Configuration</u></h1>
+    <div class="url-container" *ngFor="let key of newsConfigOrgs">
+      <h4 class="news">{{key}}</h4>
+    </div>
+	</div>
+</div>

src/app/settings/settings.component.scss

@@ -0,0 +1,48 @@
+@import '~src/styles/main';
+
+div.outer-wrapper {
+	min-height: 100vh;
+	width: 100%;
+	// background-color: #f9f2f4;
+	position:  relative;
+	@include --center-flex();
+
+	div.wrapper {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		align-items: center;
+		width: 584px;
+		box-shadow: 0px 2px 5px 2px #D10046;
+		margin: 15px;
+		background-color: #f9f2f4;
+		@include --center-flex-vertical();
+
+		width: 584px;
+		margin: 15px;
+		h1 {
+			font-weight: 300;
+			text-align: center;
+			font-size: 2.5em;
+			margin: 15px 0px 0px 0px;
+            font-family: 'Roboto', sans-serif;
+		}
+		h2 {
+			text-align: center;
+			color: #d10042;
+		}
+		h5 {
+			text-align: center;
+		}
+		.url-container {
+			width: 100%;
+			h4 {
+				text-align: center;
+			}
+			.news {
+				color: #d10042;
+			}
+		}
+	}
+}

src/app/settings/settings.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+	let component: SettingsComponent;
+	let fixture: ComponentFixture<SettingsComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [ SettingsComponent ]
+		})
+		.compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(SettingsComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/settings/settings.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { defaultUrlConfig } from '../shared/url-config';
+import { newsOrgs } from '../shared/news-org';
+
+@Component({
+	selector: 'app-settings',
+	templateUrl: './settings.component.html',
+	styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+	public urlObject = [];
+	public newsConfigOrgs = newsOrgs;
+	ngOnInit() {
+		let i = 0;
+		for (const key in defaultUrlConfig) {
+			if (key) {
+				const data = [];
+				const value = defaultUrlConfig[key];
+				const data2 = [];
+				for (const key2 in value) {
+					if (key2) {
+						const value2 = value[key2];
+						data2.push(key2, value2);
+					}
+				}
+				data.push(key, data2);
+				this.urlObject.push(data);
+				i++;
+			}
+		}
+	}
+}

src/app/settings/settings.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoklakSettingsRoutingModule } from './settings-routing.module';
+import { SettingsComponent } from './settings.component';
+
+@NgModule({
+	imports: [
+		/**
+		 * The `CommonModule` contributes many of the common directives that
+		 * applications need including `ngIf` and `ngFor`.
+		 * BrowserModule imports CommonModule and re-exports it.
+		 * The net effect is that an importer of `BrowserModule` gets `CommonModule` directives automatically.
+		 */
+		CommonModule,
+		LoklakSettingsRoutingModule
+	],
+	declarations: [
+		SettingsComponent
+	]
+})
+export class SettingsModule { }