refactored css

location_app/app/functions/auth/base.py

@@ -74,13 +74,14 @@ def check_month(month, day):
     """
     Takes in month and day and checks if the day
     is valid for that month
+    Doesn't take in account leap years
     """       
     if month in [1, 3, 5, 7, 8, 10, 12]:
         if (day > 0 and day <= 31):
             return True
         else:
             return False
-    elif month == 2:
+    elif month == 2:                     # February
         if (day > 0 and day <= 28):                 
             return True
         else:

location_app/app/functions/auth/login.py

@@ -16,7 +16,9 @@ def login(data):
 
 def check_login_data(data):
     """
-    Checks the validity of inputed data 
+    Checks the validity of inputed data, if 
+    the username is admin then other checks 
+    aren't made
     """
     _status = check_empty(data)
     if _status == "ok":

location_app/app/mqtt/__init__.py

@@ -11,7 +11,7 @@ def init_app(app):
 
     @mqtt.on_connect()
     def handle_connect(client, userdata, flags, rc):
-        mqtt.subscribe('owntracks/4009user/#')  #owntracks subscribing to mqtt
+        mqtt.subscribe('owntracks/4009user/#')
 
     @mqtt.on_message()
     def handle_mqtt_message(client, userdata, msg):

location_app/app/static/css/base.css

@@ -1,13 +1,10 @@
 * {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 body {
-/*     background-image: url('../img/earth.jpg'); */
     background-color: #3EA4E8;
-/*     background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover; */
     font-family: Gill Sans, sans-serif;
     font-variant: small-caps;
     display: grid;
@@ -16,5 +13,17 @@ body {
     grid-template-areas:'. container .';
 }
 .shadow {
-    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
+    text-shadow: 
+        0 1px 0 #ccc, 
+        0 2px 0 #c9c9c9,
+        0 3px 0 #bbb, 
+        0 4px 0 #b9b9b9, 
+        0 5px 0 #aaa,
+        0 6px 1px rgba(0, 0, 0, .1),
+        0 0 5px rgba(0, 0, 0, .1), 
+        0 1px 3px rgba(0, 0, 0, .3),
+        0 3px 5px rgba(0, 0, 0, .2), 
+        0 5px 10px rgba(0, 0, 0, .25),
+        0 10px 10px rgba(0, 0, 0, .2),
+        0 20px 20px rgba(0, 0, 0, .15);
 }

location_app/app/static/css/buttons.css

@@ -1,7 +1,3 @@
-* {
-	box-sizing: border-box;
-}
-
 a[class*="btn"] {text-decoration: none;}
 input[class*="btn"], 
 button[class*="btn"] {
@@ -24,11 +20,11 @@ button[class*="btn"] {
 	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
 }
 
-.btn-3d.red:hover    {background-color: #e74c3c;}
+.btn-3d.red:hover    {background-color: #DD4939;}
 .btn-3d.blue:hover   {background-color: #699DD1;}
 .btn-3d.green:hover  {background-color: #80C49D;}
 .btn-3d.purple:hover {background-color: #D19ECB;}
-.btn-3d.yellow:hover {background-color: #F0D264;}
+.btn-3d.yellow:hover {background-color: #E9CB61;}
 .btn-3d.cyan:hover   {background-color: #82D1E3;}
 
 .btn-3d:active {

location_app/app/static/css/login/create.css

@@ -69,30 +69,18 @@
         'c_button';
 }
 .username {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: user;
 }
 .realname {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: name;
 }
 .dob {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: dob;
 }
 .dob select {
     font-size: 1.5vw;
 }
 .colorr {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: colorr;
 }
 .colorr input {
@@ -103,22 +91,13 @@
     font-size: 1.5vw;
 }
 .weight {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: weight;
 }
 .password {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: pass;
 }
 .r_password {
-    display: grid;
     padding-top: 1vw;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: r_pass;
 }
 .create_button_area {

location_app/app/static/css/login/forgot.css

@@ -49,32 +49,26 @@
 }
 .form_inside {
     display: grid;
-    grid-template-columns: 2fr 2fr;
+    grid-template-columns: 1fr;
     grid-template-rows: 1vw auto 1vw auto 1vw auto auto auto;
     grid-template-areas:
-        '. .'
-        'user user'
-        '. .'
-        'dob dob'
-        '. .'
-        'pass pass'
-        'r_pass r_pass'
-        'forgot_button forgot_button';
+        '.'
+        'user'
+        '.'
+        'dob'
+        '.'
+        'pass'
+        'r_pass'
+        'forgot_button';
 }
 .username {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: user;
 }
 .username_text {
     margin-bottom: 1px;
     font-size: 2vw;
 }
 .dob {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: dob;
 }
 .dob select {
@@ -85,20 +79,14 @@
     font-size: 2vw;
 }
 .password {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: pass;
 }
 .password_text {
     margin-bottom: 1px;
     font-size: 2vw;
 }
 .r_password {
-    display: grid;
     padding-top: 1vw;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: r_pass;
 }
 .forgot_button_area {

location_app/app/static/css/login/index.css

@@ -51,16 +51,16 @@
     display: grid;
     justify-content: start;
     align-content: center;
-    grid-template-columns: 2fr 2fr;
+    grid-template-columns: 1fr;
     grid-template-rows: 1vw auto 1vw auto 1vw auto auto;
     grid-template-areas:
-        '. .'
-        'user user'
-        '. .'
-        'pass pass'
-        '. .'
-        'btns btns'
-        'c_acc c_acc';
+        '.'
+        'user'
+        '.'
+        'pass'
+        '.'
+        'btns'
+        'c_acc';
 }
 .btns {
     display: grid;
@@ -70,19 +70,13 @@
         'f_pass f_pass . login_button';
 }
 .username {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: user;
 }
 .username_text {
     margin-bottom: 1px;
     font-size: 2vw;
 }
 .password {
-    display: grid;
-    justify-content: center stretch;
-    align-content: center;
     grid-area: pass;
 }
 .password_text {

location_app/app/static/css/profile/index.css

@@ -143,11 +143,4 @@
 }
 .tdist1 {
     grid-area: tdist1;
-}
-.ccolor {
-    margin: 0 15px 0 0;
-    width: 2vw;
-    height: 2vw;
-    display: inline-block;
-    border-radius: 100%;
 }

location_app/app/static/js/map/index.js

@@ -16,15 +16,36 @@ var fScale = 0.6;
 var hScale = 1;
 var lineW = 5;
 
+// TIMERS FOR MAP OBJECTS
+var timers = {};
+var l_timers = {};
+
 // COLORS FOR MAP OBJECTS
-var normalColor = "#ff0000";
+var normalColor;
+var highLine;
 var highStartMarker = "#ffffff";
 var highEndMarker = "#000000";
-var highLine = "#000000";
 
-// TIMERS FOR MAP OBJECTS
-var timers = {};
-var l_timers = {};
+/** 
+ * Returns a hex value contrast color
+ */
+function invert_color(clr) {
+    // invert color components
+    console.log(clr)
+    var r = (255 - parseInt(clr.slice(1, 3), 16)).toString(16);
+    var g = (255 - parseInt(clr.slice(3, 5), 16)).toString(16);
+    var b = (255 - parseInt(clr.slice(5, 7), 16)).toString(16);
+
+    return "#" + add_zero(r) + add_zero(g) + add_zero(b);
+}
+
+/** 
+ * Fills the hex value so that it's 2 digits long
+ */
+function add_zero(hex) {
+    var _hex = "0" + hex;
+    return _hex.slice(-2);
+}
 
 // MAP
 
@@ -36,7 +57,7 @@ function initialize_map(_locations, _weight, _color) {
     locations = _locations;
     weight = _weight;
     normalColor = _color;
-    set_other_colors();
+    highLine = invert_color(_color);
 
     map = new ol.Map({
         target: "map",
@@ -51,12 +72,7 @@ function initialize_map(_locations, _weight, _color) {
     get_map_all_locations();
 }
 
-/** 
- * Sets other colors depending on the favourite color
- */
-function set_other_colors() {
-    console.log(normalColor);
-}
+
 
 /** 
  * Deletes everything on the map
@@ -181,18 +197,17 @@ function get_map_for_date(date) {
             'last_distance': format_distance(last_distance),
             'last_calories': format_calories(last_calories)
         }
+        var marker = draw_marker(location[0], location[1], marker_properties);
         if(i == 0 && this_date_loc.length > 1) {
-            var marker = draw_marker(location[0], location[1], marker_properties);
             marker.set('special', "start");
-            marker.setZIndex(1000);
+            marker.setZIndex(100);
             marker.setStyle(get_marker_style(normalColor, startScale, startMarker));
         } else if(i == this_date_loc.length - 1 && this_date_loc.length > 1) {
-            var marker = draw_marker(location[0], location[1], marker_properties);
             marker.set('special', "end");
-            marker.setZIndex(1000);
+            marker.setZIndex(100);
             marker.setStyle(get_marker_style(normalColor, endScale, endMarker, [0.37, 0.97]));
         } else {
-            draw_marker(location[0], location[1], marker_properties);
+            marker.setZIndex(3);
         }
     }
     center_map();
@@ -274,6 +289,7 @@ function draw_line(pos1, pos2, _properties) {
         style: get_line_style(normalColor)
     });
     line.setProperties(_properties);
+    line.setZIndex(2);
     map.addLayer(line);
 }
 
@@ -373,9 +389,11 @@ function get_line_data(layer) {
  */
 function highlight_line(line) {
     line.setStyle(get_line_style(highLine));
+    line.setZIndex(10);
     clearTimeout(l_timers[line.get('number')]);
     l_timers[line.get('number')] = setTimeout(function() {
         line.setStyle(get_line_style(normalColor));
+        line.setZIndex(2);
     }, 4000);
 }
 
@@ -385,10 +403,11 @@ function highlight_line(line) {
  */
 function highlight_marker(marker, color) {
     marker.setStyle(get_marker_style(color, hScale, normalMarker));
-    marker.setZIndex(100);
+    marker.setZIndex(11);
     clearTimeout(timers[marker.get('number')]);
     timers[marker.get('number')] = setTimeout(function() {
         marker.setStyle(get_marker_style(normalColor, fScale, normalMarker));
+        marker.setZIndex(3);
     }, 4000);
 }