updated css to match playlist manager, added engineering page

.gcloudignore

@@ -20,4 +20,5 @@ __pycache__/
 /setup.cfg
 
 env
+venv
 node_modules/

app.yaml

@@ -8,3 +8,6 @@ handlers:
   script: auto
   secure: always
 
+env_variables:
+  DEPLOY_DESTINATION: 'PROD'
+

requirements.txt

@@ -1,24 +1,27 @@
-cachetools==3.1.1
-certifi==2019.9.11
+cachetools==4.0.0
+certifi==2019.11.28
 chardet==3.0.4
 Click==7.0
 Flask==1.1.1
-google-api-core==1.14.3
-google-auth==1.6.3
-google-cloud-core==1.0.3
-google-cloud-firestore==1.4.0
-googleapis-common-protos==1.6.0
-grpcio==1.24.1
+google-api-core==1.16.0
+google-auth==1.10.1
+google-cloud-core==1.2.0
+google-cloud-firestore==1.6.1
+google-cloud-logging==1.14.0
+googleapis-common-protos==1.51.0
+grpcio==1.26.0
 idna==2.8
 itsdangerous==1.1.0
 Jinja2==2.10.3
 MarkupSafe==1.1.1
-protobuf==3.10.0
-pyasn1==0.4.7
-pyasn1-modules==0.2.6
+numpy==1.18.1
+opencv-python==4.1.2.30
+protobuf==3.11.2
+pyasn1==0.4.8
+pyasn1-modules==0.2.8
 pytz==2019.3
 requests==2.22.0
 rsa==4.0
-six==1.12.0
-urllib3==1.25.6
+six==1.14.0
+urllib3==1.25.7
 Werkzeug==0.16.0

sarsoo/__init__.py

@@ -1 +1,35 @@
 from .sarsoo import app
+
+import logging
+import os
+
+logger = logging.getLogger(__name__)
+logger.setLevel('DEBUG')
+
+fmframework_logger = logging.getLogger('fmframework')
+
+if os.environ.get('DEPLOY_DESTINATION', None) == 'PROD':
+    import google.cloud.logging
+    from google.cloud.logging.handlers import CloudLoggingHandler, setup_logging
+
+    log_format = '%(funcName)s - %(message)s'
+    formatter = logging.Formatter(log_format)
+
+    client = google.cloud.logging.Client()
+    handler = CloudLoggingHandler(client, name="sarsooxyz")
+    setup_logging(handler)
+
+    handler.setFormatter(formatter)
+
+    logger.addHandler(handler)
+    fmframework_logger.addHandler(handler)
+
+else:
+    log_format = '%(levelname)s %(name)s:%(funcName)s - %(message)s'
+    formatter = logging.Formatter(log_format)
+
+    stream_handler = logging.StreamHandler()
+    stream_handler.setFormatter(formatter)
+
+    logger.addHandler(stream_handler)
+    fmframework_logger.addHandler(stream_handler)

sarsoo/api/__init__.py

@@ -1,2 +1,3 @@
 from .art_api import art_api_print
 from .dev_api import dev_api_print
+from .eng_api import eng_api_print

sarsoo/api/dev_api.py

@@ -13,29 +13,14 @@ def get_all_collections():
 
     try:
         tags = dev_collection.get()
+        response = {'dev': sorted([i.to_dict() for i in tags], key=lambda k: k['index'])}
+        return jsonify(response)
+
     except exceptions.NotFound:
         abort(404)
 
-    dicts = list(map(lambda x: x.to_dict(), tags))
-
-    dev_documents = []
-
-    for dev_dict in dicts:
-        dev_documents.append({
-            'name': dev_dict['name'],
-            'description': [i for i in dev_dict['description']],
-            'url': dev_dict['url'],
-            'index': dev_dict['index']
-        })
-
-    response = {'dev': sorted(dev_documents, key=lambda k: k['index'])}
-
-    return jsonify(response)
-
 
 @dev_api_print.errorhandler(404)
 def error400(error):
-
     errorresponse = {'error': 'collection not found'}
-
     return jsonify(errorresponse), 404

sarsoo/api/eng_api.py

@@ -0,0 +1,26 @@
+from flask import Blueprint, jsonify, abort
+from google.cloud import firestore, exceptions
+
+fs = firestore.Client()
+
+eng_api_print = Blueprint('engapi', __name__)
+
+
+@eng_api_print.route('/', methods=['GET'])
+def get_all_collections():
+
+    eng_collection = fs.collection(u'eng')
+
+    try:
+        tags = eng_collection.get()
+        response = {'eng': sorted([i.to_dict() for i in tags], key=lambda k: k['index'])}
+        return jsonify(response)
+
+    except exceptions.NotFound:
+        abort(404)
+
+
+@eng_api_print.errorhandler(404)
+def error400(error):
+    errorresponse = {'error': 'collection not found'}
+    return jsonify(errorresponse), 404

sarsoo/art/templates/art/all.html

@@ -1,16 +1,16 @@
 {% extends 'base.html' %}
 
 
-{% block title %}art{% endblock %}
+{% block title %}/art{% endblock %}
 
 {% block content %}	
 {% for tag in tags %}
-	<div class="row">
+	<div class="row text-no-select">
 		<h1 class="sectiontitle">{{ tag.name }}</h1>
 		{% if tag.description %}<p>{{ tag.description }}</p>{% endif %}
 	</div>
 	{% for row in tag.images|batch(3) %}
-	<div class="row">
+	<div class="row text-no-select">
 		{% for image in row %}	
 	{#{% if loop.index0 % 3 == 0 %}<div class="row">{% endif %}#}
 		<div class="card pad-4">

sarsoo/art/templates/art/index.html

@@ -1,10 +1,10 @@
 {% extends 'base.html' %}
 
-{% block title %}art{% endblock %}
+{% block title %}/art{% endblock %}
 
 {% block content %}
 	{% for row in tags|batch(4) %}
-	<div class="row">
+	<div class="row text-no-select">
 		{% for tag in row %}
 		<div class="pad-3 card">	
 			<h1>{{ tag.name }}</h1>

sarsoo/music/templates/music/index.html

@@ -1,17 +1,17 @@
 {% extends 'base.html' %}
 
-{% block title %}music{% endblock %}
+{% block title %}/music{% endblock %}
 
 {% block content %}
-	<div class="row">
+	<div class="row text-no-select">
 		<h1 class = "col-12" style = "text-align: center; color: white;">most played of the last month</h1>
 	</div>
-	<div class="row">
+	<div class="row text-no-select">
 		{% for album in albums %}
 			<div class = "pad-2 card">
 				<img src="{{album.images[-1].link}}">
 				<p style="text-align:center">{{ album.name }}<br>{{ album.artist.name -}}</p>
-				<p style="text-align:center">{{- album.play_count }} plays</p>
+				<p style="text-align:center">{{- album.user_scrobbles }} plays</p>
 			</div>
 		{% endfor %}
 	</div>

sarsoo/sarsoo.py

@@ -4,8 +4,7 @@ import os
 
 from .art import art_print
 from .music import music_print
-from .api import art_api_print
-from .api import dev_api_print
+from .api import art_api_print, dev_api_print, eng_api_print
 
 # Project ID is determined by the GCLOUD_PROJECT environment variable
 db = firestore.Client()
@@ -16,6 +15,7 @@ app.register_blueprint(art_print, url_prefix='/art')
 app.register_blueprint(music_print, url_prefix='/music')
 app.register_blueprint(art_api_print, url_prefix='/api/art')
 app.register_blueprint(dev_api_print, url_prefix='/api/dev')
+app.register_blueprint(eng_api_print, url_prefix='/api/eng')
 
 staticbucketurl = 'https://storage.googleapis.com/sarsooxyzstatic/'
 
@@ -39,4 +39,9 @@ def main():
 def dev():
     return render_template('dev.html')
 
+
+@app.route('/engineering')
+def eng():
+    return render_template('eng.html')
+
 # [END gae_python37_app]

sarsoo/templates/base.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <html>
 <head>
-	<title>sarsoo/{% block title %}{% endblock %}</title>
+	<title>sarsoo{% block title %}{% endblock %}</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-	<link href="https://fonts.googleapis.com/css?family=Pirata+One|Lato" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Pirata+One|Roboto" rel="stylesheet">
 
 	<link rel="apple-touch-icon" sizes="180x180" href="https://storage.googleapis.com/sarsooxyzstatic/apple-touch-icon.png">
 	<link rel="icon" type="image/png" sizes="32x32" href="https://storage.googleapis.com/sarsooxyzstatic/favicon-32x32.png">
@@ -26,10 +26,11 @@
 		<li><a href="/dev">dev</a></li>
 		<li><a href="/art">art</a></li>
 		<li><a href="/music">music</a></li>
-		<li><a href="https://spotify.sarsoo.xyz">playlist manager</a></li>
+		<li><a href="/engineering">engineering</a></li>
 		<li class="right"><a href="https://www.instagram.com/pack_it_in_/">art ig</a></li>
 		<li class="right"><a href="https://www.last.fm/user/sarsoo">last.fm</a></li>
 		<li class="right"><a href="https://github.com/sarsoo">github</a></li>
+		<li class="right"><a href="https://spotify.sarsoo.xyz">playlist manager</a></li>
 	</ul>
 	
 	{% block content %}{% endblock %}

sarsoo/templates/dev.html

@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 
-{% block title %}dev{% endblock %}
+{% block title %}/dev{% endblock %}
 
 {% block content %}	
 	<div id="react"></div>

sarsoo/templates/eng.html

@@ -0,0 +1,8 @@
+{% extends 'base.html' %}
+
+{% block title %}/engineering{% endblock %}
+
+{% block content %}	
+	<div id="react"></div>
+	<script src="{{ url_for('static', filename='js/eng.bundle.js') }}"></script>
+{% endblock %}

sarsoo/templates/index.html

@@ -1,10 +1,10 @@
 {% extends 'base.html' %}
 
-{% block title %}home{% endblock %}
+{% block title %}{% endblock %}
 
 {% block content %}
 	
-	<div class="row">
+	<div class="row text-no-select">
 		<div class="col-9" style="text-align:center">
 			{% for text_entry in main_text %}
 			<p>{{ text_entry }}</p>
@@ -16,7 +16,7 @@
 		</div>
 	</div>
 
-	<div class="gallerystrip row">
+	<div class="gallerystrip row text-no-select">
 		{% for image in art %}
 		<img src="{{ staticroot }}art/{{ image.file_name  }}.jpg" alt="{{ image.file_name  }}" class="pad-4">
 		{% endfor %}

sarsoo/templates/music.html

@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 
-{% block title %}music{% endblock %}
+{% block title %}/music{% endblock %}
 
 {% block content %}	
 	<div class="row">

sass

@@ -0,0 +1 @@
+sass --style=compressed src/scss/style.scss build/style.css

src/js/dev/DevGallery.js

@@ -30,7 +30,7 @@ class DevGallery extends Component {
 
     render(){
 
-        var arrays = [], size = 2;
+        var arrays = [], size = 3;
 
         var a = this.state.entries.slice()
         while (a.length > 0)
@@ -38,7 +38,7 @@ class DevGallery extends Component {
 
         const gallery = <div>{arrays.map((entry) => <Row entries={entry}/>)}</div>;
 
-        const loadingMessage = <p className="center-text" >loading...</p>;
+        const loadingMessage = <p className="center-text text-no-select" >loading...</p>;
 
         return this.state.isLoading ? loadingMessage : gallery;
     }
@@ -48,8 +48,8 @@ class DevGallery extends Component {
 function Row(props){
 
     return (
-        <div className="row">
-            {props.entries.map((entry) => <DevEntry entry={entry} />)}
+        <div className="row text-no-select">
+            {props.entries.map((entry) => <DevEntry entry={entry} key={entry.index} />)}
         </div>
 
     );
@@ -59,7 +59,7 @@ function Row(props){
 function DevEntry(props){
     return (
 
-        <div className="pad-6 card">
+        <div className="pad-4 card">
             <h1>{props.entry.name}</h1>
 
 			{props.entry.description.map((entry) => <p key={entry} >{entry}</p>)}

src/js/eng/EngineeringGallery.js

@@ -0,0 +1,73 @@
+import React, { Component } from "react";
+const axios = require('axios');
+
+class EngineeringGallery extends Component {
+
+    constructor(props){
+        super(props);
+        this.state = {
+          entries: [],
+          isLoading: true
+        };
+        this.getEntries();
+    }
+
+    getEntries(){
+
+        var self = this;
+        axios.get('/api/eng')
+        .then(function (response){
+            self.setState({
+                entries: response.data.eng,
+                isLoading: false
+            });
+        })
+        .catch(function (error){
+            console.log(error);
+        });
+
+    }
+
+    render(){
+
+        var arrays = [], size = 3;
+
+        var a = this.state.entries.slice()
+        while (a.length > 0)
+            arrays.push(a.splice(0, size));
+
+        const gallery = <div>{arrays.map((entry) => <Row entries={entry} />)}</div>;
+
+        const loadingMessage = <p className="center-text text-no-select" >loading...</p>;
+
+        return this.state.isLoading ? loadingMessage : gallery;
+    }
+
+}
+
+function Row(props){
+
+    return (
+        <div className="row text-no-select">
+            {props.entries.map((entry) => <WorkEntry entry={entry} key={entry.index} />)}
+        </div>
+
+    );
+
+}
+
+function WorkEntry(props){
+    return (
+
+        <div className="pad-4 card">
+            <h1>{props.entry.name}</h1>
+
+			{props.entry.description.map((entry) => <p key={entry} >{entry}</p>)}
+
+            <a href={props.entry.url} className="button full-width">read</a>
+        </div>
+
+    );
+}
+
+export default EngineeringGallery;

src/js/eng/eng.js

@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import EngineeringGallery from "./EngineeringGallery.js";
+
+ReactDOM.render(<EngineeringGallery />, document.getElementById('react'));

src/scss/style.scss

@@ -1,7 +1,10 @@
-$font-stack: 'Lato', arial; 
+$font-stack: 'Roboto', arial; 
 $background-colour: #202124;
 $ui-colour: #131313;
+$light-ui: #575757;
 $text-colour: white;
+$ui-element: #505050;
+$ui-shadow: #404040;
 
 $pad-px: 20px;
 
@@ -30,6 +33,10 @@ p {
 	padding: 10px;
 }
 
+.ui-text {
+	color: $text-colour;
+}
+
 .center-text {
     text-align: center;
 }
@@ -38,28 +45,47 @@ p {
     width: 100%;
 }
 
+.half-width {
+    width: 50%;
+}
+
 .button {
-	background-color: #505050;
-	color: black;
-	border-radius: 10px;
+	background-color: $ui-element;
+	color: $text-colour;
+
 	display: inline-block;
+	
+	border-radius: 3px;
+	border: none;
 	margin: 4px auto;
-	cursor: pointer;
 	padding: 15px;
-	box-shadow: 2px 2px 4px  black;
-	/*-webkit-transition-duration: 0.4s;
-  	transition-duration: 0.4s;*/
+
+	font-size: 15px;
+
+	cursor: pointer;
+	
+	box-shadow: 0 9px #383838;
 	
 	text: {
+		shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.14);
 		align: center;
 		decoration: none;
 	}
 
-	&:hover {
-		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+	&:active {
+		box-shadow: 0 5px #383838;
+		transform: translateY(4px);
 	}
 }
 
+input[type=text], input[type=password], input[type=number], select {
+	padding: 15px;
+	background-color: $ui-element;
+	border: black;
+	border-radius: 3px;
+	color: white;
+}
+
 .row {
 	margin: 30px;
 }
@@ -136,7 +162,7 @@ h1.title {
 
 	h1 {
 		text-align: center;
-		color: white;
+		color: $text-colour;
 		text-shadow: 1px 1px 2px #4f4f4f;
 	}
 
@@ -156,40 +182,54 @@ h1.title {
 
 h1.sectiontitle {
 	text-align:center;
-	color: white;
+	color: $text-colour;
 	font-family: 'Megrim', sans-serif;
 }
 
 ul.navbar {
 	list-style-type: none;
-	border-radius: 5px 5px;
-	/*box-shadow: 3px 3px 1px grey;*/
+	background-color: $light-ui;
 	margin: 10px;
+	border-radius: 5px;
+	/*box-shadow: 3px 3px 1px grey;*/
 	padding: 0;
 	overflow: hidden;
-	background-color: $ui-colour;
 	
 
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-webkit-user-drag: none;
+	-khtml-user-drag: none;
+	-moz-user-drag: none;
+	-o-user-drag: none;
+
+	box-shadow: 0 9px 12px 0 black, 0 9px 12px 0 black;
+
 	li {
 		float: left;
 		position: -webkit-sticky;
 		position: sticky;
 		top: 0;
 
-
 		a {
 			display: block;
-			color: white;
+			color: $text-colour;
 			text-align: center;
 			padding: 14px 16px;
+			// padding: 10px;
+			margin: 2px;
+			border-radius: 5px;
+
 			text-decoration: none;
-			text-shadow: 1px 1px 2px black;
+			text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
 			-webkit-transition: background-color 0.4s;
   			transition: background-color 0.4s;
 		
 
 			&:hover {
-				background-color: #080808;
+				background-color: $ui-shadow;
 			}
 		}
 	}
@@ -197,6 +237,86 @@ ul.navbar {
 	li.right {float: right;}
 }
 
+.sidebar {
+	
+	list-style-type: none;
+	background-color: $light-ui;
+	margin-left: 10px;
+	margin-right: 10px;
+	border-radius: 5px;
+	// padding-top: 10px;
+	// padding-bottom: 10px;
+
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-webkit-user-drag: none;
+	-khtml-user-drag: none;
+	-moz-user-drag: none;
+	-o-user-drag: none;
+
+	box-shadow: 0 9px 12px 0 black, 0 9px 12px 0 black;
+
+	tr {
+		top: 0;
+		cursor: pointer;
+
+		td {
+			
+			// height: 50px;
+			text-align: center;
+			vertical-align: center;
+
+			border-radius: 5px;
+
+			a {
+				color: $text-colour;
+
+				height: 100%;
+				width: 100%;
+				display: inline-block;
+				vertical-align: center;
+				padding: 10px;
+				
+				text-decoration: none;
+				text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
+				-webkit-transition: background-color 0.4s;
+				transition: background-color 0.4s;	
+			}	
+
+			&:hover {
+				background-color: $ui-shadow;
+			}
+		}
+	}
+
+}
+
+.sidebar-selected {
+	background-color: black; 
+}
+
+.app-table {
+	width: 100%;
+	margin: auto;
+	td {
+		padding: 5px;
+	}
+}
+
+.max-width {
+	max-width: 800px;
+}
+
+.text-no-select {
+	cursor: default;
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
 footer {
 	p {
 		text-align: right;
@@ -213,7 +333,49 @@ footer {
 	}
 }
 
-@media only screen and (max-width: 760px) {
+#snackbar {
+	visibility: hidden;
+	min-width: 250px;
+	margin-left: -125px;
+	background-color: white;
+	color: black;
+	text-align: center;
+	border-radius: 2px;
+	padding: 16px;
+	position: fixed;
+	z-index: 1;
+	left: 50%;
+	bottom: 30px;
+	font-size: 17px;
+  }
+  
+#snackbar.show {
+	visibility: visible;
+	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+	animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+from {bottom: 0; opacity: 0;} 
+to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+from {bottom: 0; opacity: 0;}
+to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+from {bottom: 30px; opacity: 1;} 
+to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+from {bottom: 30px; opacity: 1;}
+to {bottom: 0; opacity: 0;}
+}
+
+@media only screen and (max-width: 950px) {
   ul.navbar li.right,
   ul.navbar li {float: none;}
 }

watchsass

@@ -0,0 +1 @@
+sass --style=compressed --watch src/scss/style.scss build/style.css

webpack.common.js

@@ -4,7 +4,8 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
 	entry: {
-	    dev: './src/js/dev/dev.js'
+      dev: './src/js/dev/dev.js',
+      eng: './src/js/eng/eng.js'
 	    },
 	module: {
     rules: [