More menu items

2016-11-07 21:22:51 -05:00 · 2016-11-07 21:22:51 -05:00 · f25a63271d
commit f25a63271d
parent 3fef965cce
5 changed files with 221 additions and 11 deletions
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@ -60,6 +60,10 @@
                {{#if currSettingMode 'addClass'}}
                    {{> joinClass}}
                {{/if}}
+
+                {{$if currSettingMode 'createClass'}}
+                    {{> createClass}}
+                {{/if}}
            </div>
        </div>

--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@ -41,7 +41,7 @@ Template.login.rendered = function() {

 Template.main.created = function() {
    Session.set("mode", Session.get("user").preferences.mode);
-    Session.set("classInfo", Session.get("user").classes[0]);
+    Session.set("classInfo", null);
 }

 Template.main.rendered = function() {
--- a/hourglass/client/menus/menus.css
+++ b/hourglass/client/menus/menus.css
@ -298,7 +298,7 @@
 	display: inline-block;
 }

-#infoClassCont div .fa-files-o{
+#infoClassCont div .fa-files-o, #infoClassCont div .fa-pencil-square-o {
 	font-size: 2vh;

 	position: absolute;
@ -335,6 +335,41 @@
 	position: absolute;
 }

+#changeAdminWrapper {
+	margin-top: 1%;
+	display: none;
+}
+
+#changeAdminWrapper span {
+	font-size: 2vh;
+	display: inline-block !important;
+}
+
+#changeAdmin {
+	width: 40%;
+	margin: 0 1% 0 1%;
+	font-size: 2vh;
+	padding: 1%;
+	outline: none;
+}
+
+#adminSubmit {
+	padding: 2%;
+	background-color: rgba(0,0,0,0.1);
+	display: inline-block;
+
+	cursor: pointer;
+
+	-webkit-transition: background-color 0.4s ease;  
+	-moz-transition: background-color 0.4s ease; 
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease;
+}
+
+#adminSubmit:hover {
+	background-color: rgba(0,0,0,0.2);	
+}
+
 .userAdder {
 	width: 100%;
 	margin-bottom: 3%;
@ -400,3 +435,59 @@
 .userDisp .fa:hover {
 	color: #FF1A1A;
 }
+
+#joinTop {
+	margin: 2% 0 0 5%;
+}
+
+#joinTop .-autocomplete-container {
+	display: none;
+}
+
+#joinTop .fa {
+	font-size: 2.5vh;
+}
+
+#classSearch, #privateCode {
+	font-size: 2vh;
+	padding: 1%;
+	outline: none;
+}
+
+#private {
+	font-size: 2.4vh;
+	padding: 1.5%;
+	margin: 0 2% 0 2%;
+
+	background-color: rgba(0,0,0,0.1);
+
+	cursor: pointer;
+
+	-webkit-transition: background-color 0.4s ease;  
+	-moz-transition: background-color 0.4s ease; 
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease; 
+}
+
+#private:hover {
+	background-color: rgba(0,0,0,0.2);
+}
+
+#privateCode {
+	width: 25%;
+	display: none;
+
+	-webkit-animation: expand .7s ease 1;
+	animation: expand .7s ease 1;
+}
+
+@-webkit-keyframes expand {
+    0%	 { width: 0%; }
+    100% { width: 25%; }
+} 
+
+@keyframes expand {
+    0%	 { width: 0%; }
+    100% { width: 25%; }
+}
+
--- a/hourglass/client/menus/menus.html
+++ b/hourglass/client/menus/menus.html
@ -187,10 +187,14 @@
                    <span style="border-bottom: 3px solid {{classInfoMode 'users'}}">Users</span>
                </div>
                <div id="infoClassCont">
-                    {{#if classInfoMode 'general' 'a'}}
-                        {{> classInfoGeneral}}
+                    {{#if classSelected}}
+                        {{#if classInfoMode 'general' 'a'}}
+                            {{> classInfoGeneral}}
+                        {{else}}
+                            {{> classInfoUsers}}
+                        {{/if}}
                    {{else}}
-                        {{> classInfoUsers}}
+                        <p>Click on a class to see its info.</p>
                    {{/if}}
                </div>
            </div>
@ -213,7 +217,8 @@
            <div id="joinTop">
                <i class="fa fa-search" aria-hidden="true"></i>
                {{> inputAutocomplete id="classSearch" settings=classSettings placeholder="Search..."}}
-                <!-- <h4 id="private">Join Private Class</h4> -->
+                <h4 id="private">Join Private Class</h4>
+                <input id="privateCode" placeholder="Enter code here...">
            </div>
            <div id="settingClassWrapper">
                <div id="label" class="classBox">
@ -254,10 +259,14 @@
                    <span style="border-bottom: 3px solid {{classInfoMode 'users'}}">Users</span>
                </div>
                <div id="infoClassCont">
-                    {{#if classInfoMode 'general' 'a'}}
-                        {{> classInfoGeneral}}
+                    {{#if classSelected}}
+                        {{#if classInfoMode 'general' 'a'}}
+                            {{> classInfoGeneral}}
+                        {{else}}
+                            {{> classInfoUsers}}
+                        {{/if}}
                    {{else}}
-                        {{> classInfoUsers}}
+                        <p>Click on a class to see its info!</p>
                    {{/if}}
                </div>
            </div>
@ -265,6 +274,49 @@
    </div>
 </template>

+<template name="createClass">
+    <div id="backgroundOverlay" style="background-color:{{divColor 'secondaryColor'}}">
+        <div id="creRules"><p>Submit a request for a class to be approved by an administrator. You can have up to 8 unapproved classes at once.</p></div>
+        <div id="formContainer">
+            <div class="formDiv">
+                <p class="profTitle">School:</p>
+               {{> inputAutocomplete settings=schoolComplete class="form-control creInput"         type="text" name="school" placeholder="Example: International Academy" }}
+           </div>
+           <div class="formDiv">
+               <p class="profTitle">Hour:</p>
+               <input class="creInput" type="text">
+           </div>
+           <div class="formDiv">
+               <p class="profTitle">Teacher:</p>
+               {{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}
+           </div>
+           <div class="formDiv">
+               <p class="profTitle">Class Name:</p>
+               <input class="creInput" type="text">
+           </div>
+           <div class="formDiv">
+               <p class="profTitle">Privacy:</p>
+               <input id="privacy" class="creInput clickModify dropdown" type="text" readonly>
+               <div class="optionHolder">
+                   {{#each selectOptions 'privacy'}}
+                       {{> option}}
+                   {{/each}}
+               </div>
+           </div>
+           <div class="formDiv">
+               <p class="profTitle">Category:</p>
+               <input id="category" class="creInput clickModify dropdown" type="text" readonly>
+               <div class="optionHolder">
+                   {{#each selectOptions 'category'}}
+                       {{> option}}
+                   {{/each}}
+               </div>
+           </div>
+       </div>
+       <h3 id="creSubmit">Submit Request</h3>
+    </div>
+</template>
+
 <template name="classDisplay">
    <div class="classBox{{box}}" classid="{{_id}}" style="border:1px solid {{divColor 'textColor'}}">
        <span class="name classText">{{name}}</span>
@ -312,8 +364,19 @@
    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Owner</h4>
        {{> classInfoUserDisp classInfo 'admin'}}
+        {{#unless classInfo 'personal'}}
+            {{#if classInfo 'mine'}}
+                <i class="fa fa-pencil-square-o" aria-hidden="true" onmouseover="$(this).css('color','{{divColor 'iconHighlight'}}')" onmouseleave="$(this).css('color','{{divColor 'textColor'}}')"></i>
+            {{/if}}
+        {{/unless}}
    </div>
    {{> classInfoCode classInfo 'code'}}
+
+    <div id="changeAdminWrapper">
+        <span>Change Admin: </span>
+        <input id="changeAdmin">
+        <div id="adminSubmit">Change</div>
+    </div>
 </template>

 <template name="classInfoUsers">
--- a/hourglass/client/menus/menus.js
+++ b/hourglass/client/menus/menus.js
@ -233,7 +233,11 @@ Template.registerHelper("classInfo", (info) => {
 Template.registerHelper("classInfoMode", (mode, check) => {
    if(typeof check === "string") return Session.equals("classInfoMode",mode);
    return (Session.equals("classInfoMode", mode)) ? Session.get("user").preferences.theme.modeHighlight + ";background-color:rgba(0,0,0,0.1);" : "rgba(0,0,0,0)";
-})
+});
+
+Template.registerHelper("classSelected", () => {
+    return !Session.equals("classInfo", null);
+});

 Template.manageClass.events({
    'click .classBox' (event) {
@ -248,6 +252,31 @@ Template.manageClass.events({
    'click #classInfoModeWrapper span:last-child' () {
        if(Session.equals("classInfoMode","users")) return;
        toggleToClassInfoMode("users");
+    },
+    'click .infoCard .fa-pencil-square-o' () {
+        $("#changeAdminWrapper").fadeIn(250);
+    },
+    'click #adminSubmit' () {
+        var input = document.getElementById("changeAdmin");
+        var value = input.value;
+        var classid = Session.get("classInfo");
+        var user = Meteor.users.findOne({
+            "services.google.email": value
+        });
+        if(!user)  {
+            sAlert.error("Invalid email!", {
+                effect: 'stackslide',
+                position: 'top',
+                timeout: 3000
+            });
+            return;
+        }
+        serverData = [
+            user._id,
+            classid
+        ];
+        sendData("changeAdmin");
+        input.value = "";
    }
 });

@ -315,7 +344,7 @@ Template.joinClass.events({
    'click .classBox' (event) {
        var classId = event.target.getAttribute("classid");
        if(Session.equals("classInfo",classId)) return;
-        toggleToClassInfo(classId); 
+        toggleToClassInfo(classId);
    },
    'click #classInfoModeWrapper span:first-child' () {
        if(Session.equals("classInfoMode","general")) return;
@ -355,6 +384,27 @@ Template.joinClass.events({
                return b.subscribers - a.subscribers
            }));
        } catch (err) {}
+    },
+    'click #private' () {
+       $("#privateCode").css('display','inline-block');
+       var input = document.getElementById("privateCode");
+       input.focus();
+       if(input.value === "") return;
+       Meteor.call("joinPrivateClass", input.value, function(error, result) {
+            if(result) {
+                sAlert.success("Joined!", {
+                    effect: 'genie',
+                    position: 'bottom-right',
+                    timeout: 1500
+                });
+            } else {
+                sAlert.error("Invalid code!", {
+                    effect: 'stackslide',
+                    position: 'top',
+                    timeout: 1500
+                });
+            }
+        });
    }
 });

@ -422,6 +472,7 @@ Template.classInfoCode.events({
 toggleToMode = function(mode) {
    $("#mainBody").fadeOut(250, function() {
        (Session.equals("sidebarMode", "option")) ? Session.set("settingMode", mode) : Session.set("mode",mode);
+        Session.set("classInfo", null);
        $("#mainBody").fadeIn(250);
    });
 }
@ -445,6 +496,7 @@ toggleToSidebar = function(sidebar) {
 }

 toggleToClassInfo = function(classId) {
+    $("#changeAdminWrapper").fadeOut(250);
    $("#infoClassCont").fadeOut(250, function() {
        Session.set("classInfo", classId);
        Session.set("classInfoMode", "general");