new navbar + notifications

Author: ehzhang

client/components/announcer/announcer.js

@@ -44,7 +44,7 @@ function getAnnouncement(){
 }
 
 function clearFields(){
-  $('.ui.form input, .ui.form textarea').val("");
+  $(".ui.form input[type='text'], .ui.form textarea").val("");
 }
 
 function isValid(){

client/components/nav/nav.html

@@ -2,28 +2,46 @@
   {{#if currentUser }}
     <div id="nav">
       <div class="ui secondary inverted menu">
+        <a class="icon item" href="/">
+          <i class="ui home icon"></i>
+        </a>
+
         {{#if userIs 'admin'}}
-          <a class="item" href="/admin">
-            Admin
-          </a>
-        {{/if}}
-        {{#if userIs 'mentor'}}
-          <a class="item" href="/mentor">
-            Mentor
+          <a class="icon item" href="/admin">
+            <i class="ui settings icon"></i>
           </a>
         {{/if}}
-        <a class="item" href="/">
-          Queue
-        </a>
+
         <div class="right menu">
-          <a class="item" href="/profile">
-            {{profile}}
-          </a>
-          <a class="ui item" id="logout">
-            Logout
-          </a>
+          {{> navMentor }}
+          {{> navAccount }}
         </div>
       </div>
     </div>
   {{/if}}
+</template>
+
+<template name="navMentor">
+  {{#if userIs 'mentor'}}
+    <a class="icon item" href="/mentor">
+      <i class="ui world icon"></i>
+      {{#if openTickets}}
+        <div class="ui tiny floating notification red label">
+          {{ openTickets }}
+        </div>
+      {{/if}}
+    </a>
+  {{/if}}
+</template>
+
+<template name="navAccount">
+
+  <div class="ui dropdown item">
+    {{profile}}<i class="dropdown icon"></i>
+    <div class="menu">
+      <a class="item" href="/profile">Your Profile</a>
+      <a class="item" id="logout">Logout</a>
+    </div>
+  </div>
+
 </template>

client/components/nav/nav.js

@@ -1,13 +1,33 @@
-Template.nav.events({
+// -----------------------------
+// Mentor section of Nav
+// -----------------------------
+Template.navMentor.helpers({
+  openTickets: function(){
+    return Tickets.find({
+      status: {
+        $in: ["OPEN", "CLAIMED"]
+      }
+    }).fetch().length;
+  }
+});
+
+// -----------------------------
+// Account section of Nav
+// -----------------------------
+Template.navAccount.rendered = function(){
+  $(this.findAll('.ui.dropdown')).dropdown();
+};
+
+Template.navAccount.events({
   'click #logout': function(){
     Meteor.logout();
   }
 });
 
-Template.nav.helpers({
+Template.navAccount.helpers({
   profile: function(){
     if (Meteor.user().profile.name){
-      return Meteor.user().profile.name;
+      return Meteor.user().profile.name.split(" ")[0];
     }
     return "Profile";
   }

client/components/ticketPanel/ticketPanel.html

@@ -33,12 +33,9 @@
         {{else}}
 
           <div class="title">
-            Hey, I'm
-            {{#if currentUser.profile.name}}
-              {{currentUser.profile.name}}!
-            {{else}}
-              {{currentUser.services.github.username}}!
-            {{/if}}
+            {{greeting}}
+            <br>
+            {{constant 'TICKET_PANEL_GREETING'}}
           </div>
           <div class="content">
             {{constant 'TICKET_PANEL_TOPIC'}}

client/components/ticketPanel/ticketPanel.js

@@ -11,6 +11,19 @@ Template.ticketPanel.helpers({
   statusIs: function(status){
     return this.status === status;
   },
+  greeting: function(){
+    // Return the first name
+    if (Meteor.user().profile.name){
+      return "Hey, " + Meteor.user().profile.name.split(" ")[0] + "!";
+    }
+
+    if (Meteor.user().services.github){
+      return "Hey, " + Meteor.user().services.github.username + "!";
+    }
+
+    return "Hey there!";
+
+  },
   queueEnabled: function(){
     var settings = Settings.findOne({});
     if (settings){

client/components/tickets/tickets.html

@@ -5,8 +5,9 @@
         {{> ticket }}
       {{/each}}
     {{else}}
-      <i class="ui huge smile icon"></i>
-      <br>
+      <div style="font-size: 4em">
+        🙌
+      </div>
       <br>
       Looks like it's all clear!
     {{/if}}

client/helpers.js

@@ -14,4 +14,4 @@ UI.registerHelper('constant', function(variable){
 // Check if a user is a certain role
 UI.registerHelper('userIs', function(role){
   return authorized[role]();
-});
+});

client/stylesheets/css/site.css

@@ -2,4 +2,10 @@
   position: absolute;
   padding: 12px;
   width: 100%;
+
+  .floating.notification.label {
+    top: -0.5em;
+    left: 90%;
+    padding: 0.4em;
+  }
 }

client/stylesheets/scss/components/_nav.scss

@@ -1,5 +1,3 @@
-Session.set('admin', 'settings');
-
 Template.admin.helpers({
   pageIs: function(page){
     return Session.equals("admin", page);

client/views/admin/admin.js

@@ -11,7 +11,6 @@ Template.settings.helpers({
 
 Template.settings.events({
   "click #queueEnabled.ui.checkbox": function(e, t){
-    debugger
     Meteor.call("toggleSetting",
         'queueEnabled',
         $('#queueEnabled input').prop('checked'));

client/views/settings/settings.js

@@ -7,7 +7,7 @@ CONSTANTS = {
    * This is most the branding, such as your queue's name.
    *
    */
-  Q_NAME: "HACKq",
+  Q_NAME: "HELPq",
   SPLASH_MESSAGE: "Have a question? Get matched with a mentor for help.",
 
   // Path to image asset for desktop notifications
@@ -32,7 +32,8 @@ CONSTANTS = {
    * " " PLACEHOLDER: "my red shirt, blue hat, etc"
    *
    */
-  
+
+  TICKET_PANEL_GREETING: "How can we help you?",
   TICKET_PANEL_TOPIC: "I need help with",
   TICKET_PANEL_TOPIC_PLACEHOLDER: "describe your problem",
 

lib/constants.js

@@ -17,6 +17,10 @@ _getUserName = function(user){
   return "Anonymous";
 };
 
+_settings = function(){
+  return Settings.findOne({});
+};
+
 _log = function(message){
   console.log("[", new Date().toLocaleString(), "]", message);
 };

server/lib/helpers.js

@@ -21,8 +21,8 @@ Meteor.methods({
 });
 
 function createTicket(topic, location, contact) {
-  // Must be logged in
-  if (authorized.user(this.userId)) {
+  // Must be logged in and queue must be open
+  if (authorized.user(this.userId) && _settings().queueEnabled) {
     // User can't have more than one
     var userActiveTickets = Tickets.find(
         {