Upgraded to Meteor 1.6.0.1 and NodeJS 8.9.3. Added weekly/daily property to venues to support graphing and tracking of actual income from farmers markets (they don't usually match with expected income). Added workers objects to help illustrate who did what work (who was at the market on a specific week for example, or who prep'd and who canned a batch of jam). Fixed some bugs in the venue page. Re-design of the menu to allow for more menu options.

2017-12-31 14:06:46 -08:00
parent d8a6a31525
commit 6c17639e0c
31 changed files with 3082 additions and 219 deletions
--- a/imports/ui/layouts/Body.html
+++ b/imports/ui/layouts/Body.html
@@ -1,8 +1,8 @@
 <template name="Body">
 	{{> sAlert}}
 	<div id="mainBody" class="mainBody">
-		<nav class="leftSidebarContainer">
-			<a href="javascript:" class="fa fa-bars leftSidebarMenuButton" aria-hidden="true"></a>
+		<nav class="leftSidebarContainer generalSidebar">
+			<a href="javascript:" class="fa fa-balance-scale leftSidebarMenuButton generalMenuButton" aria-hidden="true"></a>
 			<div class="leftSidebar">
 				<div class="logoArea">
 					<i class="fa fa-sign-out fa-2x signOut" aria-hidden="true"></i>
@@ -10,7 +10,63 @@
 						<img src="/images/PetitTetonLogo_v2.png"/>
 					</div>
 				</div>
-				<div class="menuArea">
+				<div class="menuArea generalMenu">
+					<ul>
+						<li class="{{isActiveRoute 'Sales'}}">
+							<a href="{{pathFor 'Sales'}}">
+								Sales<!-- <a class="subMenu {{isActiveRoute 'SalesSheets'}}" href="{{pathFor 'SalesSheets'}}">Sales Sheets</a>-->
+							</a>
+						</li>
+						<li class="{{isActiveRoute 'SalesSheets'}}">
+							<a href="{{pathFor 'SalesSheets'}}">
+								Sales Sheets
+							</a>
+						</li>
+						<li class="{{isActiveRoute 'Production'}}">
+							<a href="{{pathFor 'Production'}}">
+								Production<!-- <span class="tag">sample</span>-->
+							</a>
+						</li>
+					</ul>
+				</div>
+				<div class="footer">
+					&copy; Petit Teton LLC 2017
+				</div>
+			</div>
+		</nav>
+		<nav class="leftSidebarContainer graphsSidebar">
+			<a href="javascript:" class="fa fa-line-chart leftSidebarMenuButton graphsMenuButton" aria-hidden="true"></a>
+			<div class="leftSidebar">
+				<div class="logoArea">
+					<i class="fa fa-sign-out fa-2x signOut" aria-hidden="true"></i>
+					<div class="logo">
+						<img src="/images/PetitTetonLogo_v2.png"/>
+					</div>
+				</div>
+				<div class="menuArea graphsMenu">
+					<ul>
+						<li class="{{isActiveRoute 'Graphs'}}">
+							<a href="{{pathFor 'Graphs'}}">
+								Graphs
+							</a>
+						</li>
+					</ul>
+				</div>
+				<div class="footer">
+					&copy; Petit Teton LLC 2017
+				</div>
+			</div>
+		</nav>
+		<nav class="leftSidebarContainer settingsSidebar">
+			<a href="javascript:" class="fa fa-cogs leftSidebarMenuButton settingsMenuButton" aria-hidden="true"></a>
+			<div class="leftSidebar">
+				<div class="logoArea">
+					<i class="fa fa-sign-out fa-2x signOut" aria-hidden="true"></i>
+					<div class="logo">
+						<img src="/images/PetitTetonLogo_v2.png"/>
+					</div>
+				</div>
+				<div class="menuArea settingsMenu">
 					<ul>
 						{{#if isInRole 'manage'}}
 							<li class="{{isActiveRoute 'UserManagement'}}">
@@ -24,21 +80,6 @@
 								</a>
 							</li>
 						{{/if}}
-						<li class="{{isActiveRoute 'Sales'}}">
-							<a href="{{pathFor 'Sales'}}">
-								Sales <a class="subMenu {{isActiveRoute 'SalesSheets'}}" href="{{pathFor 'SalesSheets'}}">Sales Sheets</a>
-							</a>
-						</li>
-						<!--<li class="{{isActiveRoute 'SalesSheets'}}">-->
-							<!--<a href="{{pathFor 'SalesSheets'}}">-->
-								<!--Sales Sheets-->
-							<!--</a>-->
-						<!--</li>-->
-						<li class="{{isActiveRoute 'Production'}}">
-							<a href="{{pathFor 'Production'}}">
-								Production<!-- <span class="tag">sample</span>-->
-							</a>
-						</li>
 						<li class="{{isActiveRoute 'Products'}}">
 							<a href="{{pathFor 'Products'}}">
 								Products
@@ -64,9 +105,9 @@
 								Venues
 							</a>
 						</li>
-						<li class="{{isActiveRoute 'Graphs'}}">
-							<a href="{{pathFor 'Graphs'}}">
-								Graphs
+						<li class="{{isActiveRoute 'Workers'}}">
+							<a href="{{pathFor 'Workers'}}">
+								Workers
 							</a>
 						</li>
 					</ul>
--- a/imports/ui/layouts/Body.import.styl
+++ b/imports/ui/layouts/Body.import.styl
@@ -44,7 +44,6 @@
 		.leftSidebarMenuButton
 			position: absolute
 			right: -30px
-			top: 10px
 			-webkit-transition: .5s ease-in
 			-moz-transition: .5s ease-in
 			-o-transition: .5s ease-in
@@ -67,8 +66,22 @@
 			padding: 5px 0
 			background-color: #90b272
 			display: block
+			border-top: 1px solid #494
+			border-right: 1px solid #494
+			border-bottom: 1px solid #494
 		.leftSidebarMenuButton:hover
 			color: rgba(150,0,0,.5)
+	nav.generalSidebar
+		.leftSidebarMenuButton
+			top: 10px
+	nav.graphsSidebar
+		.leftSidebarMenuButton
+			top: 50px
+	nav.settingsSidebar
+		.leftSidebarMenuButton
+			top: 90px
+	nav.menuHide .leftSidebarMenuButton
+		right: 60px
 	nav.menuShow
 		margin: 0
 	nav.menuShow .leftSidebarMenuButton
@@ -79,8 +92,9 @@
 		-ms-transform: rotate(45deg) !important
 		transform: rotate(45deg) !important
 		-moz-border-radius-bottomright: 0
-		border-top-right-radius: 0
+		//border-top-right-radius: 0
 		border-bottom-right-radius: 0
+		border-bottom: 0
 	.leftSidebar
 		flex: 0 0 auto
 		display: flex
--- a/imports/ui/layouts/Body.js
+++ b/imports/ui/layouts/Body.js
@@ -1,19 +1,54 @@
 import { Template } from 'meteor/templating';
 import './Body.html';

+Template.Body.toggleMenu = function($sidebar) {
+	let $sidebars = $('nav.leftSidebarContainer');
+	
+	for(let i = 0; i < $sidebars.length; i++) {
+		if($sidebars[i] == $sidebar[0]) {
+			$sidebar.toggleClass('menuShow');
+		}
+		else {
+			$($sidebars[i]).toggleClass('menuHide');
+		}
+	}
+};

 Template.Body.events({
 	"click .signOut": function(event, template) {
 		AccountsTemplates.logout();
 	},
-	"click .leftSidebarMenuButton": function(event, template) {
+	// General Menu
+	"click .generalSidebar .leftSidebarMenuButton": function(event, template) {
 		event.preventDefault();
-		$('nav.leftSidebarContainer').toggleClass('menuShow');
+		Template.Body.toggleMenu($('nav.generalSidebar'));
 	},
-	"click .menuArea a": function(event, template) {
-		$('nav.leftSidebarContainer').toggleClass('menuShow');
+	"click .generalSidebar .leftSidebar a": function(event, template) {
+		Template.Body.toggleMenu($('nav.generalSidebar'));
 	},
-	"click .menuArea a .subMenu": function(event, template) {
-		$('nav.leftSidebarContainer').toggleClass('menuShow');
+	"click .generalSidebar .leftSidebar a .subMenu": function(event, template) {
+		Template.Body.toggleMenu($('nav.generalSidebar'));
+	},
+	// Graphs Menu
+	"click .graphsSidebar .leftSidebarMenuButton": function(event, template) {
+		event.preventDefault();
+		Template.Body.toggleMenu($('nav.graphsSidebar'));
+	},
+	"click .graphsSidebar .leftSidebar a": function(event, template) {
+		Template.Body.toggleMenu($('nav.graphsSidebar'));
+	},
+	"click .graphsSidebar .leftSidebar a .subMenu": function(event, template) {
+		Template.Body.toggleMenu($('nav.graphsSidebar'));
+	},
+	// Settings Menu
+	"click .settingsSidebar .leftSidebarMenuButton": function(event, template) {
+		event.preventDefault();
+		Template.Body.toggleMenu($('nav.settingsSidebar'));
+	},
+	"click .settingsSidebar .leftSidebar a": function(event, template) {
+		Template.Body.toggleMenu($('nav.settingsSidebar'));
+	},
+	"click .settingsSidebar .leftSidebar a .subMenu": function(event, template) {
+		Template.Body.toggleMenu($('nav.settingsSidebar'));
 	}
 });
--- a/imports/ui/layouts/Full.html
+++ b/imports/ui/layouts/Full.html
@@ -1,7 +0,0 @@
-<template name="Full">
-	<div id="full" class="content">
-		<div class="form">
-			{{> Template.dynamic template=content}}
-		</div>
-	</div>
-</template>
--- a/imports/ui/layouts/Full.import.styl
+++ b/imports/ui/layouts/Full.import.styl
@@ -1,11 +0,0 @@
-#full.content
-	//width: 100%
-	//height: 100%
-	//background-image: linear-gradient(to bottom, #315481, #918e82 100%)'
-	background: white
-
-	.form
-		//margin: 5% auto 0 auto
-		margin: 0 auto
-		width: 300px
-
--- a/imports/ui/layouts/Full.js
+++ b/imports/ui/layouts/Full.js
@@ -1 +0,0 @@
-import './Full.html';
--- a/imports/ui/layouts/Login.html
+++ b/imports/ui/layouts/Login.html
@@ -0,0 +1,8 @@
+<template name="Login">
+	<div id="login" class="content">
+		<div class="contentBox">
+			<img src="/images/PetitTetonLogo_v2.png"/>
+			<div class="form">{{> Template.dynamic template=content}}</div>
+		</div>
+	</div>
+</template>
--- a/imports/ui/layouts/Login.import.styl
+++ b/imports/ui/layouts/Login.import.styl
@@ -0,0 +1,64 @@
+#login.content
+	//width: 100%
+	//height: 100%
+	//background-image: linear-gradient(to bottom, #315481, #918e82 100%)'
+	background: white
+	.contentBox
+		margin: 0 auto
+		max-width: 600px
+		background-color: #88d15a
+		-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
+		-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
+		box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
+		margin-top: 5%
+		padding: 40px 10px
+		text-align: center
+		img
+			height: 120px
+			vertical-align: top
+		.form
+			display: inline-block
+			margin-left: 20px
+			input
+				padding: 8px
+				width: 300px
+				margin-bottom: 10px
+			label
+				display: none
+			fieldset
+				border: none
+			.at-btn
+				margin-bottom: 6px
+				text-align: center
+				width: 300px
+				background: #34d955;
+				background-image: -webkit-linear-gradient(top, #5d942b, #4b7d26)
+				background-image: -moz-linear-gradient(top, #5d942b, #4b7d26)
+				background-image: -ms-linear-gradient(top, #5d942b, #4b7d26)
+				background-image: -o-linear-gradient(top, #5d942b, #4b7d26)
+				background-image: linear-gradient(to bottom, #5d942b, #4b7d26)
+				font-family: "Arial Black", Arial
+				color: #ffffff
+				font-size: 14px
+				line-height: 16px
+				padding: 10px 20px 10px 20px
+				text-decoration: none
+				text-transform: uppercase
+				border: none
+			.at-btn:hover
+				background: #29b54f
+				background-image: -webkit-linear-gradient(top, #29b54f, #186b31)
+				background-image: -moz-linear-gradient(top, #29b54f, #186b31)
+				background-image: -ms-linear-gradient(top, #29b54f, #186b31)
+				background-image: -o-linear-gradient(top, #29b54f, #186b31)
+				background-image: linear-gradient(to bottom, #29b54f, #186b31)
+				text-decoration: none
+				cursor: pointer
+			.at-link
+				color: #1555b4
+				font: Arial
+				font-size: 12px
+				font-weight: 800
+				text-decoration: none
+			.at-link:hover
+				text-decoration: underline
--- a/imports/ui/layouts/Login.js
+++ b/imports/ui/layouts/Login.js
@@ -0,0 +1 @@
+import './Login.html';