Remote control questions highlighting (#134)

.meteor/packages

@@ -47,3 +47,4 @@ reactive-var
 juliancwirko:s-alert
 panter:qrcode
 pascoual:pdfkit
+yuukan:streamy

.meteor/versions

@@ -124,3 +124,4 @@ vazco:[email protected]
 [email protected]
 [email protected]
 xolvio:[email protected]
+yuukan:[email protected]

client/views/helpers/chunks/question_div/question_div.html

@@ -60,6 +60,11 @@
           {{/if}}
         </span>
       </div>
+      {{#if adminButtons}}
+        <div class="question-highlight">
+          <label class="remote-highlight"><input type="checkbox" name="highlight" value="0"> Highlight the question</label>
+        </div>
+      {{/if}}
       <div class="asked-by">
         {{#if poster}}
         <span class="poser">

client/views/helpers/chunks/question_div/question_div.js

@@ -1,5 +1,13 @@
 import { Votes, Answers, Instances, Questions } from '/lib/common.js';
 
+Streamy.on('emphasize', function(data, s) {
+  $(`#${data.id}`).find('p.questiontext').css('background-color', 'yellow');
+});
+
+Streamy.on('de-emphasize', function(data, s) {
+  $(`#${data.id}`).find('p.questiontext').css('background-color', '');
+});
+
 Template.question_div.onCreated(function () {
   this.replyCount = new ReactiveVar(0);
 });
@@ -101,4 +109,13 @@ Template.question_div.events({
     const parentNode = document.getElementById('nav');
     popoverTemplate = Blaze.renderWithData(Template.modify, template.data._id, parentNode);
   },
+  'change .remote-highlight': function(event, template) {
+    const currInstance = Instances.findOne({ _id: template.data.instanceid });
+    let id = event.currentTarget.parentElement.parentElement.id;
+    if (event.target.checked === true) {
+      Meteor.call('emphasize', id, template.data.instanceid);
+    } else {
+      Meteor.call('deEmphasize', id, template.data.instanceid);
+    }
+  }
 });

client/views/helpers/chunks/question_div/question_div.scss

@@ -390,3 +390,24 @@ $popular-question-color: #f1c40f;
   font-weight: 600;
   color: #777!important;
 }
+
+.remote-highlight:hover, input[type='checkbox'] {
+  cursor: pointer;
+}
+
+.remote-highlight {
+  display: block;
+  padding-left: 15px;
+  text-indent: -15px;
+}
+
+.remote-highlight > input {
+  width: 13px;
+  height: 13px;
+  padding: 0;
+  margin:0;
+  vertical-align: bottom;
+  position: relative;
+  top: -1px;
+  overflow: hidden;
+}

server/methods.js

@@ -759,5 +759,19 @@ Meteor.methods({
     }
     console.log("OK");
     return true;
+  },
+  emphasize(divId, instanceId) {
+    let currUser = Meteor.users.findOne({ _id: this.userId });
+    let currInstance = Instances.findOne({ _id: instanceId });
+    if (currInstance.admin === currUser.emails[0].address) {
+      Streamy.broadcast('emphasize', { id: divId });
+    }
+  },
+  deEmphasize(divId, instanceId) {
+    let currUser = Meteor.users.findOne({ _id: this.userId });
+    let currInstance = Instances.findOne({ _id: instanceId });
+    if (currInstance.admin === currUser.emails[0].address) {
+      Streamy.broadcast('de-emphasize', { id: divId });
+    }
   }
 });