Skip to content

New mat branch #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 25, 2017
Merged

New mat branch #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a9a5e9d
no message
mateon-360 Mar 24, 2017
0cd8b4d
sdfsedfs
mateon-360 Mar 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions OddJobb/www/css/StyleSheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
body {
}

.message{
display: none;
}
10 changes: 10 additions & 0 deletions OddJobb/www/css/message.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
body {
}

.hidden{
display: none;
}

.visible{
display: inline;
}
81 changes: 45 additions & 36 deletions OddJobb/www/indMsg.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,52 @@
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<!---->
<div class="center sliding">Messages</div>
<div class="right">
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
<html>
<head>
<link rel="stylesheet" href="css/message.css">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<!---->
<div class="center sliding"><label id="currentPerson"></label></div>
<div class="right">
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
</div>
</div>
</div>
</div>

<div class="page toolbar-fixed" data-page="indMsg">
<div class="page-content messages-content">
<div class="messages">
<div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
<div class="message message-sent">
<div class="message-text">Hello</div>
</div>
<div class="message message-sent">
<div class="message-text">How are you?</div>
<div class="page toolbar-fixed" data-page="indMsg">
<div class="page-content messages-content">
<div class="messages">

<div class="messages-date hidden">Sunday, Feb 9 <span>12:58</span></div>
<div class="message message-sent hidden">
<div class="message-text">Hello</div>
</div>
<div class="message message-sent hidden">
<div class="message-text hidden">How are you?</div>
</div>
<div class="message message-received hidden">
<div class="message-name Kate hidden">Kate</div>
<div class="message-text hidden">I am fine, thanks</div>
<div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar hidden"></div>
</div>
<div class="messages-date hidden">Sunday, Feb 3 <span>11:58</span></div>
<div class="message message-sent hidden">
<div class="message-text hidden">Nice photo?</div>
</div>

</div>
<div class="message message-received">
<div class="message-name">Kate</div>
<div class="message-text">I am fine, thanks</div>
<div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
</div>
<div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
<div class="message message-sent">
<div class="message-text">Nice photo?</div>
</div>
</div>
<div class="toolbar messagebar">
<div class="toolbar-inner">
<textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
<div class="toolbar messagebar" style="">
<div class="toolbar-inner">
<textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion OddJobb/www/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
</div>

<!-- Views -->
<div class="views">
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Top Navbar-->
Expand Down
65 changes: 57 additions & 8 deletions OddJobb/www/js/messages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,39 @@
//Js file that deal with the messages


function messagesMain() {
var msgTemplate = '{{#if day}}' +
'<div class="messages-date">{{day}} {{#if time}}, <span>{{time}}</span>{{/if}}</div>' +
'{{/if}}' +
'<div class="message message-{{type}} {{id}} hidden {{#if hasImage}}message-pic{{/if}} {{#if avatar}}message-with-avatar{{/if}} {{#if position}}message-appear-from-{{position}}{{/if}}">' +
'{{#if name}}<div class="message-name {{id}} hidden">{{name}}</div>{{/if}}' +
'<div class="message-text {{id}}">{{text}}{{#if date}}<div class="message-date hidden">{{date}}</div>{{/if}}</div>' +
'{{#if avatar}}<div class="message-avatar" style="background-image:url({{avatar}})"></div>{{/if}}' +
'{{#if label}}<div class="message-label">{{label}}</div>{{/if}}' +
'</div>';

var error = "";

function messagesMain(queryParams) {
var msgHandler = new Framework7();
var $$ = Dom7;

var messages = msgHandler.messages('.messages');
var messages = msgHandler.messages('.messages', { messageTemplate: msgTemplate });
var msgBar = msgHandler.messagebar('.messagebar');
var currentMsg = "";

//Have to read from api to know which user to read from
//console.log(queryParams);
var prevMessages = loadMessages(queryParams);

//Really only applicable to desktop version
$$('.messagebar').on('keypress', function (e) {
if (e.keyCode == 13) {
if (e.keyCode === 13) {
sendMsg();
}
})

$$('.messagebar').on('click', function () {
sendMsg();

})

var sendMsg = function () {
Expand All @@ -27,10 +43,43 @@ function messagesMain() {

messages.addMessage({
text: currentMsg,
name: "Mateo"

name: "Mateo",
id: "Mateo"
}, "append", true);
console.log("message sent");

console.log("message sent");
}

};
printErr(error);

};

//Load messages of a particular person.
var loadMessages = function (person) {
allMsgs = $$("." + person);
console.log(allMsgs);
allMsgs.addClass("visible");
allMsgs.removeClass("hidden");

/*
var msgs = $$("." + person);
if (msgs === null) {
error = "Invalid Person Called";
return;
}
var people = [];
for (var i = 0; i < msgs.length; i++) {
var current = msgs[i];
if (people.indexOf(current.innerHTML) === -1) {
people.push(current);
}
}
//console.log(people);
return people;
*/
}


var printErr = function(err){
console.log(err);
}
26 changes: 6 additions & 20 deletions OddJobb/www/js/my-app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,31 +28,17 @@ myApp.onPageInit('about', function (page) {

//Each message Page
myApp.onPageInit('indMsg', function (page) {
messagesMain();
var queryParams = page.query["messageId"];
var title = document.getElementById("currentPerson");
title.innerHTML = queryParams;
messagesMain(queryParams);
})

//Messages Page
myApp.onPageInit('messages', function (page) {
//messagesMain();
/*
1. Do AJAX call
2. Put data into Array
3. Set array
*/
const people = [
/*
{
name: nameOfPerson
message: This is a mess...

}*/
];

for (var i = 0; i < 10; i++) {
people.push({
item: i
});
}
//Will be reading this from the database
const people = [{ item: "Mateo" }, { item: "Holly" }, { item: "Anthony" }, { item: "Haowei" }];

const myListOfPeople = myApp.virtualList('.list-block.virtual-list', {
items: people,
Expand Down
43 changes: 24 additions & 19 deletions OddJobb/www/messages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,30 @@
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<!---->
<div class="center sliding">Messages</div>
<div class="right">
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
<html>
<head></head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<!---->
<div class="center sliding">Messages</div>
<div class="right">
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
</div>
</div>
</div>
</div>

<div class="pages">
<div data-page="messages" class="page">
<div class="page-content">
<div class="list-block virtual-list">
<a href="#"></a>
<div class="pages">
<div data-page="messages" class="page">
<div class="page-content">
<div class="list-block virtual-list">
<a href="#"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>