Skip to content

Commit 1ac5c01

Browse files
hw2zhenghw2zheng
authored
Merge pull request #3 from AGWeb18/newMatBranch
New mat branch
2 parents e07fb9b + 0cd8b4d commit 1ac5c01

File tree

7 files changed

+149
-84
lines changed

7 files changed

+149
-84
lines changed

‎OddJobb/www/css/StyleSheet.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
body {
2+
}
3+
4+
.message{
5+
display: none;
6+
}

‎OddJobb/www/css/message.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
body {
2+
}
3+
4+
.hidden{
5+
display: none;
6+
}
7+
8+
.visible{
9+
display: inline;
10+
}

‎OddJobb/www/indMsg.html‎

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,52 @@
1-
<div class="navbar">
2-
<div class="navbar-inner">
3-
<div class="left">
4-
<a href="#" class="back link">
5-
<i class="icon icon-back"></i>
6-
<span>Back</span>
7-
</a>
8-
</div>
9-
<!---->
10-
<div class="center sliding">Messages</div>
11-
<div class="right">
12-
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="css/message.css">
4+
</head>
5+
<body>
6+
<div class="navbar">
7+
<div class="navbar-inner">
8+
<div class="left">
9+
<a href="#" class="back link">
10+
<i class="icon icon-back"></i>
11+
<span>Back</span>
12+
</a>
13+
</div>
14+
<!---->
15+
<div class="center sliding"><label id="currentPerson"></label></div>
16+
<div class="right">
17+
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
18+
</div>
1319
</div>
1420
</div>
15-
</div>
1621

17-
<div class="page toolbar-fixed" data-page="indMsg">
18-
<div class="page-content messages-content">
19-
<div class="messages">
20-
<div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
21-
<div class="message message-sent">
22-
<div class="message-text">Hello</div>
23-
</div>
24-
<div class="message message-sent">
25-
<div class="message-text">How are you?</div>
22+
<div class="page toolbar-fixed" data-page="indMsg">
23+
<div class="page-content messages-content">
24+
<div class="messages">
25+
26+
<div class="messages-date hidden">Sunday, Feb 9 <span>12:58</span></div>
27+
<div class="message message-sent hidden">
28+
<div class="message-text">Hello</div>
29+
</div>
30+
<div class="message message-sent hidden">
31+
<div class="message-text hidden">How are you?</div>
32+
</div>
33+
<div class="message message-received hidden">
34+
<div class="message-name Kate hidden">Kate</div>
35+
<div class="message-text hidden">I am fine, thanks</div>
36+
<div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar hidden"></div>
37+
</div>
38+
<div class="messages-date hidden">Sunday, Feb 3 <span>11:58</span></div>
39+
<div class="message message-sent hidden">
40+
<div class="message-text hidden">Nice photo?</div>
41+
</div>
42+
2643
</div>
27-
<div class="message message-received">
28-
<div class="message-name">Kate</div>
29-
<div class="message-text">I am fine, thanks</div>
30-
<div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
31-
</div>
32-
<div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
33-
<div class="message message-sent">
34-
<div class="message-text">Nice photo?</div>
35-
</div>
36-
</div>
37-
<div class="toolbar messagebar">
38-
<div class="toolbar-inner">
39-
<textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
44+
<div class="toolbar messagebar" style="">
45+
<div class="toolbar-inner">
46+
<textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
47+
</div>
4048
</div>
4149
</div>
4250
</div>
43-
</div>
51+
</body>
52+
</html>

‎OddJobb/www/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
</div>
7070

7171
<!-- Views -->
72-
<div class="views">
72+
<div class="views">
7373
<!-- Your main view, should have "view-main" class -->
7474
<div class="view view-main">
7575
<!-- Top Navbar-->

‎OddJobb/www/js/messages.js‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,39 @@
22
//Js file that deal with the messages
33

44

5-
function messagesMain() {
5+
var msgTemplate = '{{#if day}}' +
6+
'<div class="messages-date">{{day}} {{#if time}}, <span>{{time}}</span>{{/if}}</div>' +
7+
'{{/if}}' +
8+
'<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}}">' +
9+
'{{#if name}}<div class="message-name {{id}} hidden">{{name}}</div>{{/if}}' +
10+
'<div class="message-text {{id}}">{{text}}{{#if date}}<div class="message-date hidden">{{date}}</div>{{/if}}</div>' +
11+
'{{#if avatar}}<div class="message-avatar" style="background-image:url({{avatar}})"></div>{{/if}}' +
12+
'{{#if label}}<div class="message-label">{{label}}</div>{{/if}}' +
13+
'</div>';
14+
15+
var error = "";
16+
17+
function messagesMain(queryParams) {
618
var msgHandler = new Framework7();
719
var $$ = Dom7;
820

9-
var messages = msgHandler.messages('.messages');
21+
var messages = msgHandler.messages('.messages', { messageTemplate: msgTemplate });
1022
var msgBar = msgHandler.messagebar('.messagebar');
1123
var currentMsg = "";
1224

25+
//Have to read from api to know which user to read from
26+
//console.log(queryParams);
27+
var prevMessages = loadMessages(queryParams);
28+
29+
//Really only applicable to desktop version
1330
$$('.messagebar').on('keypress', function (e) {
14-
if (e.keyCode == 13) {
31+
if (e.keyCode === 13) {
1532
sendMsg();
1633
}
1734
})
1835

1936
$$('.messagebar').on('click', function () {
2037
sendMsg();
21-
2238
})
2339

2440
var sendMsg = function () {
@@ -27,10 +43,43 @@ function messagesMain() {
2743

2844
messages.addMessage({
2945
text: currentMsg,
30-
name: "Mateo"
31-
46+
name: "Mateo",
47+
id: "Mateo"
3248
}, "append", true);
33-
console.log("message sent");
49+
50+
console.log("message sent");
3451
}
3552

36-
};
53+
printErr(error);
54+
55+
};
56+
57+
//Load messages of a particular person.
58+
var loadMessages = function (person) {
59+
allMsgs = $$("." + person);
60+
console.log(allMsgs);
61+
allMsgs.addClass("visible");
62+
allMsgs.removeClass("hidden");
63+
64+
/*
65+
var msgs = $$("." + person);
66+
if (msgs === null) {
67+
error = "Invalid Person Called";
68+
return;
69+
}
70+
var people = [];
71+
for (var i = 0; i < msgs.length; i++) {
72+
var current = msgs[i];
73+
if (people.indexOf(current.innerHTML) === -1) {
74+
people.push(current);
75+
}
76+
}
77+
//console.log(people);
78+
return people;
79+
*/
80+
}
81+
82+
83+
var printErr = function(err){
84+
console.log(err);
85+
}

‎OddJobb/www/js/my-app.js‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,31 +28,17 @@ myApp.onPageInit('about', function (page) {
2828

2929
//Each message Page
3030
myApp.onPageInit('indMsg', function (page) {
31-
messagesMain();
31+
var queryParams = page.query["messageId"];
32+
var title = document.getElementById("currentPerson");
33+
title.innerHTML = queryParams;
34+
messagesMain(queryParams);
3235
})
3336

3437
//Messages Page
3538
myApp.onPageInit('messages', function (page) {
36-
//messagesMain();
37-
/*
38-
1. Do AJAX call
39-
2. Put data into Array
40-
3. Set array
41-
*/
42-
const people = [
43-
/*
44-
{
45-
name: nameOfPerson
46-
message: This is a mess...
47-
48-
}*/
49-
];
5039

51-
for (var i = 0; i < 10; i++) {
52-
people.push({
53-
item: i
54-
});
55-
}
40+
//Will be reading this from the database
41+
const people = [{ item: "Mateo" }, { item: "Holly" }, { item: "Anthony" }, { item: "Haowei" }];
5642

5743
const myListOfPeople = myApp.virtualList('.list-block.virtual-list', {
5844
items: people,

‎OddJobb/www/messages.html‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
1-
<div class="navbar">
2-
<div class="navbar-inner">
3-
<div class="left">
4-
<a href="#" class="back link">
5-
<i class="icon icon-back"></i>
6-
<span>Back</span>
7-
</a>
8-
</div>
9-
<!---->
10-
<div class="center sliding">Messages</div>
11-
<div class="right">
12-
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
1+
<html>
2+
<head></head>
3+
<body>
4+
<div class="navbar">
5+
<div class="navbar-inner">
6+
<div class="left">
7+
<a href="#" class="back link">
8+
<i class="icon icon-back"></i>
9+
<span>Back</span>
10+
</a>
11+
</div>
12+
<!---->
13+
<div class="center sliding">Messages</div>
14+
<div class="right">
15+
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
16+
</div>
1317
</div>
1418
</div>
15-
</div>
1619

17-
<div class="pages">
18-
<div data-page="messages" class="page">
19-
<div class="page-content">
20-
<div class="list-block virtual-list">
21-
<a href="#"></a>
20+
<div class="pages">
21+
<div data-page="messages" class="page">
22+
<div class="page-content">
23+
<div class="list-block virtual-list">
24+
<a href="#"></a>
25+
</div>
2226
</div>
2327
</div>
2428
</div>
25-
</div>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)