diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..aee47c1 Binary files /dev/null and b/.DS_Store differ diff --git a/OddJobb/.DS_Store b/OddJobb/.DS_Store new file mode 100644 index 0000000..df4d001 Binary files /dev/null and b/OddJobb/.DS_Store differ diff --git a/OddJobb/platforms/android/assets/www/about.html b/OddJobb/platforms/android/assets/www/about.html index 4649710..668da8b 100644 --- a/OddJobb/platforms/android/assets/www/about.html +++ b/OddJobb/platforms/android/assets/www/about.html @@ -19,8 +19,18 @@
-

Here is About page!

-

Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.

+

Hack4Good - OddJobbs!

+

+ OddJobbs was inspired by a true story. One day after a big snowstorm, I received a text message from my mother saying there was an elderly woman who wasn't able to shovel her driveway. She lived on a street with a ton of kids, but wasn't able to connect with one of them to complete the task. +

+
+

+ Soon after, the idea of a Hackathon was proposed to a group of us at 360insights. This got me thinking and OddJobbs was later planted to connect those +

+
+

+ Anyone can use OddJobbs, if you're like my neighbour and just need a hand or if you travel frequently and want to support your local neighbourhood - OddJobbs was made for you. +

diff --git a/OddJobb/platforms/android/assets/www/css/styles.css b/OddJobb/platforms/android/assets/www/css/styles.css index 631f0de..cd8df99 100644 --- a/OddJobb/platforms/android/assets/www/css/styles.css +++ b/OddJobb/platforms/android/assets/www/css/styles.css @@ -9,7 +9,146 @@ See https://github.com/apache/cordova-plugin-statusbar */ - +#map { height: 45%; width: 100%;} .statusbar-overlay { background: #000000; -} \ No newline at end of file +} + +@import url(https://fonts.googleapis.com/css?family=Roboto:300); + +body{ + background-color: #1cbb9b; +} +.login-box{ + position:relative; + margin: 10px auto; + width: 500px; + height: 380px; + background-color: #fff; + padding: 10px; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +} +.lb-header{ + position:relative; + color: #00415d; + margin: 5px 5px 10px 5px; + padding-bottom:10px; + border-bottom: 1px solid #eee; + text-align:center; + height:28px; +} +.lb-header a{ + margin: 0 25px; + padding: 0 20px; + text-decoration: none; + color: #666; + font-weight: bold; + font-size: 15px; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.lb-header .active{ + color: #029f5b; + font-size: 18px; +} +.social-login{ + position:relative; + float: left; + width: 100%; + height:auto; + padding: 10px 0 15px 0; + border-bottom: 1px solid #eee; +} +.social-login a{ + position:relative; + float: left; + width:calc(40% - 8px); + text-decoration: none; + color: #fff; + border: 1px solid rgba(0,0,0,0.05); + padding: 12px; + border-radius: 2px; + font-size: 12px; + text-transform: uppercase; + margin: 0 3%; + text-align:center; +} +.social-login a i{ + position: relative; + float: left; + width: 20px; + top: 2px; +} +.social-login a:first-child{ + background-color: #49639F; +} +.social-login a:last-child{ + background-color: #DF4A32; +} +.email-login,.email-signup{ + position:relative; + float: left; + width: 100%; + height:auto; + margin-top: 20px; + text-align:center; +} +.u-form-group{ + width:100%; + margin-bottom: 10px; +} +.u-form-group input[type="email"], +.u-form-group input[type="password"]{ + width: calc(50% - 22px); + height:45px; + outline: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 2px; + color: #333; + font-size:0.8rem; + -webkit-transition:all 0.1s linear; + -moz-transition:all 0.1s linear; + transition:all 0.1s linear; +} +.u-form-group input:focus{ + border-color: #358efb; +} +.u-form-group button{ + width:50%; + background-color: #1CB94E; + border: none; + outline: none; + color: #fff; + font-size: 14px; + font-weight: normal; + padding: 14px 0; + border-radius: 2px; + text-transform: uppercase; +} +.forgot-password{ + width:50%; + text-align: left; + text-decoration: underline; + color: #888; + font-size: 0.75rem; +} + +.topmar{ + margin: 0px 0; + font-size: 17px; + +} + +.abs{ + position: absolute; +} + +div.panel { + background-image: url('../img/white.jpg'); +} + diff --git a/OddJobb/platforms/android/assets/www/index.html b/OddJobb/platforms/android/assets/www/index.html index 9fb96c5..59e4561 100644 --- a/OddJobb/platforms/android/assets/www/index.html +++ b/OddJobb/platforms/android/assets/www/index.html @@ -1,5 +1,6 @@ + - @@ -21,15 +21,16 @@ - My App + OddJobbs - + + @@ -43,25 +44,27 @@
Navigation
-
- -
+
+ +
@@ -73,7 +76,7 @@
-
Awesome App
+
Odd Jobb
- -
+
-

Page content goes here

- - About app +
+
+
    +
  • +
    +
    Username
    +
    + +
    +
    +
    • +
  • +
    +
    Password
    +
    + +
    +
    +
    • +
+
+
+ +
+
+
+

Don't have an account? Register Now +

- -
-
- - Link 1 - Link 2 -
-
+ + + + + + + + + + + + + + + + diff --git a/OddJobb/platforms/android/assets/www/js/messages.js b/OddJobb/platforms/android/assets/www/js/messages.js index ff7c489..1bb2f0e 100644 --- a/OddJobb/platforms/android/assets/www/js/messages.js +++ b/OddJobb/platforms/android/assets/www/js/messages.js @@ -1,26 +1,99 @@ // JavaScript source code //Js file that deal with the messages +var prevMsgs = {}; -function messagesMain() { - var msgHandler = new Framework7(); - var $$ = Dom7; - var messages = msgHandler.messages('.messages'); - var msgBar = msgHandler.messagebar('.messagebar'); - var currentMsg = ""; +var msgTemplate = '{{#if day}}' + + '
{{day}} {{#if time}}, {{time}}{{/if}}
' + + '{{/if}}' + + '
' + + '{{#if name}}
{{name}}
{{/if}}' + + '
{{text}}{{#if date}}
{{date}}
{{/if}}
' + + '{{#if avatar}}
{{/if}}' + + '{{#if label}}
{{label}}
{{/if}}' + + '
'; - $$('.messagebar').on('click', function () { - currentMsg = msgBar.value().trim(); - msgBar.clear(); - messages.add +var error = ""; - messages.addMessage({ - text: currentMsg, - name: "Mateo" +function sendMessage(personName, email) { + var msgHandler = new Framework7(); + var $$ = Dom7; + var messages = msgHandler.messages('.messages', { messageTemplate: msgTemplate }); + var msgBar = msgHandler.messagebar('.messagebar'); + var currentMsg = ""; + + //Really only applicable to desktop version + $$('.messagebar').on('keypress', function (e) { + if (e.keyCode === 13) { + sendMsg(); + } + }) + $$('.messagebar').on('click', function () { + sendMsg(); + }) + + var sendMsg = function () { + var msgId = newId(1000); + currentMsg = msgBar.value().trim(); + msgBar.clear(); + messages.addMessage({ + text: currentMsg, + name: personName, + id: msgId + }, "append", true); + + $.post("http://oddjobbackend.herokuapp.com/newMessage?email=" + email + "&name=" + personName + "&message="+ currentMsg + "&personSent=(PERSONSENT)&id="+ msgId, function(data){ + console.log("Message submitted " + data); + }); + } + printErr(error); +}; + +//Load messages of a particular person. +var getMessages = function (personEmail, callback) { + var msgHandler = new Framework7(); + var $$ = Dom7; + + var allMessages = msgHandler.messages('.messages', { messageTemplate: msgTemplate }); + var msgBar = msgHandler.messagebar('.messagebar'); + var pMsgs = []; + + $.get("http://oddjobbackend.herokuapp.com/messages", function(data){ + for(var i = 0; i < data.length; i++){ + var currentM = data[i]; + //Get all messages + if(personEmail === undefined){ + pMsgs.push(currentM); + } + else if(currentM.email === personEmail && currentM.message !== "()"){ + pMsgs.push(currentM); + //console.log(currentM); + allMessages.addMessage({ + text: currentM.message, + name: currentM.name, + id: currentM.id }, "append", true); + console.log("Message Added by: " + personEmail); + + } + } + if(callback){ + callback(pMsgs); + return pMsgs; + } + + }); + return pMsgs; + +} - }) +var newId = function(range){ + var res = Math.floor(Math.random() * range); + return res; +} -}; \ No newline at end of file +var printErr = function(err){ + console.log(err); +} diff --git a/OddJobb/platforms/android/assets/www/js/my-app.js b/OddJobb/platforms/android/assets/www/js/my-app.js index 04a696c..237cd9f 100644 --- a/OddJobb/platforms/android/assets/www/js/my-app.js +++ b/OddJobb/platforms/android/assets/www/js/my-app.js @@ -1,48 +1,109 @@ // Initialize app -var myApp = new Framework7(); +var myApp = new Framework7({ + swipePanel: 'left' +}); // If we need to use custom DOM library, let's save it to $$ variable: var $$ = Dom7; // Add view var mainView = myApp.addView('.view-main', { - // Because we want to use dynamic navbar, we need to enable it for this view: dynamicNavbar: true }); // Handle Cordova Device Ready Event -$$(document).on('deviceready', function() { +$$(document).on('deviceready', function () { + window.user = false; + window.login = false; + document.getElementById('createPost').style.display = 'none'; + document.getElementById('viewMessages').style.display = 'none'; + document.getElementById('profile').style.display = 'none'; + document.getElementById('logout').style.display = 'none'; + document.getElementById('myPost').style.display = 'none'; console.log("Device is ready!"); -}); + $.get('https://oddjobbackend.herokuapp.com/users', function(data){ + users = data; + console.log(users); + window.MyLib = users; + + }); + $$('#login-box-link').on('click', function(e){ + var username = document.getElementById('username').value; + var password = document.getElementById('pass').value; + var users = window.MyLib; + console.log('users',users); + if(username === '') { + myApp.alert('Oops! You left your username blank', 'Blank Username'); -// Now we need to run the code that will be executed only for About page. + } -// Option 1. Using page callback for page (for "about" page in this case) (recommended way): -myApp.onPageInit('about', function (page) { - // Do something here for "about" page + else if(password === '') { + myApp.alert('Oops! You left your password blank', "Blank Password"); -}) -myApp.onPageInit('login', function(page){ + } + else if(isPasswordCorrect(username, password, users)) { + //set global variable to indicate correct login + myApp.alert('Welcome ' + username + '! You are now logged in.', "Welcome"); + window.user = username; + window.login = true; + document.getElementById('createPost').style.display = 'block'; + document.getElementById('viewMessages').style.display = 'block'; + document.getElementById('profile').style.display = 'block'; + document.getElementById('logout').style.display = 'block'; + document.getElementById('myPost').style.display = 'block'; + mainView.router.loadPage({url:'postList.html', ignoreCache:true, reload:true }); + } -}) + else { -// Option 2. Using one 'pageInit' event handler for all pages: -$$(document).on('pageInit', function (e) { - // Get page data from event data - var page = e.detail.page; + myApp.alert('Incorrect password!', 'Error!'); + + } + + }); +}); + + +function isPasswordCorrect(username, password, users) { + for(var i=0; i < users.length; i++) { + if(users[i].email === username && users[i].password === password) { + return true; - if (page.name === 'about') { - // Following code will be executed for page with data-page attribute equal to "about" - myApp.alert('Here comes About page'); } -}) -// Option 2. Using live 'pageInit' event handlers for each page -$$(document).on('pageInit', '.page[data-page="about"]', function (e) { - // Following code will be executed for page with data-page attribute equal to "about" - myApp.alert('Here comes About page'); -}) + else if(users[i].email === username) { + + return false; + + } + + } + +} + +function logout(e) { + + if(window.login === true) { + myApp.alert('Goodbye '+ window.user + ' You have been logged out!', "Goodbye!"); + window.user = false; + window.login = false; + document.getElementById('createPost').style.display = 'none'; + document.getElementById('viewMessages').style.display = 'none'; + document.getElementById('profile').style.display = 'none'; + document.getElementById('logout').style.display = 'none'; + mainView.router.loadPage({url:'index.html', ignoreCache:true, reload:true }); + } + + else { + myApp.alert('You can\'t log out if you\'re not logged in'); + + + } + + + +} diff --git a/OddJobb/platforms/android/assets/www/lib/framework7/css/framework7.ios.css b/OddJobb/platforms/android/assets/www/lib/framework7/css/framework7.ios.css index c520289..6a67759 100755 --- a/OddJobb/platforms/android/assets/www/lib/framework7/css/framework7.ios.css +++ b/OddJobb/platforms/android/assets/www/lib/framework7/css/framework7.ios.css @@ -1,17 +1,17 @@ /** * Framework7 1.4.0 * Full Featured Mobile HTML Framework For Building iOS & Android Apps - * + * * iOS Theme * * http://www.idangero.us/framework7 - * + * * Copyright 2015, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ - * + * * Licensed under MIT - * + * * Released on: December 7, 2015 */ html, @@ -4279,7 +4279,7 @@ html.pixel-ratio-3 .picker-modal.smart-select-picker .toolbar:after { .panel { z-index: 1000; display: none; - background: #111; + background: purple; box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; @@ -4296,6 +4296,12 @@ html.pixel-ratio-3 .picker-modal.smart-select-picker .toolbar:after { z-index: 6000; left: -260px; } + +.page-content { + background-image: url("../../../img/purple.png"); + + +} .panel.panel-left.panel-reveal { left: 0; } diff --git a/OddJobb/platforms/android/assets/www/login.html b/OddJobb/platforms/android/assets/www/login.html index e69de29..1fe74e0 100644 --- a/OddJobb/platforms/android/assets/www/login.html +++ b/OddJobb/platforms/android/assets/www/login.html @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + OddJobbs - Register + + + + + + + + + + + +
+ + +
+ +
+
+
Navigation
+
+ +
+
+
+ + +
+ +
+ +
+
+ +
Odd Jobb
+
+ + +
+
+
+ +
+ +
+ +
+
+ + +
+
+
+
+ +
+
+ + Link 1 + Link 2 +
+
+
+
+ + + + + + + + + diff --git a/OddJobb/platforms/android/assets/www/messagebar.html b/OddJobb/platforms/android/assets/www/messagebar.html index 1a06591..9b895f0 100644 --- a/OddJobb/platforms/android/assets/www/messagebar.html +++ b/OddJobb/platforms/android/assets/www/messagebar.html @@ -1,5 +1,9 @@ -
-
- Send -
-
\ No newline at end of file + + + + +
+
+ Send +
+
\ No newline at end of file diff --git a/OddJobb/platforms/android/assets/www/messages.html b/OddJobb/platforms/android/assets/www/messages.html index 066c83a..76815be 100644 --- a/OddJobb/platforms/android/assets/www/messages.html +++ b/OddJobb/platforms/android/assets/www/messages.html @@ -1,36 +1,30 @@ -
-
-
-
Sunday, Feb 9 12:58
-
-
Hello
+ + + +
+
+
+ + + Back +
-
-
How are you?
-
-
-
Kate
-
I am fine, thanks
-
-
-
Sunday, Feb 3 11:58
-
-
Nice photo?
-
-
-
-
Delivered
-
-
-
Kate
-
Wow, awesome!
-
+ +
Messages
+
+
-
-
- Send +
+ +
+
+
+
+ +
-
+
-
\ No newline at end of file + + \ No newline at end of file diff --git a/OddJobb/platforms/browser/www/about.html b/OddJobb/platforms/browser/www/about.html index 4649710..668da8b 100644 --- a/OddJobb/platforms/browser/www/about.html +++ b/OddJobb/platforms/browser/www/about.html @@ -19,8 +19,18 @@
-

Here is About page!

-

Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.

+

Hack4Good - OddJobbs!

+

+ OddJobbs was inspired by a true story. One day after a big snowstorm, I received a text message from my mother saying there was an elderly woman who wasn't able to shovel her driveway. She lived on a street with a ton of kids, but wasn't able to connect with one of them to complete the task. +

+
+

+ Soon after, the idea of a Hackathon was proposed to a group of us at 360insights. This got me thinking and OddJobbs was later planted to connect those +

+
+

+ Anyone can use OddJobbs, if you're like my neighbour and just need a hand or if you travel frequently and want to support your local neighbourhood - OddJobbs was made for you. +

diff --git a/OddJobb/platforms/browser/www/css/styles.css b/OddJobb/platforms/browser/www/css/styles.css index 631f0de..cd8df99 100644 --- a/OddJobb/platforms/browser/www/css/styles.css +++ b/OddJobb/platforms/browser/www/css/styles.css @@ -9,7 +9,146 @@ See https://github.com/apache/cordova-plugin-statusbar */ - +#map { height: 45%; width: 100%;} .statusbar-overlay { background: #000000; -} \ No newline at end of file +} + +@import url(https://fonts.googleapis.com/css?family=Roboto:300); + +body{ + background-color: #1cbb9b; +} +.login-box{ + position:relative; + margin: 10px auto; + width: 500px; + height: 380px; + background-color: #fff; + padding: 10px; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +} +.lb-header{ + position:relative; + color: #00415d; + margin: 5px 5px 10px 5px; + padding-bottom:10px; + border-bottom: 1px solid #eee; + text-align:center; + height:28px; +} +.lb-header a{ + margin: 0 25px; + padding: 0 20px; + text-decoration: none; + color: #666; + font-weight: bold; + font-size: 15px; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.lb-header .active{ + color: #029f5b; + font-size: 18px; +} +.social-login{ + position:relative; + float: left; + width: 100%; + height:auto; + padding: 10px 0 15px 0; + border-bottom: 1px solid #eee; +} +.social-login a{ + position:relative; + float: left; + width:calc(40% - 8px); + text-decoration: none; + color: #fff; + border: 1px solid rgba(0,0,0,0.05); + padding: 12px; + border-radius: 2px; + font-size: 12px; + text-transform: uppercase; + margin: 0 3%; + text-align:center; +} +.social-login a i{ + position: relative; + float: left; + width: 20px; + top: 2px; +} +.social-login a:first-child{ + background-color: #49639F; +} +.social-login a:last-child{ + background-color: #DF4A32; +} +.email-login,.email-signup{ + position:relative; + float: left; + width: 100%; + height:auto; + margin-top: 20px; + text-align:center; +} +.u-form-group{ + width:100%; + margin-bottom: 10px; +} +.u-form-group input[type="email"], +.u-form-group input[type="password"]{ + width: calc(50% - 22px); + height:45px; + outline: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 2px; + color: #333; + font-size:0.8rem; + -webkit-transition:all 0.1s linear; + -moz-transition:all 0.1s linear; + transition:all 0.1s linear; +} +.u-form-group input:focus{ + border-color: #358efb; +} +.u-form-group button{ + width:50%; + background-color: #1CB94E; + border: none; + outline: none; + color: #fff; + font-size: 14px; + font-weight: normal; + padding: 14px 0; + border-radius: 2px; + text-transform: uppercase; +} +.forgot-password{ + width:50%; + text-align: left; + text-decoration: underline; + color: #888; + font-size: 0.75rem; +} + +.topmar{ + margin: 0px 0; + font-size: 17px; + +} + +.abs{ + position: absolute; +} + +div.panel { + background-image: url('../img/white.jpg'); +} + diff --git a/OddJobb/platforms/browser/www/index.html b/OddJobb/platforms/browser/www/index.html index 9fb96c5..59e4561 100644 --- a/OddJobb/platforms/browser/www/index.html +++ b/OddJobb/platforms/browser/www/index.html @@ -1,5 +1,6 @@ + - @@ -21,15 +21,16 @@ - My App + OddJobbs - + + @@ -43,25 +44,27 @@
Navigation
-
- -
+
+ +
@@ -73,7 +76,7 @@
-
Awesome App
+
Odd Jobb
- -
+
-

Page content goes here

- - About app +
+
+
    +
  • +
    +
    Username
    +
    + +
    +
    +
    • +
  • +
    +
    Password
    +
    + +
    +
    +
    • +
+
+
+ +
+
+
+

Don't have an account? Register Now +

- -
-
- - Link 1 - Link 2 -
-
+ + + + + + + + + + + + + + + + diff --git a/OddJobb/platforms/browser/www/js/my-app.js b/OddJobb/platforms/browser/www/js/my-app.js index 04a696c..237cd9f 100644 --- a/OddJobb/platforms/browser/www/js/my-app.js +++ b/OddJobb/platforms/browser/www/js/my-app.js @@ -1,48 +1,109 @@ // Initialize app -var myApp = new Framework7(); +var myApp = new Framework7({ + swipePanel: 'left' +}); // If we need to use custom DOM library, let's save it to $$ variable: var $$ = Dom7; // Add view var mainView = myApp.addView('.view-main', { - // Because we want to use dynamic navbar, we need to enable it for this view: dynamicNavbar: true }); // Handle Cordova Device Ready Event -$$(document).on('deviceready', function() { +$$(document).on('deviceready', function () { + window.user = false; + window.login = false; + document.getElementById('createPost').style.display = 'none'; + document.getElementById('viewMessages').style.display = 'none'; + document.getElementById('profile').style.display = 'none'; + document.getElementById('logout').style.display = 'none'; + document.getElementById('myPost').style.display = 'none'; console.log("Device is ready!"); -}); + $.get('https://oddjobbackend.herokuapp.com/users', function(data){ + users = data; + console.log(users); + window.MyLib = users; + + }); + $$('#login-box-link').on('click', function(e){ + var username = document.getElementById('username').value; + var password = document.getElementById('pass').value; + var users = window.MyLib; + console.log('users',users); + if(username === '') { + myApp.alert('Oops! You left your username blank', 'Blank Username'); -// Now we need to run the code that will be executed only for About page. + } -// Option 1. Using page callback for page (for "about" page in this case) (recommended way): -myApp.onPageInit('about', function (page) { - // Do something here for "about" page + else if(password === '') { + myApp.alert('Oops! You left your password blank', "Blank Password"); -}) -myApp.onPageInit('login', function(page){ + } + else if(isPasswordCorrect(username, password, users)) { + //set global variable to indicate correct login + myApp.alert('Welcome ' + username + '! You are now logged in.', "Welcome"); + window.user = username; + window.login = true; + document.getElementById('createPost').style.display = 'block'; + document.getElementById('viewMessages').style.display = 'block'; + document.getElementById('profile').style.display = 'block'; + document.getElementById('logout').style.display = 'block'; + document.getElementById('myPost').style.display = 'block'; + mainView.router.loadPage({url:'postList.html', ignoreCache:true, reload:true }); + } -}) + else { -// Option 2. Using one 'pageInit' event handler for all pages: -$$(document).on('pageInit', function (e) { - // Get page data from event data - var page = e.detail.page; + myApp.alert('Incorrect password!', 'Error!'); + + } + + }); +}); + + +function isPasswordCorrect(username, password, users) { + for(var i=0; i < users.length; i++) { + if(users[i].email === username && users[i].password === password) { + return true; - if (page.name === 'about') { - // Following code will be executed for page with data-page attribute equal to "about" - myApp.alert('Here comes About page'); } -}) -// Option 2. Using live 'pageInit' event handlers for each page -$$(document).on('pageInit', '.page[data-page="about"]', function (e) { - // Following code will be executed for page with data-page attribute equal to "about" - myApp.alert('Here comes About page'); -}) + else if(users[i].email === username) { + + return false; + + } + + } + +} + +function logout(e) { + + if(window.login === true) { + myApp.alert('Goodbye '+ window.user + ' You have been logged out!', "Goodbye!"); + window.user = false; + window.login = false; + document.getElementById('createPost').style.display = 'none'; + document.getElementById('viewMessages').style.display = 'none'; + document.getElementById('profile').style.display = 'none'; + document.getElementById('logout').style.display = 'none'; + mainView.router.loadPage({url:'index.html', ignoreCache:true, reload:true }); + } + + else { + myApp.alert('You can\'t log out if you\'re not logged in'); + + + } + + + +} diff --git a/OddJobb/platforms/browser/www/lib/framework7/css/framework7.ios.css b/OddJobb/platforms/browser/www/lib/framework7/css/framework7.ios.css index c520289..6a67759 100755 --- a/OddJobb/platforms/browser/www/lib/framework7/css/framework7.ios.css +++ b/OddJobb/platforms/browser/www/lib/framework7/css/framework7.ios.css @@ -1,17 +1,17 @@ /** * Framework7 1.4.0 * Full Featured Mobile HTML Framework For Building iOS & Android Apps - * + * * iOS Theme * * http://www.idangero.us/framework7 - * + * * Copyright 2015, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ - * + * * Licensed under MIT - * + * * Released on: December 7, 2015 */ html, @@ -4279,7 +4279,7 @@ html.pixel-ratio-3 .picker-modal.smart-select-picker .toolbar:after { .panel { z-index: 1000; display: none; - background: #111; + background: purple; box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; @@ -4296,6 +4296,12 @@ html.pixel-ratio-3 .picker-modal.smart-select-picker .toolbar:after { z-index: 6000; left: -260px; } + +.page-content { + background-image: url("../../../img/purple.png"); + + +} .panel.panel-left.panel-reveal { left: 0; } diff --git a/OddJobb/platforms/browser/www/login.html b/OddJobb/platforms/browser/www/login.html index e69de29..1fe74e0 100644 --- a/OddJobb/platforms/browser/www/login.html +++ b/OddJobb/platforms/browser/www/login.html @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + OddJobbs - Register + + + + + + + + + + + +
+ + +
+ +
+
+
Navigation
+
+ +
+
+
+ + +
+ +
+ +
+
+ +
Odd Jobb
+
+ + +
+
+
+ +
+ +
+ +
+
+ + +
+
+
+
+ +
+
+ + Link 1 + Link 2 +
+
+
+
+ + + + + + + + + diff --git a/OddJobb/www/about.html b/OddJobb/www/about.html index 4649710..668da8b 100644 --- a/OddJobb/www/about.html +++ b/OddJobb/www/about.html @@ -19,8 +19,18 @@
-

Here is About page!

-

Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.

+

Hack4Good - OddJobbs!

+

+ OddJobbs was inspired by a true story. One day after a big snowstorm, I received a text message from my mother saying there was an elderly woman who wasn't able to shovel her driveway. She lived on a street with a ton of kids, but wasn't able to connect with one of them to complete the task. +

+
+

+ Soon after, the idea of a Hackathon was proposed to a group of us at 360insights. This got me thinking and OddJobbs was later planted to connect those +

+
+

+ Anyone can use OddJobbs, if you're like my neighbour and just need a hand or if you travel frequently and want to support your local neighbourhood - OddJobbs was made for you. +

diff --git a/OddJobb/www/createPost.html b/OddJobb/www/createPost.html new file mode 100644 index 0000000..d7fc334 --- /dev/null +++ b/OddJobb/www/createPost.html @@ -0,0 +1,127 @@ + + + +
+
+
+ + + Back + +
+ +
Create Post
+
+ +
+
+
+ +
+
+ + +
+
First, a few details about yourself
+
+ + +
+ +
    + +
  • +
    +
    +
    Name
    +
    + +
    +
    +
    +
    • + +
  • +
    +
    +
    Email
    +
    + + +
    +
    +
    +
    • + + + +
  • +
    +
    +
    Postal Code
    +
    + +
    +
    +
    +
    • + +
+
Need help with a task?
+ + +
    + +
  • +
    +
    +
    Title
    +
    + +
    + +
    +
    +
    +
    +
    When
    +
    + +
    + +
    +
    +
    • +
  • + +
  • +
    +
    +
    Explain: +
    +
    + +
    +
    +
    +
    • + +
+
+
+ +
+ +
+
+
+ + + +
+
+
+ + diff --git a/OddJobb/www/css/StyleSheet.css b/OddJobb/www/css/StyleSheet.css new file mode 100644 index 0000000..92f1e84 --- /dev/null +++ b/OddJobb/www/css/StyleSheet.css @@ -0,0 +1,6 @@ +body { +} + +.message{ + display: none; +} diff --git a/OddJobb/www/css/card.css b/OddJobb/www/css/card.css new file mode 100644 index 0000000..229a151 --- /dev/null +++ b/OddJobb/www/css/card.css @@ -0,0 +1,14 @@ +.card-header { + height: 1vw; + background-size: cover; + background-position: center; +} + +h3 { + -webkit-margin-before:0em; + -webkit-margin-after:0em; +} + +ul { + padding: 0; +} \ No newline at end of file diff --git a/OddJobb/www/css/message.css b/OddJobb/www/css/message.css new file mode 100644 index 0000000..4f5804d --- /dev/null +++ b/OddJobb/www/css/message.css @@ -0,0 +1,14 @@ +body { +} + +.hidden{ + display: none; +} + +.visible{ + display: inline; +} + +.abs{ + position: absolute; +} \ No newline at end of file diff --git a/OddJobb/www/css/styles.css b/OddJobb/www/css/styles.css index 631f0de..cd8df99 100644 --- a/OddJobb/www/css/styles.css +++ b/OddJobb/www/css/styles.css @@ -9,7 +9,146 @@ See https://github.com/apache/cordova-plugin-statusbar */ - +#map { height: 45%; width: 100%;} .statusbar-overlay { background: #000000; -} \ No newline at end of file +} + +@import url(https://fonts.googleapis.com/css?family=Roboto:300); + +body{ + background-color: #1cbb9b; +} +.login-box{ + position:relative; + margin: 10px auto; + width: 500px; + height: 380px; + background-color: #fff; + padding: 10px; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +} +.lb-header{ + position:relative; + color: #00415d; + margin: 5px 5px 10px 5px; + padding-bottom:10px; + border-bottom: 1px solid #eee; + text-align:center; + height:28px; +} +.lb-header a{ + margin: 0 25px; + padding: 0 20px; + text-decoration: none; + color: #666; + font-weight: bold; + font-size: 15px; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.lb-header .active{ + color: #029f5b; + font-size: 18px; +} +.social-login{ + position:relative; + float: left; + width: 100%; + height:auto; + padding: 10px 0 15px 0; + border-bottom: 1px solid #eee; +} +.social-login a{ + position:relative; + float: left; + width:calc(40% - 8px); + text-decoration: none; + color: #fff; + border: 1px solid rgba(0,0,0,0.05); + padding: 12px; + border-radius: 2px; + font-size: 12px; + text-transform: uppercase; + margin: 0 3%; + text-align:center; +} +.social-login a i{ + position: relative; + float: left; + width: 20px; + top: 2px; +} +.social-login a:first-child{ + background-color: #49639F; +} +.social-login a:last-child{ + background-color: #DF4A32; +} +.email-login,.email-signup{ + position:relative; + float: left; + width: 100%; + height:auto; + margin-top: 20px; + text-align:center; +} +.u-form-group{ + width:100%; + margin-bottom: 10px; +} +.u-form-group input[type="email"], +.u-form-group input[type="password"]{ + width: calc(50% - 22px); + height:45px; + outline: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 2px; + color: #333; + font-size:0.8rem; + -webkit-transition:all 0.1s linear; + -moz-transition:all 0.1s linear; + transition:all 0.1s linear; +} +.u-form-group input:focus{ + border-color: #358efb; +} +.u-form-group button{ + width:50%; + background-color: #1CB94E; + border: none; + outline: none; + color: #fff; + font-size: 14px; + font-weight: normal; + padding: 14px 0; + border-radius: 2px; + text-transform: uppercase; +} +.forgot-password{ + width:50%; + text-align: left; + text-decoration: underline; + color: #888; + font-size: 0.75rem; +} + +.topmar{ + margin: 0px 0; + font-size: 17px; + +} + +.abs{ + position: absolute; +} + +div.panel { + background-image: url('../img/white.jpg'); +} + diff --git a/OddJobb/www/defaultpage.html b/OddJobb/www/defaultpage.html new file mode 100644 index 0000000..76e2895 --- /dev/null +++ b/OddJobb/www/defaultpage.html @@ -0,0 +1,33 @@ + + +
+
+
+ + + Back + +
+
View Postings
+
+ +
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/OddJobb/www/img/blue.png b/OddJobb/www/img/blue.png new file mode 100644 index 0000000..fe7905e Binary files /dev/null and b/OddJobb/www/img/blue.png differ diff --git a/OddJobb/www/img/brown.jpg b/OddJobb/www/img/brown.jpg new file mode 100644 index 0000000..2af3072 Binary files /dev/null and b/OddJobb/www/img/brown.jpg differ diff --git a/OddJobb/www/img/green.jpg b/OddJobb/www/img/green.jpg new file mode 100644 index 0000000..96aeb45 Binary files /dev/null and b/OddJobb/www/img/green.jpg differ diff --git a/OddJobb/www/img/greenbackground.jpg b/OddJobb/www/img/greenbackground.jpg new file mode 100644 index 0000000..758f536 Binary files /dev/null and b/OddJobb/www/img/greenbackground.jpg differ diff --git a/OddJobb/www/img/orange.jpg b/OddJobb/www/img/orange.jpg new file mode 100644 index 0000000..9d3f99c Binary files /dev/null and b/OddJobb/www/img/orange.jpg differ diff --git a/OddJobb/www/img/purple.png b/OddJobb/www/img/purple.png new file mode 100644 index 0000000..54470b5 Binary files /dev/null and b/OddJobb/www/img/purple.png differ diff --git a/OddJobb/www/img/white.jpg b/OddJobb/www/img/white.jpg new file mode 100644 index 0000000..ffca960 Binary files /dev/null and b/OddJobb/www/img/white.jpg differ diff --git a/OddJobb/www/indMsg.html b/OddJobb/www/indMsg.html new file mode 100644 index 0000000..2f6cb1d --- /dev/null +++ b/OddJobb/www/indMsg.html @@ -0,0 +1,52 @@ + + + + + +
+
+
+ + + Back + +
+ +
+
+ +
+
+
+ +
+
+
+ + + + + + + + +
+
+
+ Send +
+
+
+
+ + diff --git a/OddJobb/www/index.html b/OddJobb/www/index.html index 3bafcfa..59e4561 100644 --- a/OddJobb/www/index.html +++ b/OddJobb/www/index.html @@ -1,5 +1,6 @@ + - My App + OddJobbs - + + @@ -42,25 +44,27 @@
Navigation
-
- -
+
+ +
@@ -72,7 +76,7 @@
-
Awesome App
+
Odd Jobb
- -
+
-

Page content goes here

- - About app +
+
+
    +
  • +
    +
    Username
    +
    + +
    +
    +
    • +
  • +
    +
    Password
    +
    + +
    +
    +
    • +
+
+
+ +
+
+
+

Don't have an account? Register Now +

- -
-
- - Link 1 - Link 2 -
-
+ + + + + + + + + + + + + + + + diff --git a/OddJobb/www/js/controllers/about.js b/OddJobb/www/js/controllers/about.js new file mode 100644 index 0000000..d3f5a12 --- /dev/null +++ b/OddJobb/www/js/controllers/about.js @@ -0,0 +1 @@ + diff --git a/OddJobb/www/js/controllers/createPost.js b/OddJobb/www/js/controllers/createPost.js new file mode 100644 index 0000000..f8ec8c0 --- /dev/null +++ b/OddJobb/www/js/controllers/createPost.js @@ -0,0 +1,45 @@ +myApp.onPageInit('createPost', function (page) { + + console.log("WELCOME TO HELL MOTHERFUCKER"); + + $$('#submitPost').on('click', function(e) { + + var creator = window.user; + var content = document.getElementById('content').value; + var postalCode = document.getElementById('postalCode').value; + var endDate = document.getElementById('when').value; + var title = document.getElementById('title').value; + var postDate = new Date(); + + if(content === '') { + myApp.alert('Please fill out the form!', 'Missing Values'); + + } + + else if(postalCode === '') { + myApp.alert('Please include your postal code', 'Missing PostalCode'); + + } + + else if(title === '') { + myApp.alert("Please fill out the title", "Missing Title"); + + } + + else { + var url = 'https://oddjobbackend.herokuapp.com/newPost?creator=' + creator + '&content=' + content + '&postalCode=' + postalCode + '&postDate=' + postDate + '&endDate=' + endDate + '&title=' + title; + $.post(url, function(result){ + + console.log(result); + + }); + + mainView.router.loadPage({url:'postList.html'}); + + + } + + + + }); +}) diff --git a/OddJobb/www/js/controllers/defaultpage.js b/OddJobb/www/js/controllers/defaultpage.js new file mode 100644 index 0000000..802bcfe --- /dev/null +++ b/OddJobb/www/js/controllers/defaultpage.js @@ -0,0 +1,27 @@ +myApp.onPageInit('defaultpage', function (page) { + myApp.params.swipePanel = false; + new GMaps({ + div: '#map', + lat: -12.043333, + lng: -77.028333 + }); + $$('#addressButton').on('click', function (e){ + address(); + }); +}); + +function address(){ +GMaps.geocode({ + address: $('#address').val(), + callback: function(results, status) { + if (status == 'OK') { + var latlng = results[0].geometry.location; + map.setCenter(latlng.lat(), latlng.lng()); + map.addMarker({ + lat: latlng.lat(), + lng: latlng.lng() + }); + } + } + }); +} \ No newline at end of file diff --git a/OddJobb/www/js/controllers/jobpost.js b/OddJobb/www/js/controllers/jobpost.js new file mode 100644 index 0000000..3e27230 --- /dev/null +++ b/OddJobb/www/js/controllers/jobpost.js @@ -0,0 +1,255 @@ + + +myApp.onPageInit('post', function (page) { + + myApp.params.swipePanel = false; + const posts = []; + + $$.ajax({ + url: 'http://oddjobbackend.herokuapp.com/posts', + method: 'GET', + success: (response) => { + let postsList = JSON.parse(response); + postsList.forEach((post) => { + if (post.postalCode && post._id == page.query.postID) { + posts.push({ + title: post.title, + date: new Date(post.postDate).toDateString(), + season: 'img/white.jpg', + text: post.content, + creator: post.creator, + postalCode: post.postalCode, + postID: post._id + }); + } + }); + map = new GMaps({ + div: '#map', + lat: -12.043333, + lng: -77.028333 + }); + address(posts[0].postalCode); + const myList = myApp.virtualList('.single-card', { + items: posts, + template: cardTemplate2 + }); + } + }); +}) + +myApp.onPageInit('postList', function (page) { + + if (!window.user) { + myApp.alert("Please Log In to Contact Users."); + } + + var posts = []; + var changes = 0; + + var myList = myApp.virtualList('.postlist', { + items: posts, + template: window.user ? cardTemplateDistance : cardTemplate3 + }); + + $$.ajax({ + url: 'http://oddjobbackend.herokuapp.com/posts', + method: 'GET', + success: (response) => { + $.get("http://oddjobbackend.herokuapp.com/users", function (data) { + let postsList = JSON.parse(response).reverse(); + postsList.forEach((post) => { + var user = getUser(post.creator, data); + if (post.title) { + posts.push({ + title: post.title, + date: new Date(post.postDate).toDateString(), + postalCode: post.postalCode, + season: 'img/white.jpg', + text: post.content, + creator: post.creator, + postID: post._id, + item: user, + email: window.user, + distance: '' + }) + } + }); + myList.replaceAllItems(posts); + }); + } + }); + + const notify = () => { + changes++; + posts = posts.sort(function (post1, post2) { + return parseInt(post1.distance) - parseInt(post2.distance); + }); + myList.replaceAllItems(posts); + } + + $$('#get-address').click(function () { + const postalCode = $$('#distance-address').val(); + GMaps.geocode({ + address: postalCode, + callback: function (results, status) { + if (status == 'OK') { + var latlng = results[0].geometry.location; + getAddresses(posts, { lat: latlng.lat, lng: latlng.lng }, notify); + } + } + }); + }); +}) + + +myApp.onPageInit('myPosts', function (page) { + const posts = []; + $$.ajax({ + url: 'http://oddjobbackend.herokuapp.com/posts', + method: 'GET', + success: (response) => { + let postsList = JSON.parse(response).reverse(); + postsList.forEach((post) => { + if (post.endDate && post.creator == window.user) { + posts.push({ + title: post.title, + date: new Date(post.postDate).toDateString(), + season: 'img/white.jpg', + text: post.content, + postalCode: post.postalCode, + creator: post.creator, + postID: post._id + }) + } + }); + const myList = myApp.virtualList('.mypostlist', { + items: posts, + template: cardTemplate + }); + } + }); +}); + + +function address(adr) { + GMaps.geocode({ + address: adr, + callback: function (results, status) { + if (status == 'OK') { + var latlng = results[0].geometry.location; + map.setCenter(latlng.lat(), latlng.lng()); + map.addMarker({ + lat: latlng.lat(), + lng: latlng.lng() + }); + } + } + }); +} + +function getAddresses(postList, latlong, callbackFn) { + const latlngList = []; + + postList.forEach((post) => { + GMaps.geocode({ + address: post.postalCode, + callback: function (results, status) { + if (status == 'OK') { + var latlng = results[0].geometry.location; + const postCoords = { + lat: latlng.lat, + lng: latlng.lng + }; + post.distance = calcDistance(postCoords, latlong); + callbackFn(); + } + } + }); + }) + return latlngList; +} + +function calcDistance(p1, p2) { + return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 10).toFixed(2) + 'm'; +} + + +const cardTemplate = + '
' + + '
' + + '
' + + '
' + + '

Posted on {{date}}

' + + '

{{title}}

' + + '

{{text}}

' + + '
' + + '
' + + '
' + + ' Map' + + ' Contact' + + '
' + + '
'; + +const cardTemplate2 = + '
' + + '
' + + '
' + + '
' + + '

Posted on {{date}}

' + + '

{{title}}

' + + '

{{text}}

' + + '
' + + '
' + + '
' + + ' Contact' + + '
' + + '
'; + +const cardTemplate3 = + '
' + + '
' + + '
' + + '
' + + '

Posted on {{date}}

' + + '

{{title}}

' + + '

{{text}}

' + + '
' + + '
' + + '
' + + ' Map' + + '
' + + '
'; + + +const cardTemplateDistance = + '
' + + '
' + + '
' + + '
' + + '

Posted on {{date}}

' + + '

{{title}}

' + + '

{{text}}

' + + '

Distance: {{distance}}

' + + '
' + + '
' + + '
' + + ' Map' + + ' Contact' + + '
' + + '
'; + + +//Helper FUnctions + + +var getUser = function (email, users) { + var currentUser; + for (var t = 0; t < users.length; t++) { + currentUser = users[t]; + if (currentUser.email === email) { + return currentUser.firstName; + } + } + return false; + +} \ No newline at end of file diff --git a/OddJobb/www/js/controllers/login.js b/OddJobb/www/js/controllers/login.js new file mode 100644 index 0000000..0ba0f17 --- /dev/null +++ b/OddJobb/www/js/controllers/login.js @@ -0,0 +1,71 @@ +myApp.onPageInit('login', function (page) { + // Do something here for "about" page + console.log("WELCOME TO LOGIN"); + + + $.get('https://oddjobbackend.herokuapp.com/users', function(data){ + users = data; + console.log(users); + window.MyLib = users; + + }); + + $$('#login-box-link').on('click', function(e){ + var username = document.getElementById('username').value; + var password = document.getElementById('pass').value; + var users = window.MyLib; + + console.log('users',users); + if(username === '') { + myApp.alert('Oops! You left your username blank', 'Blank username'); + + } + + else if(password === '') { + myApp.alert('Oops! You left your password blank', 'Blank Password'); + + + } + else if(isPasswordCorrect(username, password, users)) { + //set global variable to indicate correct login + myApp.alert('Welcome ' + username + '! You are now logged in!', 'Log In Success'); + window.user = username; + window.login = true; + document.getElementById('createPost').style.display = 'block'; + document.getElementById('viewMessages').style.display = 'block'; + document.getElementById('myPost').style.display = 'block'; + document.getElementById('profile').style.display = 'block'; + document.getElementById('logout').style.display = 'block'; + mainView.router.loadPage({url:'postList.html', ignoreCache:true, reload:true }); + } + + else { + + myApp.alert('Incorrect password!', "Error"); + + } + + + }); + +}) + + +function isPasswordCorrect(username, password, users) { + for(var i=0; i < users.length; i++) { + if(users[i].email === username && users[i].password === password) { + return true; + + } + + else if(users[i].email === username) { + + return false; + + } + + + } + + +} diff --git a/OddJobb/www/js/controllers/message.js b/OddJobb/www/js/controllers/message.js new file mode 100644 index 0000000..6da7536 --- /dev/null +++ b/OddJobb/www/js/controllers/message.js @@ -0,0 +1,59 @@ +//Each message Page +myApp.onPageInit('indMsg', function (page) { + //deleteAllMsgs(); + var personName = page.query["personName"]; + var email = page.query["email"]; + var title = document.getElementById("currentPerson"); + //Change title of message + title.innerHTML = personName; + //Get message of people using their email + if(email === null || email === ""){ + printErr("No email has been entered."); + } + getMessages(email); + sendMessage(personName, email); +}) + +//Messages Page +myApp.onPageInit('messages', function (page) { + var peopleTemplate = '
  • ' + + '' + + '
    {{item}}: {{messagePreview}}
    ' + + '    ' + + '
    • ' + + ''; + + //Will be reading this from the database + //Get list of users + const people = []; + var currentP = {}; + var currentMsg = {} + $.get('http://oddjobbackend.herokuapp.com/users', function(users) { + $.get("http://oddjobbackend.herokuapp.com/messages", function(msgs){ + for(var i = 0; i < users.length; i++){ + currentP = users[i]; + //Default message, in case there person has not sent any messages. + currentMsg = {message:"Test Message Test Message Test Message", email:"none"}; + if(msgs.length > 0){ + currentMsg = msgs[msgs.length - 1]; + } + + for(var a = 0; a < msgs.length; a++){ + //Check current email belongs to correct user + if(currentP.email === currentMsg.email){ + people.push({item:currentP.firstName, messagePreview:currentMsg.message.substring(0, 20).substring(0, 10), email:currentP.email}); + const myListOfPeople = myApp.virtualList('.list-block.virtual-list', { + items: people, + template: peopleTemplate + }); + break; + } + else{ + //Set email to previous one in list + currentMsg = msgs[msgs.length - (a + 1)]; + } + } + } + }); + }); +}) diff --git a/OddJobb/www/js/controllers/post_card.js b/OddJobb/www/js/controllers/post_card.js new file mode 100644 index 0000000..2349c23 --- /dev/null +++ b/OddJobb/www/js/controllers/post_card.js @@ -0,0 +1,72 @@ +myApp.onPageInit('post', function (page) { + /* + 1. Do AJAX call to get post based on postID + 2. Generate post data! + */ + + myApp.params.swipePanel = false; + map = new GMaps({ + div: '#map', + lat: -12.043333, + lng: -77.028333 + }); + + const testPost = { + season: 'img/green.jpg', + title: 'Grass Mowing Required', + date: 'January 21, 2015', + text: 'Guys please help my grass is growing too large', + postalCode: 'L1G6N4' + } + + const posts = []; + + if (page.query) { + console.log(page.query); + posts.push(testPost); + + + } else { + posts.push(testPost); + posts.push(testPost); + posts.push(testPost); + } + + address(testPost.postalCode); + + const myList = myApp.virtualList('.list-block.virtual-list.cardslist', { + items: posts, + template: + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '

    Grass Mowing Required

    ' + + '

    Posted on January 21, 2015

    ' + + '

    Quisque eget vestibulum nulla...

    ' + + '
    ' + + '
    ' + + '
    ' + + ' Contact' + + ' Map' + + '
    ' + + '
    ' + }); +}) + +function address(adr){ +GMaps.geocode({ + + address: adr, + callback: function(results, status) { + if (status == 'OK') { + var latlng = results[0].geometry.location; + map.setCenter(latlng.lat(), latlng.lng()); + map.addMarker({ + lat: latlng.lat(), + lng: latlng.lng() + }); + } + } + }); +} \ No newline at end of file diff --git a/OddJobb/www/js/controllers/profile.js b/OddJobb/www/js/controllers/profile.js new file mode 100644 index 0000000..5ee3582 --- /dev/null +++ b/OddJobb/www/js/controllers/profile.js @@ -0,0 +1,49 @@ +myApp.onPageInit('profile', function (page) { + console.log("BACK THE FUCK UP FUCKERS"); + $$('#updateProfile').on('click', function(e){ + var name = document.getElementById('name').value; + var lastname = document.getElementById('lastname').value; + var email = document.getElementById('email').value; + var phone = document.getElementById('phone').value; + var password = document.getElementById('passWord').value; + var data = ""; + if(name !== '') { + data +='firstName=' + name; + + } + + if(lastname !== '') { + data +='&lastName=' + lastname; + + } + + if(email !== ''){ + data += '&email=' + email; + } + + if(email !== '') { + data += '&phone=' + phone; + + } + + if(password !== '') { + data += '&password=' + password; + + } + + $.ajax({ + url: 'http://oddjobbackend.herokuapp.com/users/' + window.user + '?', + type: 'PUT', + data: data, + success: function(data) { + myApp.alert('Profile Updated!', 'Update Complete'); + } + }); + + + + }); + //grab fields + + //update +}) diff --git a/OddJobb/www/js/controllers/register.js b/OddJobb/www/js/controllers/register.js new file mode 100644 index 0000000..19fb0ca --- /dev/null +++ b/OddJobb/www/js/controllers/register.js @@ -0,0 +1,100 @@ +myApp.onPageInit('register', function (page) { + // Do something here for "about" page + console.log("WELCOME TO REGISTER"); + + + $.get('https://oddjobbackend.herokuapp.com/users', function(data){ + users = data; + console.log(users); + window.MyLib = users; + + }); + +}) +function submitRegistration() { + console.log("CLICK"); + var currentUsers = window.MyLib; + var firstName = document.getElementById('firstName').value; + var lastName = document.getElementById('lastName').value; + var email = document.getElementById('email').value; + var phone = document.getElementById('phone').value; + var password = document.getElementById('password').value; + + //validation + var phoneReg = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im; + var emailReg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + var existsFlag = 0; + //checking validation + if(firstName === '') { + myApp.alert('Cannot leave First Name blank', "Missing firstName"); + + } + + else if(lastName === '') { + myApp.alert("Cannot leave Last Name blank", "Missing Last Name"); + + } + + else if(email === '') { + myApp.alert("Cannot leave email blank", "Missing Email"); + + } + else if(emailReg.test(email) === false) { + myApp.alert("Invalid email address!"); + + } + + + else if(phone === '') { + myApp.alert("Cannot leave phone number blank", "Missing Phone"); + + } + + else if(phoneReg.test(phone) === false) { + myApp.alert("Invalid phone number", "Invalid"); + + } + + else if(password === '') { + + myApp.alert("Cannot leave password blank", "Blank Password"); + } + + else { + console.log(firstName, lastName, password); + //everything passes submit + var url = 'https://oddjobbackend.herokuapp.com/newUser?firstName=' + firstName + '&lastName=' + lastName + '&email=' + email + '&phone=' + phone + '&password=' + password; + console.log('url', url); + if(doesUserExist(email,currentUsers)){ + myApp.alert("Error, the current email address is already being used.", "Existing User"); + + } + + else { + + $.post(url, function(result) { + console.log(result); + + }); + + myApp.alert('Congratulations! You are registered! You can now log in!', "Welcome"); + $.get('https://oddjobbackend.herokuapp.com/users', function(data){ + + window.MyLib = data; + + }); + mainView.router.loadPage({url:'index.html'}); + + } + } + +} + +function doesUserExist(email, currentUsers) { + for(var i=0; i < currentUsers.length; i++) { + if(currentUsers[i].email === email) { + return true; + } + } + return false; +} diff --git a/OddJobb/www/js/gmaps.js b/OddJobb/www/js/gmaps.js new file mode 100644 index 0000000..71d3df4 --- /dev/null +++ b/OddJobb/www/js/gmaps.js @@ -0,0 +1,2417 @@ +"use strict"; +(function(root, factory) { + if(typeof exports === 'object') { + module.exports = factory(); + } + else if(typeof define === 'function' && define.amd) { + define(['jquery', 'googlemaps!'], factory); + } + else { + root.GMaps = factory(); + } + + +}(this, function() { + +/*! + * GMaps.js v0.4.25 + * http://hpneo.github.com/gmaps/ + * + * Copyright 2017, Gustavo Leon + * Released under the MIT License. + */ + +var extend_object = function(obj, new_obj) { + var name; + + if (obj === new_obj) { + return obj; + } + + for (name in new_obj) { + if (new_obj[name] !== undefined) { + obj[name] = new_obj[name]; + } + } + + return obj; +}; + +var replace_object = function(obj, replace) { + var name; + + if (obj === replace) { + return obj; + } + + for (name in replace) { + if (obj[name] != undefined) { + obj[name] = replace[name]; + } + } + + return obj; +}; + +var array_map = function(array, callback) { + var original_callback_params = Array.prototype.slice.call(arguments, 2), + array_return = [], + array_length = array.length, + i; + + if (Array.prototype.map && array.map === Array.prototype.map) { + array_return = Array.prototype.map.call(array, function(item) { + var callback_params = original_callback_params.slice(0); + callback_params.splice(0, 0, item); + + return callback.apply(this, callback_params); + }); + } + else { + for (i = 0; i < array_length; i++) { + callback_params = original_callback_params; + callback_params.splice(0, 0, array[i]); + array_return.push(callback.apply(this, callback_params)); + } + } + + return array_return; +}; + +var array_flat = function(array) { + var new_array = [], + i; + + for (i = 0; i < array.length; i++) { + new_array = new_array.concat(array[i]); + } + + return new_array; +}; + +var coordsToLatLngs = function(coords, useGeoJSON) { + var first_coord = coords[0], + second_coord = coords[1]; + + if (useGeoJSON) { + first_coord = coords[1]; + second_coord = coords[0]; + } + + return new google.maps.LatLng(first_coord, second_coord); +}; + +var arrayToLatLng = function(coords, useGeoJSON) { + var i; + + for (i = 0; i < coords.length; i++) { + if (!(coords[i] instanceof google.maps.LatLng)) { + if (coords[i].length > 0 && typeof(coords[i][0]) === "object") { + coords[i] = arrayToLatLng(coords[i], useGeoJSON); + } + else { + coords[i] = coordsToLatLngs(coords[i], useGeoJSON); + } + } + } + + return coords; +}; + +var getElementsByClassName = function (class_name, context) { + var element, + _class = class_name.replace('.', ''); + + if ('jQuery' in this && context) { + element = $("." + _class, context)[0]; + } else { + element = document.getElementsByClassName(_class)[0]; + } + return element; + +}; + +var getElementById = function(id, context) { + var element, + id = id.replace('#', ''); + + if ('jQuery' in window && context) { + element = $('#' + id, context)[0]; + } else { + element = document.getElementById(id); + }; + + return element; +}; + +var findAbsolutePosition = function(obj) { + var curleft = 0, + curtop = 0; + + if (obj.getBoundingClientRect) { + var rect = obj.getBoundingClientRect(); + var sx = -(window.scrollX ? window.scrollX : window.pageXOffset); + var sy = -(window.scrollY ? window.scrollY : window.pageYOffset); + + return [(rect.left - sx), (rect.top - sy)]; + } + + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj = obj.offsetParent); + } + + return [curleft, curtop]; +}; + +var GMaps = (function(global) { + "use strict"; + + var doc = document; + /** + * Creates a new GMaps instance, including a Google Maps map. + * @class GMaps + * @constructs + * @param {object} options - `options` accepts all the [MapOptions](https://developers.google.com/maps/documentation/javascript/reference#MapOptions) and [events](https://developers.google.com/maps/documentation/javascript/reference#Map) listed in the Google Maps API. Also accepts: + * * `lat` (number): Latitude of the map's center + * * `lng` (number): Longitude of the map's center + * * `el` (string or HTMLElement): container where the map will be rendered + * * `markerClusterer` (function): A function to create a marker cluster. You can use MarkerClusterer or MarkerClustererPlus. + */ + var GMaps = function(options) { + + if (!(typeof window.google === 'object' && window.google.maps)) { + if (typeof window.console === 'object' && window.console.error) { + console.error('Google Maps API is required. Please register the following JavaScript library https://maps.googleapis.com/maps/api/js.'); + } + + return function() {}; + } + + if (!this) return new GMaps(options); + + options.zoom = options.zoom || 15; + options.mapType = options.mapType || 'roadmap'; + + var valueOrDefault = function(value, defaultValue) { + return value === undefined ? defaultValue : value; + }; + + var self = this, + i, + events_that_hide_context_menu = [ + 'bounds_changed', 'center_changed', 'click', 'dblclick', 'drag', + 'dragend', 'dragstart', 'idle', 'maptypeid_changed', 'projection_changed', + 'resize', 'tilesloaded', 'zoom_changed' + ], + events_that_doesnt_hide_context_menu = ['mousemove', 'mouseout', 'mouseover'], + options_to_be_deleted = ['el', 'lat', 'lng', 'mapType', 'width', 'height', 'markerClusterer', 'enableNewStyle'], + identifier = options.el || options.div, + markerClustererFunction = options.markerClusterer, + mapType = google.maps.MapTypeId[options.mapType.toUpperCase()], + map_center = new google.maps.LatLng(options.lat, options.lng), + zoomControl = valueOrDefault(options.zoomControl, true), + zoomControlOpt = options.zoomControlOpt || { + style: 'DEFAULT', + position: 'TOP_LEFT' + }, + zoomControlStyle = zoomControlOpt.style || 'DEFAULT', + zoomControlPosition = zoomControlOpt.position || 'TOP_LEFT', + panControl = valueOrDefault(options.panControl, true), + mapTypeControl = valueOrDefault(options.mapTypeControl, true), + scaleControl = valueOrDefault(options.scaleControl, true), + streetViewControl = valueOrDefault(options.streetViewControl, true), + overviewMapControl = valueOrDefault(overviewMapControl, true), + map_options = {}, + map_base_options = { + zoom: this.zoom, + center: map_center, + mapTypeId: mapType + }, + map_controls_options = { + panControl: panControl, + zoomControl: zoomControl, + zoomControlOptions: { + style: google.maps.ZoomControlStyle[zoomControlStyle], + position: google.maps.ControlPosition[zoomControlPosition] + }, + mapTypeControl: mapTypeControl, + scaleControl: scaleControl, + streetViewControl: streetViewControl, + overviewMapControl: overviewMapControl + }; + + if (typeof(options.el) === 'string' || typeof(options.div) === 'string') { + if (identifier.indexOf("#") > -1) { + /** + * Container element + * + * @type {HTMLElement} + */ + this.el = getElementById(identifier, options.context); + } else { + this.el = getElementsByClassName.apply(this, [identifier, options.context]); + } + } else { + this.el = identifier; + } + + if (typeof(this.el) === 'undefined' || this.el === null) { + throw 'No element defined.'; + } + + window.context_menu = window.context_menu || {}; + window.context_menu[self.el.id] = {}; + + /** + * Collection of custom controls in the map UI + * + * @type {array} + */ + this.controls = []; + /** + * Collection of map's overlays + * + * @type {array} + */ + this.overlays = []; + /** + * Collection of KML/GeoRSS and FusionTable layers + * + * @type {array} + */ + this.layers = []; + /** + * Collection of data layers (See {@link GMaps#addLayer}) + * + * @type {object} + */ + this.singleLayers = {}; + /** + * Collection of map's markers + * + * @type {array} + */ + this.markers = []; + /** + * Collection of map's lines + * + * @type {array} + */ + this.polylines = []; + /** + * Collection of map's routes requested by {@link GMaps#getRoutes}, {@link GMaps#renderRoute}, {@link GMaps#drawRoute}, {@link GMaps#travelRoute} or {@link GMaps#drawSteppedRoute} + * + * @type {array} + */ + this.routes = []; + /** + * Collection of map's polygons + * + * @type {array} + */ + this.polygons = []; + this.infoWindow = null; + this.overlay_el = null; + /** + * Current map's zoom + * + * @type {number} + */ + this.zoom = options.zoom; + this.registered_events = {}; + + this.el.style.width = options.width || this.el.scrollWidth || this.el.offsetWidth; + this.el.style.height = options.height || this.el.scrollHeight || this.el.offsetHeight; + + google.maps.visualRefresh = options.enableNewStyle; + + for (i = 0; i < options_to_be_deleted.length; i++) { + delete options[options_to_be_deleted[i]]; + } + + if(options.disableDefaultUI != true) { + map_base_options = extend_object(map_base_options, map_controls_options); + } + + map_options = extend_object(map_base_options, options); + + for (i = 0; i < events_that_hide_context_menu.length; i++) { + delete map_options[events_that_hide_context_menu[i]]; + } + + for (i = 0; i < events_that_doesnt_hide_context_menu.length; i++) { + delete map_options[events_that_doesnt_hide_context_menu[i]]; + } + + /** + * Google Maps map instance + * + * @type {google.maps.Map} + */ + this.map = new google.maps.Map(this.el, map_options); + + if (markerClustererFunction) { + /** + * Marker Clusterer instance + * + * @type {object} + */ + this.markerClusterer = markerClustererFunction.apply(this, [this.map]); + } + + var buildContextMenuHTML = function(control, e) { + var html = '', + options = window.context_menu[self.el.id][control]; + + for (var i in options){ + if (options.hasOwnProperty(i)) { + var option = options[i]; + + html += '
  • ' + option.title + '
    • '; + } + } + + if (!getElementById('gmaps_context_menu')) return; + + var context_menu_element = getElementById('gmaps_context_menu'); + + context_menu_element.innerHTML = html; + + var context_menu_items = context_menu_element.getElementsByTagName('a'), + context_menu_items_count = context_menu_items.length, + i; + + for (i = 0; i < context_menu_items_count; i++) { + var context_menu_item = context_menu_items[i]; + + var assign_menu_item_action = function(ev){ + ev.preventDefault(); + + options[this.id.replace(control + '_', '')].action.apply(self, [e]); + self.hideContextMenu(); + }; + + google.maps.event.clearListeners(context_menu_item, 'click'); + google.maps.event.addDomListenerOnce(context_menu_item, 'click', assign_menu_item_action, false); + } + + var position = findAbsolutePosition.apply(this, [self.el]), + left = position[0] + e.pixel.x - 15, + top = position[1] + e.pixel.y- 15; + + context_menu_element.style.left = left + "px"; + context_menu_element.style.top = top + "px"; + + // context_menu_element.style.display = 'block'; + }; + + this.buildContextMenu = function(control, e) { + if (control === 'marker') { + e.pixel = {}; + + var overlay = new google.maps.OverlayView(); + overlay.setMap(self.map); + + overlay.draw = function() { + var projection = overlay.getProjection(), + position = e.marker.getPosition(); + + e.pixel = projection.fromLatLngToContainerPixel(position); + + buildContextMenuHTML(control, e); + }; + } + else { + buildContextMenuHTML(control, e); + } + + var context_menu_element = getElementById('gmaps_context_menu'); + + setTimeout(function() { + context_menu_element.style.display = 'block'; + }, 0); + }; + + /** + * Add a context menu for a map or a marker. + * + * @param {object} options - The `options` object should contain: + * * `control` (string): Kind of control the context menu will be attached. Can be "map" or "marker". + * * `options` (array): A collection of context menu items: + * * `title` (string): Item's title shown in the context menu. + * * `name` (string): Item's identifier. + * * `action` (function): Function triggered after selecting the context menu item. + */ + this.setContextMenu = function(options) { + window.context_menu[self.el.id][options.control] = {}; + + var i, + ul = doc.createElement('ul'); + + for (i in options.options) { + if (options.options.hasOwnProperty(i)) { + var option = options.options[i]; + + window.context_menu[self.el.id][options.control][option.name] = { + title: option.title, + action: option.action + }; + } + } + + ul.id = 'gmaps_context_menu'; + ul.style.display = 'none'; + ul.style.position = 'absolute'; + ul.style.minWidth = '100px'; + ul.style.background = 'white'; + ul.style.listStyle = 'none'; + ul.style.padding = '8px'; + ul.style.boxShadow = '2px 2px 6px #ccc'; + + if (!getElementById('gmaps_context_menu')) { + doc.body.appendChild(ul); + } + + var context_menu_element = getElementById('gmaps_context_menu'); + + google.maps.event.addDomListener(context_menu_element, 'mouseout', function(ev) { + if (!ev.relatedTarget || !this.contains(ev.relatedTarget)) { + window.setTimeout(function(){ + context_menu_element.style.display = 'none'; + }, 400); + } + }, false); + }; + + /** + * Hide the current context menu + */ + this.hideContextMenu = function() { + var context_menu_element = getElementById('gmaps_context_menu'); + + if (context_menu_element) { + context_menu_element.style.display = 'none'; + } + }; + + var setupListener = function(object, name) { + google.maps.event.addListener(object, name, function(e){ + if (e == undefined) { + e = this; + } + + options[name].apply(this, [e]); + + self.hideContextMenu(); + }); + }; + + //google.maps.event.addListener(this.map, 'idle', this.hideContextMenu); + google.maps.event.addListener(this.map, 'zoom_changed', this.hideContextMenu); + + for (var ev = 0; ev < events_that_hide_context_menu.length; ev++) { + var name = events_that_hide_context_menu[ev]; + + if (name in options) { + setupListener(this.map, name); + } + } + + for (var ev = 0; ev < events_that_doesnt_hide_context_menu.length; ev++) { + var name = events_that_doesnt_hide_context_menu[ev]; + + if (name in options) { + setupListener(this.map, name); + } + } + + google.maps.event.addListener(this.map, 'rightclick', function(e) { + if (options.rightclick) { + options.rightclick.apply(this, [e]); + } + + if(window.context_menu[self.el.id]['map'] != undefined) { + self.buildContextMenu('map', e); + } + }); + + /** + * Trigger a `resize` event, useful if you need to repaint the current map (for changes in the viewport or display / hide actions). + */ + this.refresh = function() { + google.maps.event.trigger(this.map, 'resize'); + }; + + /** + * Adjust the map zoom to include all the markers added in the map. + */ + this.fitZoom = function() { + var latLngs = [], + markers_length = this.markers.length, + i; + + for (i = 0; i < markers_length; i++) { + if(typeof(this.markers[i].visible) === 'boolean' && this.markers[i].visible) { + latLngs.push(this.markers[i].getPosition()); + } + } + + this.fitLatLngBounds(latLngs); + }; + + /** + * Adjust the map zoom to include all the coordinates in the `latLngs` array. + * + * @param {array} latLngs - Collection of `google.maps.LatLng` objects. + */ + this.fitLatLngBounds = function(latLngs) { + var total = latLngs.length, + bounds = new google.maps.LatLngBounds(), + i; + + for(i = 0; i < total; i++) { + bounds.extend(latLngs[i]); + } + + this.map.fitBounds(bounds); + }; + + /** + * Center the map using the `lat` and `lng` coordinates. + * + * @param {number} lat - Latitude of the coordinate. + * @param {number} lng - Longitude of the coordinate. + * @param {function} [callback] - Callback that will be executed after the map is centered. + */ + this.setCenter = function(lat, lng, callback) { + this.map.panTo(new google.maps.LatLng(lat, lng)); + + if (callback) { + callback(); + } + }; + + /** + * Return the HTML element container of the map. + * + * @returns {HTMLElement} the element container. + */ + this.getElement = function() { + return this.el; + }; + + /** + * Increase the map's zoom. + * + * @param {number} [magnitude] - The number of times the map will be zoomed in. + */ + this.zoomIn = function(value) { + value = value || 1; + + this.zoom = this.map.getZoom() + value; + this.map.setZoom(this.zoom); + }; + + /** + * Decrease the map's zoom. + * + * @param {number} [magnitude] - The number of times the map will be zoomed out. + */ + this.zoomOut = function(value) { + value = value || 1; + + this.zoom = this.map.getZoom() - value; + this.map.setZoom(this.zoom); + }; + + var native_methods = [], + method; + + for (method in this.map) { + if (typeof(this.map[method]) == 'function' && !this[method]) { + native_methods.push(method); + } + } + + for (i = 0; i < native_methods.length; i++) { + (function(gmaps, scope, method_name) { + gmaps[method_name] = function(){ + return scope[method_name].apply(scope, arguments); + }; + })(this, this.map, native_methods[i]); + } + }; + + return GMaps; +})(this); + +GMaps.prototype.createControl = function(options) { + var control = document.createElement('div'); + + control.style.cursor = 'pointer'; + + if (options.disableDefaultStyles !== true) { + control.style.fontFamily = 'Roboto, Arial, sans-serif'; + control.style.fontSize = '11px'; + control.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px'; + } + + for (var option in options.style) { + control.style[option] = options.style[option]; + } + + if (options.id) { + control.id = options.id; + } + + if (options.title) { + control.title = options.title; + } + + if (options.classes) { + control.className = options.classes; + } + + if (options.content) { + if (typeof options.content === 'string') { + control.innerHTML = options.content; + } + else if (options.content instanceof HTMLElement) { + control.appendChild(options.content); + } + } + + if (options.position) { + control.position = google.maps.ControlPosition[options.position.toUpperCase()]; + } + + for (var ev in options.events) { + (function(object, name) { + google.maps.event.addDomListener(object, name, function(){ + options.events[name].apply(this, [this]); + }); + })(control, ev); + } + + control.index = 1; + + return control; +}; + +/** + * Add a custom control to the map UI. + * + * @param {object} options - The `options` object should contain: + * * `style` (object): The keys and values of this object should be valid CSS properties and values. + * * `id` (string): The HTML id for the custom control. + * * `classes` (string): A string containing all the HTML classes for the custom control. + * * `content` (string or HTML element): The content of the custom control. + * * `position` (string): Any valid [`google.maps.ControlPosition`](https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning) value, in lower or upper case. + * * `events` (object): The keys of this object should be valid DOM events. The values should be functions. + * * `disableDefaultStyles` (boolean): If false, removes the default styles for the controls like font (family and size), and box shadow. + * @returns {HTMLElement} + */ +GMaps.prototype.addControl = function(options) { + var control = this.createControl(options); + + this.controls.push(control); + this.map.controls[control.position].push(control); + + return control; +}; + +/** + * Remove a control from the map. `control` should be a control returned by `addControl()`. + * + * @param {HTMLElement} control - One of the controls returned by `addControl()`. + * @returns {HTMLElement} the removed control. + */ +GMaps.prototype.removeControl = function(control) { + var position = null, + i; + + for (i = 0; i < this.controls.length; i++) { + if (this.controls[i] == control) { + position = this.controls[i].position; + this.controls.splice(i, 1); + } + } + + if (position) { + for (i = 0; i < this.map.controls.length; i++) { + var controlsForPosition = this.map.controls[control.position]; + + if (controlsForPosition.getAt(i) == control) { + controlsForPosition.removeAt(i); + + break; + } + } + } + + return control; +}; + +GMaps.prototype.createMarker = function(options) { + if (options.lat == undefined && options.lng == undefined && options.position == undefined) { + throw 'No latitude or longitude defined.'; + } + + var self = this, + details = options.details, + fences = options.fences, + outside = options.outside, + base_options = { + position: new google.maps.LatLng(options.lat, options.lng), + map: null + }, + marker_options = extend_object(base_options, options); + + delete marker_options.lat; + delete marker_options.lng; + delete marker_options.fences; + delete marker_options.outside; + + var marker = new google.maps.Marker(marker_options); + + marker.fences = fences; + + if (options.infoWindow) { + marker.infoWindow = new google.maps.InfoWindow(options.infoWindow); + + var info_window_events = ['closeclick', 'content_changed', 'domready', 'position_changed', 'zindex_changed']; + + for (var ev = 0; ev < info_window_events.length; ev++) { + (function(object, name) { + if (options.infoWindow[name]) { + google.maps.event.addListener(object, name, function(e){ + options.infoWindow[name].apply(this, [e]); + }); + } + })(marker.infoWindow, info_window_events[ev]); + } + } + + var marker_events = ['animation_changed', 'clickable_changed', 'cursor_changed', 'draggable_changed', 'flat_changed', 'icon_changed', 'position_changed', 'shadow_changed', 'shape_changed', 'title_changed', 'visible_changed', 'zindex_changed']; + + var marker_events_with_mouse = ['dblclick', 'drag', 'dragend', 'dragstart', 'mousedown', 'mouseout', 'mouseover', 'mouseup']; + + for (var ev = 0; ev < marker_events.length; ev++) { + (function(object, name) { + if (options[name]) { + google.maps.event.addListener(object, name, function(){ + options[name].apply(this, [this]); + }); + } + })(marker, marker_events[ev]); + } + + for (var ev = 0; ev < marker_events_with_mouse.length; ev++) { + (function(map, object, name) { + if (options[name]) { + google.maps.event.addListener(object, name, function(me){ + if(!me.pixel){ + me.pixel = map.getProjection().fromLatLngToPoint(me.latLng) + } + + options[name].apply(this, [me]); + }); + } + })(this.map, marker, marker_events_with_mouse[ev]); + } + + google.maps.event.addListener(marker, 'click', function() { + this.details = details; + + if (options.click) { + options.click.apply(this, [this]); + } + + if (marker.infoWindow) { + self.hideInfoWindows(); + marker.infoWindow.open(self.map, marker); + } + }); + + google.maps.event.addListener(marker, 'rightclick', function(e) { + e.marker = this; + + if (options.rightclick) { + options.rightclick.apply(this, [e]); + } + + if (window.context_menu[self.el.id]['marker'] != undefined) { + self.buildContextMenu('marker', e); + } + }); + + if (marker.fences) { + google.maps.event.addListener(marker, 'dragend', function() { + self.checkMarkerGeofence(marker, function(m, f) { + outside(m, f); + }); + }); + } + + return marker; +}; + +GMaps.prototype.addMarker = function(options) { + var marker; + if(options.hasOwnProperty('gm_accessors_')) { + // Native google.maps.Marker object + marker = options; + } + else { + if ((options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) || options.position) { + marker = this.createMarker(options); + } + else { + throw 'No latitude or longitude defined.'; + } + } + + marker.setMap(this.map); + + if(this.markerClusterer) { + this.markerClusterer.addMarker(marker); + } + + this.markers.push(marker); + + GMaps.fire('marker_added', marker, this); + + return marker; +}; + +GMaps.prototype.addMarkers = function(array) { + for (var i = 0, marker; marker=array[i]; i++) { + this.addMarker(marker); + } + + return this.markers; +}; + +GMaps.prototype.hideInfoWindows = function() { + for (var i = 0, marker; marker = this.markers[i]; i++){ + if (marker.infoWindow) { + marker.infoWindow.close(); + } + } +}; + +GMaps.prototype.removeMarker = function(marker) { + for (var i = 0; i < this.markers.length; i++) { + if (this.markers[i] === marker) { + this.markers[i].setMap(null); + this.markers.splice(i, 1); + + if(this.markerClusterer) { + this.markerClusterer.removeMarker(marker); + } + + GMaps.fire('marker_removed', marker, this); + + break; + } + } + + return marker; +}; + +GMaps.prototype.removeMarkers = function (collection) { + var new_markers = []; + + if (typeof collection == 'undefined') { + for (var i = 0; i < this.markers.length; i++) { + var marker = this.markers[i]; + marker.setMap(null); + + GMaps.fire('marker_removed', marker, this); + } + + if(this.markerClusterer && this.markerClusterer.clearMarkers) { + this.markerClusterer.clearMarkers(); + } + + this.markers = new_markers; + } + else { + for (var i = 0; i < collection.length; i++) { + var index = this.markers.indexOf(collection[i]); + + if (index > -1) { + var marker = this.markers[index]; + marker.setMap(null); + + if(this.markerClusterer) { + this.markerClusterer.removeMarker(marker); + } + + GMaps.fire('marker_removed', marker, this); + } + } + + for (var i = 0; i < this.markers.length; i++) { + var marker = this.markers[i]; + if (marker.getMap() != null) { + new_markers.push(marker); + } + } + + this.markers = new_markers; + } +}; + +GMaps.prototype.drawOverlay = function(options) { + var overlay = new google.maps.OverlayView(), + auto_show = true; + + overlay.setMap(this.map); + + if (options.auto_show != null) { + auto_show = options.auto_show; + } + + overlay.onAdd = function() { + var el = document.createElement('div'); + + el.style.borderStyle = "none"; + el.style.borderWidth = "0px"; + el.style.position = "absolute"; + el.style.zIndex = 100; + el.innerHTML = options.content; + + overlay.el = el; + + if (!options.layer) { + options.layer = 'overlayLayer'; + } + + var panes = this.getPanes(), + overlayLayer = panes[options.layer], + stop_overlay_events = ['contextmenu', 'DOMMouseScroll', 'dblclick', 'mousedown']; + + overlayLayer.appendChild(el); + + for (var ev = 0; ev < stop_overlay_events.length; ev++) { + (function(object, name) { + google.maps.event.addDomListener(object, name, function(e){ + if (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) { + e.cancelBubble = true; + e.returnValue = false; + } + else { + e.stopPropagation(); + } + }); + })(el, stop_overlay_events[ev]); + } + + if (options.click) { + panes.overlayMouseTarget.appendChild(overlay.el); + google.maps.event.addDomListener(overlay.el, 'click', function() { + options.click.apply(overlay, [overlay]); + }); + } + + google.maps.event.trigger(this, 'ready'); + }; + + overlay.draw = function() { + var projection = this.getProjection(), + pixel = projection.fromLatLngToDivPixel(new google.maps.LatLng(options.lat, options.lng)); + + options.horizontalOffset = options.horizontalOffset || 0; + options.verticalOffset = options.verticalOffset || 0; + + var el = overlay.el, + content = el.children[0], + content_height = content.clientHeight, + content_width = content.clientWidth; + + switch (options.verticalAlign) { + case 'top': + el.style.top = (pixel.y - content_height + options.verticalOffset) + 'px'; + break; + default: + case 'middle': + el.style.top = (pixel.y - (content_height / 2) + options.verticalOffset) + 'px'; + break; + case 'bottom': + el.style.top = (pixel.y + options.verticalOffset) + 'px'; + break; + } + + switch (options.horizontalAlign) { + case 'left': + el.style.left = (pixel.x - content_width + options.horizontalOffset) + 'px'; + break; + default: + case 'center': + el.style.left = (pixel.x - (content_width / 2) + options.horizontalOffset) + 'px'; + break; + case 'right': + el.style.left = (pixel.x + options.horizontalOffset) + 'px'; + break; + } + + el.style.display = auto_show ? 'block' : 'none'; + + if (!auto_show) { + options.show.apply(this, [el]); + } + }; + + overlay.onRemove = function() { + var el = overlay.el; + + if (options.remove) { + options.remove.apply(this, [el]); + } + else { + overlay.el.parentNode.removeChild(overlay.el); + overlay.el = null; + } + }; + + this.overlays.push(overlay); + return overlay; +}; + +GMaps.prototype.removeOverlay = function(overlay) { + for (var i = 0; i < this.overlays.length; i++) { + if (this.overlays[i] === overlay) { + this.overlays[i].setMap(null); + this.overlays.splice(i, 1); + + break; + } + } +}; + +GMaps.prototype.removeOverlays = function() { + for (var i = 0, item; item = this.overlays[i]; i++) { + item.setMap(null); + } + + this.overlays = []; +}; + +GMaps.prototype.drawPolyline = function(options) { + var path = [], + points = options.path; + + if (points.length) { + if (points[0][0] === undefined) { + path = points; + } + else { + for (var i = 0, latlng; latlng = points[i]; i++) { + path.push(new google.maps.LatLng(latlng[0], latlng[1])); + } + } + } + + var polyline_options = { + map: this.map, + path: path, + strokeColor: options.strokeColor, + strokeOpacity: options.strokeOpacity, + strokeWeight: options.strokeWeight, + geodesic: options.geodesic, + clickable: true, + editable: false, + visible: true + }; + + if (options.hasOwnProperty("clickable")) { + polyline_options.clickable = options.clickable; + } + + if (options.hasOwnProperty("editable")) { + polyline_options.editable = options.editable; + } + + if (options.hasOwnProperty("icons")) { + polyline_options.icons = options.icons; + } + + if (options.hasOwnProperty("zIndex")) { + polyline_options.zIndex = options.zIndex; + } + + var polyline = new google.maps.Polyline(polyline_options); + + var polyline_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick']; + + for (var ev = 0; ev < polyline_events.length; ev++) { + (function(object, name) { + if (options[name]) { + google.maps.event.addListener(object, name, function(e){ + options[name].apply(this, [e]); + }); + } + })(polyline, polyline_events[ev]); + } + + this.polylines.push(polyline); + + GMaps.fire('polyline_added', polyline, this); + + return polyline; +}; + +GMaps.prototype.removePolyline = function(polyline) { + for (var i = 0; i < this.polylines.length; i++) { + if (this.polylines[i] === polyline) { + this.polylines[i].setMap(null); + this.polylines.splice(i, 1); + + GMaps.fire('polyline_removed', polyline, this); + + break; + } + } +}; + +GMaps.prototype.removePolylines = function() { + for (var i = 0, item; item = this.polylines[i]; i++) { + item.setMap(null); + } + + this.polylines = []; +}; + +GMaps.prototype.drawCircle = function(options) { + options = extend_object({ + map: this.map, + center: new google.maps.LatLng(options.lat, options.lng) + }, options); + + delete options.lat; + delete options.lng; + + var polygon = new google.maps.Circle(options), + polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick']; + + for (var ev = 0; ev < polygon_events.length; ev++) { + (function(object, name) { + if (options[name]) { + google.maps.event.addListener(object, name, function(e){ + options[name].apply(this, [e]); + }); + } + })(polygon, polygon_events[ev]); + } + + this.polygons.push(polygon); + + return polygon; +}; + +GMaps.prototype.drawRectangle = function(options) { + options = extend_object({ + map: this.map + }, options); + + var latLngBounds = new google.maps.LatLngBounds( + new google.maps.LatLng(options.bounds[0][0], options.bounds[0][1]), + new google.maps.LatLng(options.bounds[1][0], options.bounds[1][1]) + ); + + options.bounds = latLngBounds; + + var polygon = new google.maps.Rectangle(options), + polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick']; + + for (var ev = 0; ev < polygon_events.length; ev++) { + (function(object, name) { + if (options[name]) { + google.maps.event.addListener(object, name, function(e){ + options[name].apply(this, [e]); + }); + } + })(polygon, polygon_events[ev]); + } + + this.polygons.push(polygon); + + return polygon; +}; + +GMaps.prototype.drawPolygon = function(options) { + var useGeoJSON = false; + + if(options.hasOwnProperty("useGeoJSON")) { + useGeoJSON = options.useGeoJSON; + } + + delete options.useGeoJSON; + + options = extend_object({ + map: this.map + }, options); + + if (useGeoJSON == false) { + options.paths = [options.paths.slice(0)]; + } + + if (options.paths.length > 0) { + if (options.paths[0].length > 0) { + options.paths = array_flat(array_map(options.paths, arrayToLatLng, useGeoJSON)); + } + } + + var polygon = new google.maps.Polygon(options), + polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick']; + + for (var ev = 0; ev < polygon_events.length; ev++) { + (function(object, name) { + if (options[name]) { + google.maps.event.addListener(object, name, function(e){ + options[name].apply(this, [e]); + }); + } + })(polygon, polygon_events[ev]); + } + + this.polygons.push(polygon); + + GMaps.fire('polygon_added', polygon, this); + + return polygon; +}; + +GMaps.prototype.removePolygon = function(polygon) { + for (var i = 0; i < this.polygons.length; i++) { + if (this.polygons[i] === polygon) { + this.polygons[i].setMap(null); + this.polygons.splice(i, 1); + + GMaps.fire('polygon_removed', polygon, this); + + break; + } + } +}; + +GMaps.prototype.removePolygons = function() { + for (var i = 0, item; item = this.polygons[i]; i++) { + item.setMap(null); + } + + this.polygons = []; +}; + +GMaps.prototype.getFromFusionTables = function(options) { + var events = options.events; + + delete options.events; + + var fusion_tables_options = options, + layer = new google.maps.FusionTablesLayer(fusion_tables_options); + + for (var ev in events) { + (function(object, name) { + google.maps.event.addListener(object, name, function(e) { + events[name].apply(this, [e]); + }); + })(layer, ev); + } + + this.layers.push(layer); + + return layer; +}; + +GMaps.prototype.loadFromFusionTables = function(options) { + var layer = this.getFromFusionTables(options); + layer.setMap(this.map); + + return layer; +}; + +GMaps.prototype.getFromKML = function(options) { + var url = options.url, + events = options.events; + + delete options.url; + delete options.events; + + var kml_options = options, + layer = new google.maps.KmlLayer(url, kml_options); + + for (var ev in events) { + (function(object, name) { + google.maps.event.addListener(object, name, function(e) { + events[name].apply(this, [e]); + }); + })(layer, ev); + } + + this.layers.push(layer); + + return layer; +}; + +GMaps.prototype.loadFromKML = function(options) { + var layer = this.getFromKML(options); + layer.setMap(this.map); + + return layer; +}; + +GMaps.prototype.addLayer = function(layerName, options) { + //var default_layers = ['weather', 'clouds', 'traffic', 'transit', 'bicycling', 'panoramio', 'places']; + options = options || {}; + var layer; + + switch(layerName) { + case 'weather': this.singleLayers.weather = layer = new google.maps.weather.WeatherLayer(); + break; + case 'clouds': this.singleLayers.clouds = layer = new google.maps.weather.CloudLayer(); + break; + case 'traffic': this.singleLayers.traffic = layer = new google.maps.TrafficLayer(); + break; + case 'transit': this.singleLayers.transit = layer = new google.maps.TransitLayer(); + break; + case 'bicycling': this.singleLayers.bicycling = layer = new google.maps.BicyclingLayer(); + break; + case 'panoramio': + this.singleLayers.panoramio = layer = new google.maps.panoramio.PanoramioLayer(); + layer.setTag(options.filter); + delete options.filter; + + //click event + if (options.click) { + google.maps.event.addListener(layer, 'click', function(event) { + options.click(event); + delete options.click; + }); + } + break; + case 'places': + this.singleLayers.places = layer = new google.maps.places.PlacesService(this.map); + + //search, nearbySearch, radarSearch callback, Both are the same + if (options.search || options.nearbySearch || options.radarSearch) { + var placeSearchRequest = { + bounds : options.bounds || null, + keyword : options.keyword || null, + location : options.location || null, + name : options.name || null, + radius : options.radius || null, + rankBy : options.rankBy || null, + types : options.types || null + }; + + if (options.radarSearch) { + layer.radarSearch(placeSearchRequest, options.radarSearch); + } + + if (options.search) { + layer.search(placeSearchRequest, options.search); + } + + if (options.nearbySearch) { + layer.nearbySearch(placeSearchRequest, options.nearbySearch); + } + } + + //textSearch callback + if (options.textSearch) { + var textSearchRequest = { + bounds : options.bounds || null, + location : options.location || null, + query : options.query || null, + radius : options.radius || null + }; + + layer.textSearch(textSearchRequest, options.textSearch); + } + break; + } + + if (layer !== undefined) { + if (typeof layer.setOptions == 'function') { + layer.setOptions(options); + } + if (typeof layer.setMap == 'function') { + layer.setMap(this.map); + } + + return layer; + } +}; + +GMaps.prototype.removeLayer = function(layer) { + if (typeof(layer) == "string" && this.singleLayers[layer] !== undefined) { + this.singleLayers[layer].setMap(null); + + delete this.singleLayers[layer]; + } + else { + for (var i = 0; i < this.layers.length; i++) { + if (this.layers[i] === layer) { + this.layers[i].setMap(null); + this.layers.splice(i, 1); + + break; + } + } + } +}; + +var travelMode, unitSystem; + +GMaps.prototype.getRoutes = function(options) { + switch (options.travelMode) { + case 'bicycling': + travelMode = google.maps.TravelMode.BICYCLING; + break; + case 'transit': + travelMode = google.maps.TravelMode.TRANSIT; + break; + case 'driving': + travelMode = google.maps.TravelMode.DRIVING; + break; + default: + travelMode = google.maps.TravelMode.WALKING; + break; + } + + if (options.unitSystem === 'imperial') { + unitSystem = google.maps.UnitSystem.IMPERIAL; + } + else { + unitSystem = google.maps.UnitSystem.METRIC; + } + + var base_options = { + avoidHighways: false, + avoidTolls: false, + optimizeWaypoints: false, + waypoints: [] + }, + request_options = extend_object(base_options, options); + + request_options.origin = /string/.test(typeof options.origin) ? options.origin : new google.maps.LatLng(options.origin[0], options.origin[1]); + request_options.destination = /string/.test(typeof options.destination) ? options.destination : new google.maps.LatLng(options.destination[0], options.destination[1]); + request_options.travelMode = travelMode; + request_options.unitSystem = unitSystem; + + delete request_options.callback; + delete request_options.error; + + var self = this, + routes = [], + service = new google.maps.DirectionsService(); + + service.route(request_options, function(result, status) { + if (status === google.maps.DirectionsStatus.OK) { + for (var r in result.routes) { + if (result.routes.hasOwnProperty(r)) { + routes.push(result.routes[r]); + } + } + + if (options.callback) { + options.callback(routes, result, status); + } + } + else { + if (options.error) { + options.error(result, status); + } + } + }); +}; + +GMaps.prototype.removeRoutes = function() { + this.routes.length = 0; +}; + +GMaps.prototype.getElevations = function(options) { + options = extend_object({ + locations: [], + path : false, + samples : 256 + }, options); + + if (options.locations.length > 0) { + if (options.locations[0].length > 0) { + options.locations = array_flat(array_map([options.locations], arrayToLatLng, false)); + } + } + + var callback = options.callback; + delete options.callback; + + var service = new google.maps.ElevationService(); + + //location request + if (!options.path) { + delete options.path; + delete options.samples; + + service.getElevationForLocations(options, function(result, status) { + if (callback && typeof(callback) === "function") { + callback(result, status); + } + }); + //path request + } else { + var pathRequest = { + path : options.locations, + samples : options.samples + }; + + service.getElevationAlongPath(pathRequest, function(result, status) { + if (callback && typeof(callback) === "function") { + callback(result, status); + } + }); + } +}; + +GMaps.prototype.cleanRoute = GMaps.prototype.removePolylines; + +GMaps.prototype.renderRoute = function(options, renderOptions) { + var self = this, + panel = ((typeof renderOptions.panel === 'string') ? document.getElementById(renderOptions.panel.replace('#', '')) : renderOptions.panel), + display; + + renderOptions.panel = panel; + renderOptions = extend_object({ + map: this.map + }, renderOptions); + display = new google.maps.DirectionsRenderer(renderOptions); + + this.getRoutes({ + origin: options.origin, + destination: options.destination, + travelMode: options.travelMode, + waypoints: options.waypoints, + unitSystem: options.unitSystem, + error: options.error, + avoidHighways: options.avoidHighways, + avoidTolls: options.avoidTolls, + optimizeWaypoints: options.optimizeWaypoints, + callback: function(routes, response, status) { + if (status === google.maps.DirectionsStatus.OK) { + display.setDirections(response); + } + } + }); +}; + +GMaps.prototype.drawRoute = function(options) { + var self = this; + + this.getRoutes({ + origin: options.origin, + destination: options.destination, + travelMode: options.travelMode, + waypoints: options.waypoints, + unitSystem: options.unitSystem, + error: options.error, + avoidHighways: options.avoidHighways, + avoidTolls: options.avoidTolls, + optimizeWaypoints: options.optimizeWaypoints, + callback: function(routes) { + if (routes.length > 0) { + var polyline_options = { + path: routes[routes.length - 1].overview_path, + strokeColor: options.strokeColor, + strokeOpacity: options.strokeOpacity, + strokeWeight: options.strokeWeight + }; + + if (options.hasOwnProperty("icons")) { + polyline_options.icons = options.icons; + } + + self.drawPolyline(polyline_options); + + if (options.callback) { + options.callback(routes[routes.length - 1]); + } + } + } + }); +}; + +GMaps.prototype.travelRoute = function(options) { + if (options.origin && options.destination) { + this.getRoutes({ + origin: options.origin, + destination: options.destination, + travelMode: options.travelMode, + waypoints : options.waypoints, + unitSystem: options.unitSystem, + error: options.error, + callback: function(e) { + //start callback + if (e.length > 0 && options.start) { + options.start(e[e.length - 1]); + } + + //step callback + if (e.length > 0 && options.step) { + var route = e[e.length - 1]; + if (route.legs.length > 0) { + var steps = route.legs[0].steps; + for (var i = 0, step; step = steps[i]; i++) { + step.step_number = i; + options.step(step, (route.legs[0].steps.length - 1)); + } + } + } + + //end callback + if (e.length > 0 && options.end) { + options.end(e[e.length - 1]); + } + } + }); + } + else if (options.route) { + if (options.route.legs.length > 0) { + var steps = options.route.legs[0].steps; + for (var i = 0, step; step = steps[i]; i++) { + step.step_number = i; + options.step(step); + } + } + } +}; + +GMaps.prototype.drawSteppedRoute = function(options) { + var self = this; + + if (options.origin && options.destination) { + this.getRoutes({ + origin: options.origin, + destination: options.destination, + travelMode: options.travelMode, + waypoints : options.waypoints, + error: options.error, + callback: function(e) { + //start callback + if (e.length > 0 && options.start) { + options.start(e[e.length - 1]); + } + + //step callback + if (e.length > 0 && options.step) { + var route = e[e.length - 1]; + if (route.legs.length > 0) { + var steps = route.legs[0].steps; + for (var i = 0, step; step = steps[i]; i++) { + step.step_number = i; + var polyline_options = { + path: step.path, + strokeColor: options.strokeColor, + strokeOpacity: options.strokeOpacity, + strokeWeight: options.strokeWeight + }; + + if (options.hasOwnProperty("icons")) { + polyline_options.icons = options.icons; + } + + self.drawPolyline(polyline_options); + options.step(step, (route.legs[0].steps.length - 1)); + } + } + } + + //end callback + if (e.length > 0 && options.end) { + options.end(e[e.length - 1]); + } + } + }); + } + else if (options.route) { + if (options.route.legs.length > 0) { + var steps = options.route.legs[0].steps; + for (var i = 0, step; step = steps[i]; i++) { + step.step_number = i; + var polyline_options = { + path: step.path, + strokeColor: options.strokeColor, + strokeOpacity: options.strokeOpacity, + strokeWeight: options.strokeWeight + }; + + if (options.hasOwnProperty("icons")) { + polyline_options.icons = options.icons; + } + + self.drawPolyline(polyline_options); + options.step(step); + } + } + } +}; + +GMaps.Route = function(options) { + this.origin = options.origin; + this.destination = options.destination; + this.waypoints = options.waypoints; + + this.map = options.map; + this.route = options.route; + this.step_count = 0; + this.steps = this.route.legs[0].steps; + this.steps_length = this.steps.length; + + var polyline_options = { + path: new google.maps.MVCArray(), + strokeColor: options.strokeColor, + strokeOpacity: options.strokeOpacity, + strokeWeight: options.strokeWeight + }; + + if (options.hasOwnProperty("icons")) { + polyline_options.icons = options.icons; + } + + this.polyline = this.map.drawPolyline(polyline_options).getPath(); +}; + +GMaps.Route.prototype.getRoute = function(options) { + var self = this; + + this.map.getRoutes({ + origin : this.origin, + destination : this.destination, + travelMode : options.travelMode, + waypoints : this.waypoints || [], + error: options.error, + callback : function() { + self.route = e[0]; + + if (options.callback) { + options.callback.call(self); + } + } + }); +}; + +GMaps.Route.prototype.back = function() { + if (this.step_count > 0) { + this.step_count--; + var path = this.route.legs[0].steps[this.step_count].path; + + for (var p in path){ + if (path.hasOwnProperty(p)){ + this.polyline.pop(); + } + } + } +}; + +GMaps.Route.prototype.forward = function() { + if (this.step_count < this.steps_length) { + var path = this.route.legs[0].steps[this.step_count].path; + + for (var p in path){ + if (path.hasOwnProperty(p)){ + this.polyline.push(path[p]); + } + } + this.step_count++; + } +}; + +GMaps.prototype.checkGeofence = function(lat, lng, fence) { + return fence.containsLatLng(new google.maps.LatLng(lat, lng)); +}; + +GMaps.prototype.checkMarkerGeofence = function(marker, outside_callback) { + if (marker.fences) { + for (var i = 0, fence; fence = marker.fences[i]; i++) { + var pos = marker.getPosition(); + if (!this.checkGeofence(pos.lat(), pos.lng(), fence)) { + outside_callback(marker, fence); + } + } + } +}; + +GMaps.prototype.toImage = function(options) { + var options = options || {}, + static_map_options = {}; + + static_map_options['size'] = options['size'] || [this.el.clientWidth, this.el.clientHeight]; + static_map_options['lat'] = this.getCenter().lat(); + static_map_options['lng'] = this.getCenter().lng(); + + if (this.markers.length > 0) { + static_map_options['markers'] = []; + + for (var i = 0; i < this.markers.length; i++) { + static_map_options['markers'].push({ + lat: this.markers[i].getPosition().lat(), + lng: this.markers[i].getPosition().lng() + }); + } + } + + if (this.polylines.length > 0) { + var polyline = this.polylines[0]; + + static_map_options['polyline'] = {}; + static_map_options['polyline']['path'] = google.maps.geometry.encoding.encodePath(polyline.getPath()); + static_map_options['polyline']['strokeColor'] = polyline.strokeColor + static_map_options['polyline']['strokeOpacity'] = polyline.strokeOpacity + static_map_options['polyline']['strokeWeight'] = polyline.strokeWeight + } + + return GMaps.staticMapURL(static_map_options); +}; + +GMaps.staticMapURL = function(options){ + var parameters = [], + data, + static_root = (location.protocol === 'file:' ? 'http:' : location.protocol ) + '//maps.googleapis.com/maps/api/staticmap'; + + if (options.url) { + static_root = options.url; + delete options.url; + } + + static_root += '?'; + + var markers = options.markers; + + delete options.markers; + + if (!markers && options.marker) { + markers = [options.marker]; + delete options.marker; + } + + var styles = options.styles; + + delete options.styles; + + var polyline = options.polyline; + delete options.polyline; + + /** Map options **/ + if (options.center) { + parameters.push('center=' + options.center); + delete options.center; + } + else if (options.address) { + parameters.push('center=' + options.address); + delete options.address; + } + else if (options.lat) { + parameters.push(['center=', options.lat, ',', options.lng].join('')); + delete options.lat; + delete options.lng; + } + else if (options.visible) { + var visible = encodeURI(options.visible.join('|')); + parameters.push('visible=' + visible); + } + + var size = options.size; + if (size) { + if (size.join) { + size = size.join('x'); + } + delete options.size; + } + else { + size = '630x300'; + } + parameters.push('size=' + size); + + if (!options.zoom && options.zoom !== false) { + options.zoom = 15; + } + + var sensor = options.hasOwnProperty('sensor') ? !!options.sensor : true; + delete options.sensor; + parameters.push('sensor=' + sensor); + + for (var param in options) { + if (options.hasOwnProperty(param)) { + parameters.push(param + '=' + options[param]); + } + } + + /** Markers **/ + if (markers) { + var marker, loc; + + for (var i = 0; data = markers[i]; i++) { + marker = []; + + if (data.size && data.size !== 'normal') { + marker.push('size:' + data.size); + delete data.size; + } + else if (data.icon) { + marker.push('icon:' + encodeURI(data.icon)); + delete data.icon; + } + + if (data.color) { + marker.push('color:' + data.color.replace('#', '0x')); + delete data.color; + } + + if (data.label) { + marker.push('label:' + data.label[0].toUpperCase()); + delete data.label; + } + + loc = (data.address ? data.address : data.lat + ',' + data.lng); + delete data.address; + delete data.lat; + delete data.lng; + + for(var param in data){ + if (data.hasOwnProperty(param)) { + marker.push(param + ':' + data[param]); + } + } + + if (marker.length || i === 0) { + marker.push(loc); + marker = marker.join('|'); + parameters.push('markers=' + encodeURI(marker)); + } + // New marker without styles + else { + marker = parameters.pop() + encodeURI('|' + loc); + parameters.push(marker); + } + } + } + + /** Map Styles **/ + if (styles) { + for (var i = 0; i < styles.length; i++) { + var styleRule = []; + if (styles[i].featureType){ + styleRule.push('feature:' + styles[i].featureType.toLowerCase()); + } + + if (styles[i].elementType) { + styleRule.push('element:' + styles[i].elementType.toLowerCase()); + } + + for (var j = 0; j < styles[i].stylers.length; j++) { + for (var p in styles[i].stylers[j]) { + var ruleArg = styles[i].stylers[j][p]; + if (p == 'hue' || p == 'color') { + ruleArg = '0x' + ruleArg.substring(1); + } + styleRule.push(p + ':' + ruleArg); + } + } + + var rule = styleRule.join('|'); + if (rule != '') { + parameters.push('style=' + rule); + } + } + } + + /** Polylines **/ + function parseColor(color, opacity) { + if (color[0] === '#'){ + color = color.replace('#', '0x'); + + if (opacity) { + opacity = parseFloat(opacity); + opacity = Math.min(1, Math.max(opacity, 0)); + if (opacity === 0) { + return '0x00000000'; + } + opacity = (opacity * 255).toString(16); + if (opacity.length === 1) { + opacity += opacity; + } + + color = color.slice(0,8) + opacity; + } + } + return color; + } + + if (polyline) { + data = polyline; + polyline = []; + + if (data.strokeWeight) { + polyline.push('weight:' + parseInt(data.strokeWeight, 10)); + } + + if (data.strokeColor) { + var color = parseColor(data.strokeColor, data.strokeOpacity); + polyline.push('color:' + color); + } + + if (data.fillColor) { + var fillcolor = parseColor(data.fillColor, data.fillOpacity); + polyline.push('fillcolor:' + fillcolor); + } + + var path = data.path; + if (path.join) { + for (var j=0, pos; pos=path[j]; j++) { + polyline.push(pos.join(',')); + } + } + else { + polyline.push('enc:' + path); + } + + polyline = polyline.join('|'); + parameters.push('path=' + encodeURI(polyline)); + } + + /** Retina support **/ + var dpi = window.devicePixelRatio || 1; + parameters.push('scale=' + dpi); + + parameters = parameters.join('&'); + return static_root + parameters; +}; + +GMaps.prototype.addMapType = function(mapTypeId, options) { + if (options.hasOwnProperty("getTileUrl") && typeof(options["getTileUrl"]) == "function") { + options.tileSize = options.tileSize || new google.maps.Size(256, 256); + + var mapType = new google.maps.ImageMapType(options); + + this.map.mapTypes.set(mapTypeId, mapType); + } + else { + throw "'getTileUrl' function required."; + } +}; + +GMaps.prototype.addOverlayMapType = function(options) { + if (options.hasOwnProperty("getTile") && typeof(options["getTile"]) == "function") { + var overlayMapTypeIndex = options.index; + + delete options.index; + + this.map.overlayMapTypes.insertAt(overlayMapTypeIndex, options); + } + else { + throw "'getTile' function required."; + } +}; + +GMaps.prototype.removeOverlayMapType = function(overlayMapTypeIndex) { + this.map.overlayMapTypes.removeAt(overlayMapTypeIndex); +}; + +GMaps.prototype.addStyle = function(options) { + var styledMapType = new google.maps.StyledMapType(options.styles, { name: options.styledMapName }); + + this.map.mapTypes.set(options.mapTypeId, styledMapType); +}; + +GMaps.prototype.setStyle = function(mapTypeId) { + this.map.setMapTypeId(mapTypeId); +}; + +GMaps.prototype.createPanorama = function(streetview_options) { + if (!streetview_options.hasOwnProperty('lat') || !streetview_options.hasOwnProperty('lng')) { + streetview_options.lat = this.getCenter().lat(); + streetview_options.lng = this.getCenter().lng(); + } + + this.panorama = GMaps.createPanorama(streetview_options); + + this.map.setStreetView(this.panorama); + + return this.panorama; +}; + +GMaps.createPanorama = function(options) { + var el = getElementById(options.el, options.context); + + options.position = new google.maps.LatLng(options.lat, options.lng); + + delete options.el; + delete options.context; + delete options.lat; + delete options.lng; + + var streetview_events = ['closeclick', 'links_changed', 'pano_changed', 'position_changed', 'pov_changed', 'resize', 'visible_changed'], + streetview_options = extend_object({visible : true}, options); + + for (var i = 0; i < streetview_events.length; i++) { + delete streetview_options[streetview_events[i]]; + } + + var panorama = new google.maps.StreetViewPanorama(el, streetview_options); + + for (var i = 0; i < streetview_events.length; i++) { + (function(object, name) { + if (options[name]) { + google.maps.event.addListener(object, name, function(){ + options[name].apply(this); + }); + } + })(panorama, streetview_events[i]); + } + + return panorama; +}; + +GMaps.prototype.on = function(event_name, handler) { + return GMaps.on(event_name, this, handler); +}; + +GMaps.prototype.off = function(event_name) { + GMaps.off(event_name, this); +}; + +GMaps.prototype.once = function(event_name, handler) { + return GMaps.once(event_name, this, handler); +}; + +GMaps.custom_events = ['marker_added', 'marker_removed', 'polyline_added', 'polyline_removed', 'polygon_added', 'polygon_removed', 'geolocated', 'geolocation_failed']; + +GMaps.on = function(event_name, object, handler) { + if (GMaps.custom_events.indexOf(event_name) == -1) { + if(object instanceof GMaps) object = object.map; + return google.maps.event.addListener(object, event_name, handler); + } + else { + var registered_event = { + handler : handler, + eventName : event_name + }; + + object.registered_events[event_name] = object.registered_events[event_name] || []; + object.registered_events[event_name].push(registered_event); + + return registered_event; + } +}; + +GMaps.off = function(event_name, object) { + if (GMaps.custom_events.indexOf(event_name) == -1) { + if(object instanceof GMaps) object = object.map; + google.maps.event.clearListeners(object, event_name); + } + else { + object.registered_events[event_name] = []; + } +}; + +GMaps.once = function(event_name, object, handler) { + if (GMaps.custom_events.indexOf(event_name) == -1) { + if(object instanceof GMaps) object = object.map; + return google.maps.event.addListenerOnce(object, event_name, handler); + } +}; + +GMaps.fire = function(event_name, object, scope) { + if (GMaps.custom_events.indexOf(event_name) == -1) { + google.maps.event.trigger(object, event_name, Array.prototype.slice.apply(arguments).slice(2)); + } + else { + if(event_name in scope.registered_events) { + var firing_events = scope.registered_events[event_name]; + + for(var i = 0; i < firing_events.length; i++) { + (function(handler, scope, object) { + handler.apply(scope, [object]); + })(firing_events[i]['handler'], scope, object); + } + } + } +}; + +GMaps.geolocate = function(options) { + var complete_callback = options.always || options.complete; + + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(function(position) { + options.success(position); + + if (complete_callback) { + complete_callback(); + } + }, function(error) { + options.error(error); + + if (complete_callback) { + complete_callback(); + } + }, options.options); + } + else { + options.not_supported(); + + if (complete_callback) { + complete_callback(); + } + } +}; + +GMaps.geocode = function(options) { + this.geocoder = new google.maps.Geocoder(); + var callback = options.callback; + if (options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) { + options.latLng = new google.maps.LatLng(options.lat, options.lng); + } + + delete options.lat; + delete options.lng; + delete options.callback; + + this.geocoder.geocode(options, function(results, status) { + callback(results, status); + }); +}; + +if (typeof window.google === 'object' && window.google.maps) { + //========================== + // Polygon containsLatLng + // https://github.com/tparkin/Google-Maps-Point-in-Polygon + // Poygon getBounds extension - google-maps-extensions + // http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js + if (!google.maps.Polygon.prototype.getBounds) { + google.maps.Polygon.prototype.getBounds = function(latLng) { + var bounds = new google.maps.LatLngBounds(); + var paths = this.getPaths(); + var path; + + for (var p = 0; p < paths.getLength(); p++) { + path = paths.getAt(p); + for (var i = 0; i < path.getLength(); i++) { + bounds.extend(path.getAt(i)); + } + } + + return bounds; + }; + } + + if (!google.maps.Polygon.prototype.containsLatLng) { + // Polygon containsLatLng - method to determine if a latLng is within a polygon + google.maps.Polygon.prototype.containsLatLng = function(latLng) { + // Exclude points outside of bounds as there is no way they are in the poly + var bounds = this.getBounds(); + + if (bounds !== null && !bounds.contains(latLng)) { + return false; + } + + // Raycast point in polygon method + var inPoly = false; + + var numPaths = this.getPaths().getLength(); + for (var p = 0; p < numPaths; p++) { + var path = this.getPaths().getAt(p); + var numPoints = path.getLength(); + var j = numPoints - 1; + + for (var i = 0; i < numPoints; i++) { + var vertex1 = path.getAt(i); + var vertex2 = path.getAt(j); + + if (vertex1.lng() < latLng.lng() && vertex2.lng() >= latLng.lng() || vertex2.lng() < latLng.lng() && vertex1.lng() >= latLng.lng()) { + if (vertex1.lat() + (latLng.lng() - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < latLng.lat()) { + inPoly = !inPoly; + } + } + + j = i; + } + } + + return inPoly; + }; + } + + if (!google.maps.Circle.prototype.containsLatLng) { + google.maps.Circle.prototype.containsLatLng = function(latLng) { + if (google.maps.geometry) { + return google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius(); + } + else { + return true; + } + }; + } + + google.maps.Rectangle.prototype.containsLatLng = function(latLng) { + return this.getBounds().contains(latLng); + }; + + google.maps.LatLngBounds.prototype.containsLatLng = function(latLng) { + return this.contains(latLng); + }; + + google.maps.Marker.prototype.setFences = function(fences) { + this.fences = fences; + }; + + google.maps.Marker.prototype.addFence = function(fence) { + this.fences.push(fence); + }; + + google.maps.Marker.prototype.getId = function() { + return this['__gm_id']; + }; +} + +//========================== +// Array indexOf +// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) { + "use strict"; + if (this == null) { + throw new TypeError(); + } + var t = Object(this); + var len = t.length >>> 0; + if (len === 0) { + return -1; + } + var n = 0; + if (arguments.length > 1) { + n = Number(arguments[1]); + if (n != n) { // shortcut for verifying if it's NaN + n = 0; + } else if (n != 0 && n != Infinity && n != -Infinity) { + n = (n > 0 || -1) * Math.floor(Math.abs(n)); + } + } + if (n >= len) { + return -1; + } + var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0); + for (; k < len; k++) { + if (k in t && t[k] === searchElement) { + return k; + } + } + return -1; + } +} + +return GMaps; +})); diff --git a/OddJobb/www/js/messages.js b/OddJobb/www/js/messages.js index ff7c489..5c9522b 100644 --- a/OddJobb/www/js/messages.js +++ b/OddJobb/www/js/messages.js @@ -1,26 +1,95 @@ // JavaScript source code //Js file that deal with the messages +var prevMsgs = {}; -function messagesMain() { - var msgHandler = new Framework7(); - var $$ = Dom7; - var messages = msgHandler.messages('.messages'); - var msgBar = msgHandler.messagebar('.messagebar'); - var currentMsg = ""; +var msgTemplate = '{{#if day}}' + + '
    {{day}} {{#if time}}, {{time}}{{/if}}
    ' + + '{{/if}}' + + '
    ' + + '{{#if name}}
    {{name}}
    {{/if}}' + + '
    {{text}}{{#if date}}
    {{date}}
    {{/if}}
    ' + + '{{#if avatar}}
    {{/if}}' + + '{{#if label}}
    {{label}}
    {{/if}}' + + '
    '; - $$('.messagebar').on('click', function () { - currentMsg = msgBar.value().trim(); - msgBar.clear(); - messages.add +var error = ""; - messages.addMessage({ - text: currentMsg, - name: "Mateo" +function sendMessage(personName, email) { + var msgHandler = new Framework7(); + var $$ = Dom7; + var messages = msgHandler.messages('.messages', { messageTemplate: msgTemplate }); + var msgBar = msgHandler.messagebar('.messagebar'); + var currentMsg = ""; + + //Really only applicable to desktop version + $$('.messagebar').on('keypress', function (e) { + if (e.keyCode === 13) { + sendMsg(); + } + }) + $$('.messagebar').on('click', function () { + sendMsg(); + }) + + var sendMsg = function () { + var msgId = newId(1000); + currentMsg = msgBar.value().trim(); + msgBar.clear(); + messages.addMessage({ + text: currentMsg, + name: personName, + id: msgId + }, "append", true); + + $.post("http://oddjobbackend.herokuapp.com/newMessage?email=" + email + "&name=" + personName + "&message="+ currentMsg + "&personSent=(PERSONSENT)&id="+ msgId, function(data){ + console.log("Message submitted " + data); + }); + } + printErr(error); +}; + +//Load messages of a particular person. +var getMessages = function (personEmail, callback) { + var msgHandler = new Framework7(); + var $$ = Dom7; + + var allMessages = msgHandler.messages('.messages', { messageTemplate: msgTemplate }); + var msgBar = msgHandler.messagebar('.messagebar'); + var pMsgs = []; + + $.get("http://oddjobbackend.herokuapp.com/messages", function(data){ + for(var i = 0; i < data.length; i++){ + var currentM = data[i]; + //Get all messages + if(personEmail === undefined){ + pMsgs.push(currentM); + } + else if(currentM.email === personEmail && currentM.message !== "()"){ + pMsgs.push(currentM); + allMessages.addMessage({ + text: currentM.message, + name: currentM.name, + id: currentM.id }, "append", true); + console.log("Message Added by: " + personEmail); + + } + } + + + }); + return pMsgs; + +} - }) +var newId = function(range){ + var res = Math.floor(Math.random() * range); + return res; +} -}; \ No newline at end of file +var printErr = function(err){ + console.log(err); +} diff --git a/OddJobb/www/js/my-app.js b/OddJobb/www/js/my-app.js index 82db95b..237cd9f 100644 --- a/OddJobb/www/js/my-app.js +++ b/OddJobb/www/js/my-app.js @@ -1,76 +1,109 @@ // Initialize app -var myApp = new Framework7(); +var myApp = new Framework7({ + swipePanel: 'left' +}); // If we need to use custom DOM library, let's save it to $$ variable: var $$ = Dom7; // Add view var mainView = myApp.addView('.view-main', { - // Because we want to use dynamic navbar, we need to enable it for this view: dynamicNavbar: true }); // Handle Cordova Device Ready Event $$(document).on('deviceready', function () { + window.user = false; + window.login = false; + document.getElementById('createPost').style.display = 'none'; + document.getElementById('viewMessages').style.display = 'none'; + document.getElementById('profile').style.display = 'none'; + document.getElementById('logout').style.display = 'none'; + document.getElementById('myPost').style.display = 'none'; console.log("Device is ready!"); + $.get('https://oddjobbackend.herokuapp.com/users', function(data){ + users = data; + console.log(users); + window.MyLib = users; + + }); + $$('#login-box-link').on('click', function(e){ + var username = document.getElementById('username').value; + var password = document.getElementById('pass').value; + var users = window.MyLib; + + console.log('users',users); + if(username === '') { + myApp.alert('Oops! You left your username blank', 'Blank Username'); + + } + + else if(password === '') { + myApp.alert('Oops! You left your password blank', "Blank Password"); + + + } + else if(isPasswordCorrect(username, password, users)) { + //set global variable to indicate correct login + myApp.alert('Welcome ' + username + '! You are now logged in.', "Welcome"); + window.user = username; + window.login = true; + document.getElementById('createPost').style.display = 'block'; + document.getElementById('viewMessages').style.display = 'block'; + document.getElementById('profile').style.display = 'block'; + document.getElementById('logout').style.display = 'block'; + document.getElementById('myPost').style.display = 'block'; + mainView.router.loadPage({url:'postList.html', ignoreCache:true, reload:true }); + + } + + else { + + myApp.alert('Incorrect password!', 'Error!'); + + } + + }); }); -// Now we need to run the code that will be executed only for About page. - -// Option 1. Using page callback for page (for "about" page in this case) (recommended way): -myApp.onPageInit('about', function (page) { - // Do something here for "about" page - myApp.alert('Here comes About page'); -}) - -myApp.onPageInit('login', function (page) { -}) - -myApp.onPageInit('post', function (page) { - console.log(page.query); - /* - 1. Do AJAX call to get post based on postID - 2. Generate post data! - */ - -}) - -myApp.onPageInit('postList', function (page) { - console.log('posted!'); - - /* - 1. Do AJAX call - 2. Put data into Array - 3. Set array - */ - - const posts = [ - /* - { - title: 'Need people to show shovel for me tomorrow!', - text: 'House is not too large, so should not be an issue!', - price: '5', - postalCode: '5' - - }*/ - ]; - - for (var i = 0; i < 50; i++) { - posts.push({ - item: i - }); +function isPasswordCorrect(username, password, users) { + for(var i=0; i < users.length; i++) { + if(users[i].email === username && users[i].password === password) { + return true; + } - const myList = myApp.virtualList('.list-block.virtual-list', { - items: posts, - template: - '
  • ' + - '' + - '
    {{item}}
    ' + - '    ' + - '
    • ' + - '' - }); -}) + else if(users[i].email === username) { + + return false; + + } + + } + +} + +function logout(e) { + + if(window.login === true) { + myApp.alert('Goodbye '+ window.user + ' You have been logged out!', "Goodbye!"); + window.user = false; + window.login = false; + document.getElementById('createPost').style.display = 'none'; + document.getElementById('viewMessages').style.display = 'none'; + document.getElementById('profile').style.display = 'none'; + document.getElementById('logout').style.display = 'none'; + mainView.router.loadPage({url:'index.html', ignoreCache:true, reload:true }); + } + + else { + myApp.alert('You can\'t log out if you\'re not logged in'); + + + } + + + +} diff --git a/OddJobb/www/lib/framework7/css/framework7.ios.css b/OddJobb/www/lib/framework7/css/framework7.ios.css index c520289..6a67759 100755 --- a/OddJobb/www/lib/framework7/css/framework7.ios.css +++ b/OddJobb/www/lib/framework7/css/framework7.ios.css @@ -1,17 +1,17 @@ /** * Framework7 1.4.0 * Full Featured Mobile HTML Framework For Building iOS & Android Apps - * + * * iOS Theme * * http://www.idangero.us/framework7 - * + * * Copyright 2015, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ - * + * * Licensed under MIT - * + * * Released on: December 7, 2015 */ html, @@ -4279,7 +4279,7 @@ html.pixel-ratio-3 .picker-modal.smart-select-picker .toolbar:after { .panel { z-index: 1000; display: none; - background: #111; + background: purple; box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; @@ -4296,6 +4296,12 @@ html.pixel-ratio-3 .picker-modal.smart-select-picker .toolbar:after { z-index: 6000; left: -260px; } + +.page-content { + background-image: url("../../../img/purple.png"); + + +} .panel.panel-left.panel-reveal { left: 0; } diff --git a/OddJobb/www/login.html b/OddJobb/www/login.html index e69de29..1fe74e0 100644 --- a/OddJobb/www/login.html +++ b/OddJobb/www/login.html @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + OddJobbs - Register + + + + + + + + + + + +
    + + +
    + +
    +
    +
    Navigation
    +
    + +
    +
    +
    + + +
    + +
    + +
    +
    + +
    Odd Jobb
    +
    + + +
    +
    +
    + +
    + +
    + +
    +
    + + +
    +
    +
    +
    + +
    +
    + + Link 1 + Link 2 +
    +
    +
    +
    + + + + + + + + + diff --git a/OddJobb/www/messagebar.html b/OddJobb/www/messagebar.html index 1a06591..9b895f0 100644 --- a/OddJobb/www/messagebar.html +++ b/OddJobb/www/messagebar.html @@ -1,5 +1,9 @@ -
    -
    - Send -
    -
    \ No newline at end of file + + + + +
    +
    + Send +
    +
    \ No newline at end of file diff --git a/OddJobb/www/messages.html b/OddJobb/www/messages.html index 066c83a..76815be 100644 --- a/OddJobb/www/messages.html +++ b/OddJobb/www/messages.html @@ -1,36 +1,30 @@ -
    -
    -
    -
    Sunday, Feb 9 12:58
    -
    -
    Hello
    + + + +
    +
    +
    + + + Back +
    -
    -
    How are you?
    -
    -
    -
    Kate
    -
    I am fine, thanks
    -
    -
    -
    Sunday, Feb 3 11:58
    -
    -
    Nice photo?
    -
    -
    -
    -
    Delivered
    -
    -
    -
    Kate
    -
    Wow, awesome!
    -
    + +
    Messages
    +
    +
    -
    -
    - Send +
    + +
    +
    +
    +
    + +
    -
    +
    -
    \ No newline at end of file + + \ No newline at end of file diff --git a/OddJobb/www/myPosts.html b/OddJobb/www/myPosts.html new file mode 100644 index 0000000..1d94399 --- /dev/null +++ b/OddJobb/www/myPosts.html @@ -0,0 +1,26 @@ + +
    +
    +
    + + + Back + +
    +
    Posts
    +
    + +
    +
    +
    + +
    +
    +
    +
    Name
    +
    + +
    +
    +
    +
    \ No newline at end of file diff --git a/OddJobb/www/post.html b/OddJobb/www/post.html index 53df0f3..d63442c 100644 --- a/OddJobb/www/post.html +++ b/OddJobb/www/post.html @@ -7,7 +7,7 @@ Back
    -
    Posts
    +
    Profile
    @@ -17,6 +17,10 @@
    +
    +
    + +
    \ No newline at end of file diff --git a/OddJobb/www/postList.html b/OddJobb/www/postList.html index 699493c..6a50b3d 100644 --- a/OddJobb/www/postList.html +++ b/OddJobb/www/postList.html @@ -17,7 +17,12 @@
    -
    +
    Name
    +
    + + Submit +
    +
    diff --git a/OddJobb/www/profile.html b/OddJobb/www/profile.html new file mode 100644 index 0000000..5b078ca --- /dev/null +++ b/OddJobb/www/profile.html @@ -0,0 +1,78 @@ + + +
    +
    +
    + + + Back + +
    +
    Profile
    +
    + +
    +
    +
    +
    +
    +
    +
    + +

    Update Profile

    +
    +
    +
      +
    • +
      +
      First Name
      +
      + +
      +
      +
      • +
    • +
      +
      Last Name
      +
      + +
      +
      +
      • +
    • +
      +
      Email
      +
      + +
      +
      +
      • +
    • +
      +
      Phone
      +
      + +
      +
      +
      • +
    • +
      +
      Password
      +
      + +
      +
      +
      • +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    diff --git a/OddJobb/www/register.html b/OddJobb/www/register.html new file mode 100644 index 0000000..f055249 --- /dev/null +++ b/OddJobb/www/register.html @@ -0,0 +1,168 @@ + + + + + + + + + + + + + + + + OddJobbs + + + + + + + + + + + +
    + + +
    + +
    +
    +
    Navigation
    +
    + +
    +
    +
    + + +
    + +
    + +
    +
    + +
    Register
    +
    + + +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    +
      +
    • +
      +
      First Name
      +
      + +
      +
      +
      • +
    • +
      +
      Last Name
      +
      + +
      +
      +
      • +
    • +
      +
      Email
      +
      + +
      +
      +
      • +
    • +
      +
      Phone
      +
      + +
      +
      +
      • +
    • +
      +
      Password
      +
      + +
      +
      +
      • +
    +
    +
    + +
    +
    +
    +

    Already have an account? Login +

    +
    +
    +
    +
    + +
    +
    + + Link 1 + Link 2 +
    +
    +
    +
    + + + + + + + +