12 |
20 |
21 |
22 |
43 |
44 |
45 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/src/main/webapp/index.js:
--------------------------------------------------------------------------------
1 | // index.js
2 |
3 | var REST_DATA = 'api/favorites';
4 |
5 | var KEY_ENTER = 13;
6 | var defaultItems = [
7 |
8 | ];
9 |
10 | function encodeUriAndQuotes(untrustedStr) {
11 | return encodeURI(String(untrustedStr)).replace(/'/g, '%27').replace(')', '%29');
12 | }
13 |
14 | function loadItems(){
15 | xhrGet(REST_DATA, function(data){
16 |
17 | //stop showing loading message
18 | stopLoadingMessage();
19 |
20 | var receivedItems = data.body || [];
21 | var items = [];
22 | var i;
23 | // Make sure the received items have correct format
24 | for(i = 0; i < receivedItems.length; ++i){
25 | var item = receivedItems[i];
26 | if(item && 'id' in item){
27 | items.push(item);
28 | }
29 | }
30 | var hasItems = items.length;
31 | if(!hasItems){
32 | items = defaultItems;
33 | }
34 | for(i = 0; i < items.length; ++i){
35 | addItem(items[i], !hasItems);
36 | }
37 | if(!hasItems){
38 | var table = document.getElementById('notes');
39 | var nodes = [];
40 | for(i = 0; i < table.rows.length; ++i){
41 | nodes.push(table.rows[i].firstChild.firstChild);
42 | }
43 | function save(){
44 | if(nodes.length){
45 | saveChange(nodes.shift(), save);
46 | }
47 | }
48 | save();
49 | }
50 | }, function(err){
51 | console.log(err);
52 | //stop showing loading message
53 | stopLoadingMessage();
54 | document.getElementById('errorDiv').innerHTML = err;
55 |
56 | });
57 | }
58 |
59 | function startProgressIndicator(row)
60 | {
61 | row.innerHTML="
13 | 
14 |
18 |
19 |
14 | 15 | Favorites Organizer powered by Cloudant 16 |
17 |
46 |
47 |
![](\"images/loading.gif\")
"; 117 | function sanitizeInput(str) { 118 | return String(str).replace(/&(?!amp;|lt;|gt;)/g, '&').replace(//g, '>'); 119 | } 120 | function setRowContent(item, row) { 121 | var innerHTML = "
";
134 | for (var i = 0; i < attachments.length; ++i) {
135 | var attachment = attachments[i];
136 |
137 | if (attachment.content_type.indexOf("image/") == 0) {
138 | innerHTML += "
";
152 |
153 | }
154 |
155 | row.innerHTML = innerHTML + attachButton + "" + attachment.key + "
![](\"")
";
139 |
140 | } else if (attachment.content_type.indexOf("audio/") == 0) {
141 | innerHTML += "" + attachment.key + "
";
142 |
143 | } else if (attachment.content_type.indexOf("video/") == 0) {
144 | innerHTML += "" + attachment.key + "
";
145 |
146 | } else if (attachment.content_type.indexOf("text/") == 0 || attachment.content_type.indexOf("application/") == 0) {
147 | innerHTML += "";
148 | }
149 |
150 | }
151 | innerHTML += "";
305 | }
306 | function stopLoadingMessage()
307 | {
308 | document.getElementById('loadingImage').innerHTML = "";
309 | }
310 |
311 | showLoadingMessage();
312 | loadItems();
313 |
314 |
--------------------------------------------------------------------------------
/src/main/webapp/style.css:
--------------------------------------------------------------------------------
1 | /* style.css
2 | * This file provides css styles.
3 | */
4 |
5 | body,html {
6 | background-color: #f5f7fa;
7 | width: 100%;
8 | height: 100%;
9 | margin: 0 auto;
10 | font-family: Lato,sans-serif;
11 | color: #283D56;
12 | }
13 |
14 | /* header footer common */
15 | header, footer {
16 | width: 100%;
17 | text-align: center;
18 | }
19 |
20 | .container {
21 | height: 100%;
22 | overflow: auto;
23 | display: flex;
24 | flex-direction: column;
25 | }
26 |
27 | .banner {
28 | background: #5586D6;
29 | color: #fff;
30 | padding: 10px;
31 | }
32 |
33 | /* positions */
34 | header {
35 | padding-top: 20px;
36 | font-size: 1.3em;
37 | }
38 | footer {
39 | padding: 10px;
40 | font-size: .8rem;
41 | }
42 | .title, .tips {
43 | height: 30px;
44 | padding-top: 20px;
45 | position: relative;
46 | }
47 | .title {
48 | border-radius: 40px 40px 0 0;
49 | }
50 | .tips {
51 | border-radius: 0 0 40px 40px;
52 | }
53 |
54 | table {
55 | table-layout: fixed;
56 | word-wrap: break-word;
57 | position: relative;
58 | border-collapse: collapse;
59 | width: 100%;
60 | }
61 | .content {
62 | font-size: .8rem;
63 | width: 30%;
64 | vertical-align: top;
65 | }
66 | .contentName {
67 | padding: 10px;
68 | padding-left: 20px;
69 | width: 25%;
70 | font-weight:bold;
71 | vertical-align: top;
72 | }
73 | .contentDetails {
74 | padding: 10px;
75 | }
76 | .contentAction {
77 | width: 10%;
78 | padding-right: 20px;
79 | text-align: right;
80 | }
81 |
82 | .nameText {
83 | font-weight: bold;
84 | }
85 | .records textarea {
86 | height: 1.2em;
87 | font-size: 1em;
88 | resize: none;
89 | width: 100%;
90 | border: none;
91 | overflow: hidden;
92 | background-color: transparent;
93 | font-size: .9em;
94 | }
95 |
96 | /* buttons */
97 | .detailBtn {
98 | position: absolute;
99 | left: 20px;
100 | top: 10px;
101 | background: none;
102 | border: none;
103 | cursor: pointer;
104 | }
105 | .addBtn {
106 | background: none;
107 | border: none;
108 | cursor: pointer;
109 | }
110 | .detailBtn img{
111 | width: 20px;
112 | height: 20px;
113 | }
114 | .deleteBtn{
115 | background-image: url("images/sprite.png");
116 | background-position: -5px -568px;
117 | width: 18px;
118 | height: 18px;
119 | display:inline-block;
120 | }
121 |
122 | tr:hover .deleteBtn {
123 |
124 | cursor: pointer;
125 | }
126 |
127 |
128 | .tableRows{
129 | border: 2px solid #DFE3E6
130 | }
131 |
132 |
133 |
134 | .fieldname {
135 | text-align: right;
136 | border-right: 1px solid #fff;
137 | }
138 |
139 | .errorMsg {
140 | color: red;
141 | font-weight:normal;
142 | }
143 | .newappIcon {
144 | display: block;
145 | max-width: 100px;
146 | max-height: 100px;
147 | margin: 0 auto;
148 | padding: 10px;
149 | }
150 |
151 | .appTitle {
152 | padding: 15px;
153 | margin: 0 auto;
154 | text-align: center;
155 | font-size: 1.5rem;
156 | }
157 |
158 | .description {
159 | padding-left: 50px;
160 | padding-right: 50px;
161 | text-align: center;
162 | }
163 |
164 | .infoImg {
165 | cursor: pointer;
166 | }
167 | .flexBox {
168 | display: flex;
169 | flex-wrap: wrap;
170 | }
171 | .contentTiles {
172 | padding: 10px;
173 | font-size: .8rem;
174 | }
175 | .uploadBox {
176 | margin: 0 auto;
177 | text-align: center;
178 | }
179 | .appinfo {
180 | padding: 10px;
181 | }
182 |
--------------------------------------------------------------------------------
/src/main/webapp/util.js:
--------------------------------------------------------------------------------
1 | //utilities
2 | function createXHR(){
3 | if(typeof XMLHttpRequest != 'undefined'){
4 | return new XMLHttpRequest();
5 | }else{
6 | try{
7 | return new ActiveXObject('Msxml2.XMLHTTP');
8 | }catch(e){
9 | try{
10 | return new ActiveXObject('Microsoft.XMLHTTP');
11 | }catch(e){}
12 | }
13 | }
14 | return null;
15 | }
16 |
17 | function xhrGet(url, callback, errback){
18 | var xhr = new createXHR();
19 | xhr.open("GET", url, true);
20 | xhr.onreadystatechange = function(){
21 | if(xhr.readyState === 4){
22 | if(xhr.status === 200){
23 | callback(parseJson(xhr.responseText));
24 | }else{
25 | errback("Error: "+xhr.responseText);
26 | }
27 | }
28 | };
29 |
30 | xhr.timeout = 100000;
31 | xhr.ontimeout = errback;
32 | xhr.send();
33 | }
34 |
35 | function xhrPut(url, data, callback, errback){
36 | var xhr = new createXHR();
37 | xhr.open("PUT", url, true);
38 | xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
39 | xhr.onreadystatechange = function(){
40 | if(xhr.readyState === 4){
41 | if(xhr.status === 200){
42 | callback();
43 | }else{
44 | errback("Error: "+xhr.responseText);
45 | }
46 | }
47 | };
48 | xhr.timeout = 100000;
49 | xhr.ontimeout = errback;
50 | xhr.send(objectToQuery(data));
51 | }
52 |
53 | function xhrAttach(url, data, callback, errback)
54 | {
55 | var xhr = new createXHR();
56 | xhr.open("POST", url, true);
57 | //xhr.setRequestHeader("Content-type", "multipart/form-data");
58 | xhr.onreadystatechange = function(){
59 | if(xhr.readyState === 4){
60 | if(xhr.status === 200){
61 | callback(parseJson(xhr.responseText));
62 | }else{
63 | errback("Error: "+xhr.responseText);
64 | }
65 | }
66 | };
67 | xhr.timeout = 1000000;
68 | xhr.ontimeout = errback;
69 | xhr.send(data);
70 | }
71 |
72 | function xhrPost(url, data, callback, errback){
73 | var xhr = new createXHR();
74 | xhr.open("POST", url, true);
75 | xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
76 | xhr.onreadystatechange = function(){
77 | if(xhr.readyState === 4){
78 | if(xhr.status === 200){
79 | callback(parseJson(xhr.responseText));
80 | }else{
81 | errback("Error: "+xhr.responseText);
82 | }
83 | }
84 | };
85 | xhr.timeout = 100000;
86 | xhr.ontimeout = errback;
87 | xhr.send(objectToQuery(data));
88 | }
89 |
90 | function xhrDelete(url, callback, errback){
91 | var xhr = new createXHR();
92 | xhr.open("DELETE", url, true);
93 | xhr.onreadystatechange = function(){
94 | if(xhr.readyState === 4){
95 | if(xhr.status === 200){
96 | callback();
97 | }else{
98 | errback("Error: "+xhr.responseText);
99 | }
100 | }
101 | };
102 | xhr.timeout = 100000;
103 | xhr.ontimeout = errback;
104 | xhr.send();
105 | }
106 |
107 | function parseJson(str){
108 | return JSON.parse(str);
109 | }
110 |
111 | function objectToQuery(map){
112 | var enc = encodeURIComponent, pairs = [];
113 | for(var name in map){
114 | var value = map[name];
115 | var assign = enc(name) + "=";
116 | if(value && value instanceof Array){
117 | for(var i = 0, len = value.length; i < len; ++i){
118 | pairs.push(assign + enc(value[i]));
119 | }
120 | }else{
121 | pairs.push(assign + enc(value));
122 | }
123 | }
124 | return pairs.join("&");
125 | }
126 |
--------------------------------------------------------------------------------
/src/main/wlp/server.xml:
--------------------------------------------------------------------------------
1 |