UrbanStrategies · spjika · Feb 23, 2016 · Feb 23, 2016 · Feb 23, 2016 · Feb 25, 2016
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+.DS_Store
diff --git a/Procfile b/Procfile
@@ -0,0 +1 @@
+web: vendor/bin/heroku-php-apache2 .
diff --git a/README.md b/README.md
@@ -1,5 +1,41 @@
-dd2014
+techPathWays.org
 ======
 
-Measure DD Redistricting Commission
-Simple page to raise awareness about DD
+Initial design for techPathWays.org
+
+# The App
+
+* The code repo is in https://github.com/UrbanStrategies/techpathways/ - in case you are reading this elsewhere than Github.
+* `app_ui` is the main and dev codebase for deploying to the Heroku app (resolving from techpathways.herokuapp.com) (that uses a PHP build pack.)
+* It is an "SPA" (single page application) using Angular 1.5.2.
+* It is deployed to Heroku at techpathways.herokuapp.com with the PHP build pack. The `index.php` file simply serves `app_main_page.html`
+
+# Deployment to www
+
+There are two branches to target for a deploy:
+
+* `gh-pages` that will deploy www.techpathways.org via Github Pages
+* `app_ui` which is the main and dev codebase for deploying to the Heroku app (that uses a PHP build pack.)
+
+I have locally used `brochure_dev` as the branch to make changes destined for `gh-pages` [**Sameer**]
+
+# Data
+
+* Organizational data is stored in a Google spreadsheet.
+  * This spreadsheet is downloaded as a TSV file, and converted into JSON format via `data/produce_json.rb`. The input TSV is the first CLI argument.
+  * The output should be saved as `js/extracted_data.js`
+* The app's own data - the menu items, dropdown selections, etc - are `js/data.js`. There are keys in this file that refer to data coming from the Google spreadsheet ETL'ed above.
+* Run `gulp` in the root directory to compile SCSS into CSS. To use Watchman to do this, you can run the following command if you have Watchman installed, in the root folder: `cat gulp.watchman | watchman -j`
+* Open `app_main_page.html` in a browser to see the app; open `app_job_profiles.html` to see the job profiles page.
+
+# Architecture
+
+* The Angular app is tied to the `body` tag of `app_main_page.html`
+* The Angular app code is in `js/models.js` (main page) and `js/job_profiles_models.js` (job profiles page)
+* All the data is in `js/extracted_data.js` or in `js/data.js` - the latter has data like dropdown text etc. This is to keep the code easier to read.
+
+# Tests
+
+There are tests! You run them using Karma:
+
+`karma start`
diff --git a/app_job_profiles.html b/app_job_profiles.html
@@ -0,0 +1,231 @@
+<!DOCTYPE html>
+<html lang="en" ng-app='techpaths'>
+
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
+
+    <!-- downloaded ang 1.5.2 -->
+    <script src='js/externals/angularjs/angular.js'></script>
+    <script src="js/externals/angularjs/angular-route.js"></script>
+    <script src="js/externals/jquery/jquery-2.2.2.min.js"></script>
+
+
+    <script src='js/data.js'></script>
+    <script src='js/extracted_profile_data.js'></script>
+    <script src='js/job_profiles_models.js'></script>
+    <script src='js/app_job_profiles.js'></script>
+
+    <title>Tech Pathways</title>
+
+    <!-- Bootstrap Core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href='css/fa-source-4.5.css' rel='stylesheet'>
+
+    <!-- Custom CSS -->
+    <link href="css/agency_app.css" rel="stylesheet">
+    <link href="build/css/common.css" rel="stylesheet">
+    <link href="build/css/app.css" rel="stylesheet">
+    <link href="build/css/job_profiles.css" rel="stylesheet">
+</head>
+
+<body id="page-top" class="index" ng-controller='jobprofiles_ctrl'>
+  <div class='overlay-grayout'>
+    <!-- job profiles boxes -->
+    <div class='overlay'>
+	<div class='x-box'>
+	  <img src='img/close.svg'>
+	</div>
+	      <div class='profile-list' ng-repeat='profile_info in profile_list' ng-cloak>
+		<div class='profile-details-box' id='{{ "profile-" + profile_info['id']}}' ng-show='is_on(profile_info["key"])'>
+		  <div class='row para-row align-center '>
+		    <div class='col-xs-12 '>
+		      <div class='big-font'>
+			{{ profile_info['name'] }}
+		      </div>
+		    </div>
+		    <div class='col-xs-12'>
+		      <div class='normal-font'>
+			Purpose: {{ profile_info['tag_line'] }}
+		      </div>
+		    </div>
+		  </div>
+		  <div class='row para-row  align-center '>
+		    <div class='col-xs-12 '>
+		      <div class='salary-main'>
+			<span class='bold-font'>
+			  {{ entry_salary_choice(profile_info) }} annual
+			</span>
+			<span class='small-font'>
+			  (median entry level)
+			</span>
+		      </div>
+
+		      <div class='salary-senior'>
+			<span class='small-font'>
+			  {{ tenyear_message(profile_info) }}
+			</span>
+
+		    </div>
+		    <div class='col-xs-12 para-row'>
+		      <div class='medium-font'>
+			{{ profile_info['wage_range'] }}
+		      </div>
+		    </div>
+		  </div>
+
+		  <!-- everything below salary -->
+		  <div class='cancel-margins row para-row align-center '>		    
+		    <div class='col-xs-6 '>
+		      <div class='row cancel-margins'>
+			<div class='col-xs-12 margin-bottom'>
+			  <div class='subpara-title'>
+			    What do you need to succeed at this job?
+			  </div>
+			  <div class='subpara-text'>
+			    {{ profile_info['description'] }}
+			  </div>
+			</div>
+
+			<div class='col-xs-12'>
+			  <div class='subpara-title'>
+			    Activities
+			  </div>
+			  <ul class='subpara-text' ng-cloak>
+			    <li ng-repeat='skill in profile_info["activities"]' >
+			      {{ skill }}
+			    </li>
+			  </ul>
+			</div>
+
+		      </div>
+		    </div>
+		    <div class='col-xs-6 '>
+		      <div class='row'>
+			<div class='col-xs-12'>
+			  <div class='subpara-title'>
+			    Skills required for this pathway
+			  </div>
+			  <ul class='subpara-text' ng-cloak>
+			    <li ng-repeat='skill in profile_info["skills"]' >
+			      {{ skill }}
+			    </li>
+			  </ul>
+			</div>
+		      </div>
+		    </div>
+		  </div>
+		</div>
+	      </div>
+	    </div>
+	  </div>
+	</div>
+
+<!-- Navigation -->
+<nav class="navbar navbar-default navbar-fixed-top">
+  <div class="container headercontainer">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header page-scroll">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand " href="http://techpathways.org">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.66 60.1"><title>logo</title><path id="pathway" d="M242,351.38h25.4a3.78,3.78,0,0,1,3.77,3.77l0,7.29a6.59,6.59,0,0,0,6.55,6.55h74.91a3.72,3.72,0,0,1,3.73,3.77v7.29h2.78l0-7.29a6.59,6.59,0,0,0-6.55-6.55H277.67a3.72,3.72,0,0,1-3.73-3.77v-7.29a6.48,6.48,0,0,0-2.53-5.14,6.5,6.5,0,0,0,2.53-5.18v-7.25a3.79,3.79,0,0,1,3.77-3.81h38.07a6.59,6.59,0,0,0,6.55-6.55l0-7.29h-2.78v7.29a3.72,3.72,0,0,1-3.73,3.77H284.23v0h-6.52a6.53,6.53,0,0,0-6.55,6.55v7.25a3.79,3.79,0,0,1-3.77,3.81H242v2.73Z" transform="translate(-242 -319.95)" style="fill:#3ea3ff"/><path d="M287.45,354.91a1.61,1.61,0,0,1-3.22,0v-6h3.11v-3h-3.11v-5.31h-3v5.31h-3.08v3h3.08v6a4.59,4.59,0,0,0,9.17,0v-1.48h-3v1.48Z" transform="translate(-242 -319.95)" style="fill:#fff"/><path d="M298.23,345.92a6.14,6.14,0,0,0-6.12,6.14v1.31a6.13,6.13,0,0,0,11.4,3.11L301,354.85a3.2,3.2,0,0,1-2.79,1.66,3.15,3.15,0,0,1-3-2.31h9.17v-2.15A6.14,6.14,0,0,0,298.23,345.92Zm-3,5.31a3.14,3.14,0,0,1,3-2.33,3.19,3.19,0,0,1,3.06,2.33H295.2Z" transform="translate(-242 -319.95)" style="fill:#fff"/><path d="M312.48,348.87a3.2,3.2,0,0,1,2.87,1.85l2.68-1.34A6.14,6.14,0,0,0,306.36,352v1.34A6.13,6.13,0,0,0,318,356l-2.71-1.26a3.14,3.14,0,0,1-6-1.34V352A3.17,3.17,0,0,1,312.48,348.87Z" transform="translate(-242 -319.95)" style="fill:#fff"/><path d="M325.6,345.92a5.92,5.92,0,0,0-3.14.86v-6.17h-3v18.88h3V352a3.13,3.13,0,0,1,3.14-3.14,3.17,3.17,0,0,1,3.17,3.17v7.43h3v-7.43A6.14,6.14,0,0,0,325.6,345.92Z" transform="translate(-242 -319.95)" style="fill:#fff"/><path d="M340.75,340.61H334v18.88h3v-7.94h3.81A5.47,5.47,0,1,0,340.75,340.61Zm0,7.94h-3.81v-5h3.81A2.48,2.48,0,1,1,340.75,348.55Z" transform="translate(-242 -319.95)" style="fill:#fff"/><path d="M356.13,346.78a6.15,6.15,0,0,0-9.28,5.28v1.31a6.13,6.13,0,0,0,6.12,6.12,6.35,6.35,0,0,0,3.17-.86v0.86h3V345.92h-3v0.86Zm0,6.6a3.15,3.15,0,0,1-6.3,0v-1.31a3.15,3.15,0,1,1,6.3,0v1.31Z" transform="translate(-242 -319.95)" style="fill:#fff"/><path d="M370.07,354.91a1.61,1.61,0,0,1-3.22,0v-6H370v-3h-3.11v-5.31h-3v5.31h-3.08v3h3.08v6a4.59,4.59,0,0,0,9.17,0v-1.48h-3v1.48Z" transform="translate(-242 -319.95)" style="fill:#fff"/><path d="M380.86,345.92a5.92,5.92,0,0,0-3.14.86v-6.17h-3v18.88h3V352a3.13,3.13,0,0,1,3.14-3.14,3.17,3.17,0,0,1,3.17,3.17v7.43h3v-7.43A6.14,6.14,0,0,0,380.86,345.92Z" transform="translate(-242 -319.95)" style="fill:#fff"/><polygon points="155.2 29.81 154.31 25.97 151.31 25.97 150.42 29.81 149.7 20.66 146.69 20.66 148.22 39.55 151.2 39.55 152.81 32.7 154.42 39.55 157.42 39.55 158.95 20.66 155.95 20.66 155.2 29.81" style="fill:#fff"/><path d="M411.39,346.78a6.15,6.15,0,0,0-9.28,5.28v1.31a6.13,6.13,0,0,0,6.12,6.12,6.35,6.35,0,0,0,3.17-.86v0.86h3V345.92h-3v0.86Zm0,6.6a3.15,3.15,0,0,1-6.3,0v-1.31a3.15,3.15,0,1,1,6.3,0v1.31Z" transform="translate(-242 -319.95)" style="fill:#fff"/><polygon points="180.17 34.69 177.22 25.97 174.06 25.97 178.59 39.3 176.69 44.94 179.82 44.94 186.31 25.97 183.15 25.97 180.17 34.69" style="fill:#fff"/><path d="M435.29,351.29c-1-.16-1.23-0.24-1.93-0.38s-1.18-.4-1.18-0.86a1.14,1.14,0,0,1,1.15-1.15h1.47a2.49,2.49,0,0,1,2.33,1.66l2.82-1a5.49,5.49,0,0,0-5.15-3.65h-1.47a4.13,4.13,0,0,0-4.13,4.13c0,3.06,2.79,3.67,5.28,4.05,1.07,0.16,1.29.24,2,.38a1.12,1.12,0,0,1,1.15.86,1.19,1.19,0,0,1-1.15,1.18h-3a2.49,2.49,0,0,1-2.33-1.66l-2.82,1a5.46,5.46,0,0,0,5.15,3.65h3a4.14,4.14,0,0,0,4.13-4.16C440.66,352.28,437.81,351.66,435.29,351.29Z" transform="translate(-242 -319.95)" style="fill:#fff"/></svg>
+                </a>
+            </div>
+
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav navbar-right">
+                    <li class="hidden">
+                        <a href="#page-top"></a>
+                    </li>
+                    <li>
+                        <a class="page-scroll" href="/">Find Training Programs</a>
+                    </li>
+                    <li>
+                        <a class="page-scroll" href="/app_job_profiles.html">Career Paths</a>
+                    </li>
+                    <li>
+                        <a class="page-scroll" href="http://techpathways.org/#contact">Contact Us</a>
+                    </li>
+                </ul>
+            </div>
+            <!-- /.navbar-collapse -->
+        </div>
+        <!-- /.container-fluid -->
+    </nav>
+
+    <section id="contact" class='app-contact'>
+      <div class=modal-main id=modal-main>
+	<div class=modal-container>
+	</div>
+      </div>
+      <div id="dotgenerator">
+        <div class="brackets"></div>
+        <div class="dots"></div>
+        <div class="hash"></div>
+      </div>
+      <div class="container main-container">	
+        <div class="row table-label-1">
+	  <div class='col-xs-12 '>
+	    <div class='col-xs-12 text-center'>
+	      Job Profiles For
+	    </div>
+	    <div class='filter-set' ng-repeat='group_name in profile_groups[1]' ng-cloak>
+	      <div class='col-xs-3 selected-filter filter-box' ng-class='getFilterDisplay($index, profile_groups)' ng-click='setCurrentProfileGroup($index)'>
+		{{ group_name }}
+	      </div>
+	    </div>
+	  </div>
+	</div> <!-- table label-1 -->
+
+	<div class='row job-profile-list' >
+	  <div id='{{"jp-box-" + profile["id"]}}' ng-repeat='profile in job_profiles' ng-show='matches_filter(profile)' class='col-sm-6 col-xs-12 jp-box' ng-click='turn_on(profile["key"])' ng-cloak>
+	    <div class='title-box'>
+	      {{ find_profile_data(profile['key'])['name'] }}
+	    </div>
+	    <div class='description-box'>
+	      {{ find_profile_data(profile['key'])['purpose_tiny'] }}
+	    </div>
+	    <div class='jp-box-overlay-frill'></div>
+
+	  </div>
+      </div> <!-- ang repeater for all profiles
+    </section>
+
+    <!-- Bootstrap Core JavaScript -->
+    <script src="js/bootstrap.min.js"></script>
+
+    <!-- Plugin JavaScript -->
+    <script src="js/jquery_easing.js"></script>
+    <script src="js/classie.js"></script>
+    <script src="js/cbpAnimatedHeader.js"></script>
+    <script src="js/tween_max.js"></script>
+    <script src="js/app.js"></script>
+
+    <!-- Custom Theme JavaScript -->
+    <script src="js/agency.js"></script>
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-697750-18', 'auto');
+  ga('send', 'pageview');
+
+</script>
+
+
+</body>
+
+</html>