Display results

Victor Costa
1 parent 8e9fd027
Showing 3 changed files with 79 additions and 0 deletions Show diff stats
index.html
js/main.js
sass/_proposal_detail.scss
@@ -121,6 +121,7 @@
                 <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
               </div>
             </div>
+            <div class='results-container hide'></div>
             <div class='experience-proposal-container'>
               <div class='experience-proposal'>
                 <div class='container-title'>Conte sua experiência</div>
@@ -172,6 +173,26 @@
         <a href="#" class="like dislike" data-vote-value="-1"></a>
         <a href="#" class="like" data-vote-value="1"></a>
         <a href="#" class="skip">Pular</a>
+        <a href="#" class="result">Resultado</a>
+      </div>
+    </script>
+
+    <script id="results" type='text/x-handlebars-template'>
+      <div class="results-content">
+      <table>
+        <tr class="header">
+          <td class="abstract-text">Texto da Alternativa</td>
+          <td class="votes-for">Gostei</td>
+          <td class="votes-against">Não Gostei</td>
+        </tr>
+        {{#each articles}}
+          <tr>
+            <td class="abstract-text"><div class="truncate"><p class="truncated">{{abstract}}</p></div></td>
+            <td class="votes-for">{{votes_for}}</td>
+            <td class="votes-against">{{votes_against}}</td>
+          </tr>
+        {{/each}}
+      </table>
       </div>
     </script>
@@ -6,6 +6,7 @@ var template = Handlebars.compile(templateSource);
 var supportProposalTemplate = Handlebars.compile(document.getElementById('support-proposal-template').innerHTML);
 var loginTemplate = Handlebars.compile(document.getElementById('login').innerHTML);
+var resultsTemplate = Handlebars.compile(document.getElementById('results').innerHTML);
 // The div/container that we are going to display the results in
 var resultsPlaceholder = document.getElementById('proposal-result');
@@ -157,6 +158,22 @@ function loadRandomProposal(topic_id, private_token) {
       });
       e.preventDefault();
     });
+    $(document.body).off('click', '.vote-actions .result');
+    $(document.body).on('click', '.vote-actions .result', function(e) {
+      $('.results-container').toggle();
+      if($('.results-container').is(":visible")) {
+        var url = host + '/api/v1/articles/' + topic_id + '/children' + '?private_token=' + private_token + '&limit=10&fields=id,name,abstract,votes_for,votes_against&content_type=ProposalsDiscussionPlugin::Proposal';
+        $.getJSON(url).done(function( data ) {
+          $('.results-container').html(resultsTemplate(data));
+        });
+        $('.experience-proposal-container').hide();
+        $('.talk-proposal-container').hide();
+      } else {
+        $('.experience-proposal-container').show();
+        $('.talk-proposal-container').show();
+      }
+      e.preventDefault();
+    });
   });
 }
@@ -75,6 +75,44 @@
       }
     }
   }
+  .results-container {
+    th, td {
+      border: 1px solid rgb(223, 223, 223);
+    }
+    .results-content {
+      border: 1px solid #00a9bd;
+    }
+    table {
+      border-collapse: collapse;
+      margin-top: 20px;
+
+      .abstract-text {
+        width: 80%;
+      }
+      .votes-for {
+        width: 10%;
+        text-align: center;
+      }
+      .votes-against {
+        @extend .votes-for;
+      }
+      .header {
+        font-weight: bold;
+        text-align: center;
+      }
+
+      .truncate {
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+      }
+      .truncated {
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
   @each $category, $color in $categories {
     .#{$category}{
@@ -246,6 +284,9 @@
             padding: 20px;
             display: block;
           }
+          .result {
+            @extend .skip
+          }
         }
       }
       .experience-proposal-container{
	@@ -121,6 +121,7 @@		@@ -121,6 +121,7 @@
121	<div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>	121	<div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
122	</div>	122	</div>
123	</div>	123	</div>
		124	+ <div class='results-container hide'></div>
124	<div class='experience-proposal-container'>	125	<div class='experience-proposal-container'>
125	<div class='experience-proposal'>	126	<div class='experience-proposal'>
126	<div class='container-title'>Conte sua experiência</div>	127	<div class='container-title'>Conte sua experiência</div>
	@@ -172,6 +173,26 @@		@@ -172,6 +173,26 @@
172	<a href="#" class="like dislike" data-vote-value="-1"></a>	173	<a href="#" class="like dislike" data-vote-value="-1"></a>
173	<a href="#" class="like" data-vote-value="1"></a>	174	<a href="#" class="like" data-vote-value="1"></a>
174	<a href="#" class="skip">Pular</a>	175	<a href="#" class="skip">Pular</a>
		176	+ <a href="#" class="result">Resultado</a>
		177	+ </div>
		178	+ </script>
		179	+
		180	+ <script id="results" type='text/x-handlebars-template'>
		181	+ <div class="results-content">
		182	+ <table>
		183	+ <tr class="header">
		184	+ <td class="abstract-text">Texto da Alternativa</td>
		185	+ <td class="votes-for">Gostei</td>
		186	+ <td class="votes-against">Não Gostei</td>
		187	+ </tr>
		188	+ {{#each articles}}
		189	+ <tr>
		190	+ <td class="abstract-text"><div class="truncate"><p class="truncated">{{abstract}}</p></div></td>
		191	+ <td class="votes-for">{{votes_for}}</td>
		192	+ <td class="votes-against">{{votes_against}}</td>
		193	+ </tr>
		194	+ {{/each}}
		195	+ </table>
175	</div>	196	</div>
176	</script>	197	</script>
177		198
	@@ -6,6 +6,7 @@ var template = Handlebars.compile(templateSource);		@@ -6,6 +6,7 @@ var template = Handlebars.compile(templateSource);
6		6
7	var supportProposalTemplate = Handlebars.compile(document.getElementById('support-proposal-template').innerHTML);	7	var supportProposalTemplate = Handlebars.compile(document.getElementById('support-proposal-template').innerHTML);
8	var loginTemplate = Handlebars.compile(document.getElementById('login').innerHTML);	8	var loginTemplate = Handlebars.compile(document.getElementById('login').innerHTML);
		9	+var resultsTemplate = Handlebars.compile(document.getElementById('results').innerHTML);
9		10
10	// The div/container that we are going to display the results in	11	// The div/container that we are going to display the results in
11	var resultsPlaceholder = document.getElementById('proposal-result');	12	var resultsPlaceholder = document.getElementById('proposal-result');
	@@ -157,6 +158,22 @@ function loadRandomProposal(topic_id, private_token) {		@@ -157,6 +158,22 @@ function loadRandomProposal(topic_id, private_token) {
157	});	158	});
158	e.preventDefault();	159	e.preventDefault();
159	});	160	});
		161	+ $(document.body).off('click', '.vote-actions .result');
		162	+ $(document.body).on('click', '.vote-actions .result', function(e) {
		163	+ $('.results-container').toggle();
		164	+ if($('.results-container').is(":visible")) {
		165	+ var url = host + '/api/v1/articles/' + topic_id + '/children' + '?private_token=' + private_token + '&limit=10&fields=id,name,abstract,votes_for,votes_against&content_type=ProposalsDiscussionPlugin::Proposal';
		166	+ $.getJSON(url).done(function( data ) {
		167	+ $('.results-container').html(resultsTemplate(data));
		168	+ });
		169	+ $('.experience-proposal-container').hide();
		170	+ $('.talk-proposal-container').hide();
		171	+ } else {
		172	+ $('.experience-proposal-container').show();
		173	+ $('.talk-proposal-container').show();
		174	+ }
		175	+ e.preventDefault();
		176	+ });
160	});	177	});
161	}	178	}
162		179
	@@ -75,6 +75,44 @@		@@ -75,6 +75,44 @@
75	}	75	}
76	}	76	}
77	}	77	}
		78	+ .results-container {
		79	+ th, td {
		80	+ border: 1px solid rgb(223, 223, 223);
		81	+ }
		82	+ .results-content {
		83	+ border: 1px solid #00a9bd;
		84	+ }
		85	+ table {
		86	+ border-collapse: collapse;
		87	+ margin-top: 20px;
		88	+
		89	+ .abstract-text {
		90	+ width: 80%;
		91	+ }
		92	+ .votes-for {
		93	+ width: 10%;
		94	+ text-align: center;
		95	+ }
		96	+ .votes-against {
		97	+ @extend .votes-for;
		98	+ }
		99	+ .header {
		100	+ font-weight: bold;
		101	+ text-align: center;
		102	+ }
		103	+
		104	+ .truncate {
		105	+ display: table;
		106	+ table-layout: fixed;
		107	+ width: 100%;
		108	+ }
		109	+ .truncated {
		110	+ overflow-x: hidden;
		111	+ text-overflow: ellipsis;
		112	+ white-space: nowrap;
		113	+ }
		114	+ }
		115	+ }
78		116
79	@each $category, $color in $categories {	117	@each $category, $color in $categories {
80	.#{$category}{	118	.#{$category}{
	@@ -246,6 +284,9 @@		@@ -246,6 +284,9 @@
246	padding: 20px;	284	padding: 20px;
247	display: block;	285	display: block;
248	}	286	}
		287	+ .result {
		288	+ @extend .skip
		289	+ }
249	}	290	}
250	}	291	}
251	.experience-proposal-container{	292	.experience-proposal-container{