[#840]: Layout Created For CareerPath

app/MyApp/app/Router.js

@@ -95,7 +95,9 @@ $(function() {
             'checksum(/:nation/:url)': 'checkSum',
             'listLearnersCredits/:cid': 'showLearnersListForCredits',
             'passwordResetEmail': 'showPasswordResetEmail',
-            'password-reset': 'showPasswordReset'
+            'password-reset': 'showPasswordReset',
+            'courseCareerPath':'CourseCareerPath',
+            'courseCareerPath/add':'addCareerPath'
         },
         addOrUpdateWelcomeVideoDoc: function() {
             // fetch existing welcome video doc if there is any
@@ -2174,6 +2176,7 @@ $(function() {
                     var button = '<p id="library-top-buttons">'
                     button += '<a id="addCourseButton" class="btn btn-success" href="#course/add">'+App.languageDict.attributes.Add_Course+'</a>'
                     button += '<a id="requestCourseButton" class="btn btn-success" onclick=showRequestForm("Course")>'+App.languageDict.attributes.Request_Course+'</a>'
+                    button += '<a id="courseCareerPath" class="btn btn-info" style = "margin-left: 15px;" href="#courseCareerPath">'+App.languageDict.attributes.Course_Career_Path+'</a>'
                     button += '<span id="searchSpan"><input id="searchText" value="" size="30" style="height:24px;margin-top:1%;" type="text"><span style="margin-left:10px">'
                     button += '<button class="btn btn-info" onclick="CourseSearch()">'+App.languageDict.attributes.Search+'</button></span>'
                     button += '</p>'
@@ -6728,6 +6731,25 @@ $(function() {
             });
             passwordResetView.render();
             App.$el.children('.body').append(passwordResetView.el)
+        },
+        CourseCareerPath:function(){
+            var coursePath = new App.Views.CourseCareerPath();
+            coursePath.render()
+            App.$el.children('.body').html('<div id="CareerPath"></div>');
+            $('#CareerPath').append('<div><h2>'+App.languageDict.attributes.Course_Career_Path+'</h2></div>')
+            $('#CareerPath').append(coursePath.el);
+            var directionOfLang = App.languageDict.get('directionOfLang');
+            applyCorrectStylingSheet(directionOfLang)
+        },
+        addCareerPath:function(){
+            var addCourseCareer = new App.Views.AddCourseCareer();
+            addCourseCareer.render()
+            App.$el.children('.body').html('<div id="ManageCourseCareer"></div>');
+            $('#ManageCourseCareer').append('<div><h2>'+App.languageDict.attributes.Add_Multiple_Courses+'</h2></div>')
+            $('#ManageCourseCareer').append(addCourseCareer.el);
+            var directionOfLang = App.languageDict.get('directionOfLang');
+            applyCorrectStylingSheet(directionOfLang) 
+
         }
     }))
 })

app/MyApp/app/models/CoursecarrerPath.js

@@ -0,0 +1,24 @@
+$(function() {
+
+    App.Models.CourseCareerPath = Backbone.Model.extend({
+
+        idAttribute: "_id",
+        url: function() {
+            if (_.has(this, 'id')) {
+                var url = (_.has(this.toJSON(), '_rev')) ? App.Server + '/coursecareerpath/' + this.id + '?rev=' + this.get('_rev') // For UPDATE and DELETE
+                    : App.Server + '/coursecareerpath/' + this.id // For READ
+            } else {
+                var url = App.Server + '/coursecareerpath' // for CREATE
+            }
+            return url
+        },
+        defaults: {
+            kind: 'coursecareerpath'//Saves kind of document according to corresponding db's.Mostly used in couch db views.
+        },
+        schema: {
+            Level_Name: 'Text', .
+            Courses: [], //Array:Multiple Courses
+            CourseCareer: []//Array:Arranging the Courses
+        }
+    })
+})

app/MyApp/app/views/AddCourseCareer.js

@@ -0,0 +1,24 @@
+$(function() {
+
+    App.Views.AddCourseCareer = Backbone.View.extend({
+        template: $('#template-addCourseCareer').html(),
+        vars: {},
+        events: {
+        },
+         "click .back_button":function()
+            {  
+                Backbone.history.navigate('courseCareerPath' + this.levelId + '/' + this.revId, {
+                    trigger: true
+                })
+            },
+        initialize: function() {
+
+        },
+        render: function() {
+            this.$el.html(_.template(this.template,this.vars))
+        }
+
+
+    })
+
+})

app/MyApp/app/views/CourseCareerPath.js

@@ -0,0 +1,19 @@
+$(function() {
+
+    App.Views.CourseCareerPath = Backbone.View.extend({
+        template: $('#template-courseCareerPath').html(),
+        vars: {},
+        events: {
+        },
+
+        initialize: function() {
+
+        },
+        render: function() {
+            this.$el.html(_.template(this.template,this.vars))
+        }
+
+
+    })
+
+})

app/MyApp/index.html

@@ -256,7 +256,8 @@
     <script src="app/views/ReportsTable.js"></script> <!-- app/views.js -->
     <script src="app/views/ReportForm.js"></script> <!-- app/views.js -->
     <script src="app/views/CommunityReportCommentView.js"></script> <!-- app/views.js -->
-
+    <script src="app/views/CourseCareerPath.js"></script> <!-- app/views.js -->
+    <script src="app/views/AddCourseCareer.js"></script> <!-- app/views.js -->
     <script src="app/views/CourseLevelsTable.js"></script> <!-- app/views.js -->
     <script src="app/views/ResourceForm.js"></script> <!-- app/views.js -->
     <script src="app/views/MeetupInvitation.js"></script> <!-- app/views.js -->
@@ -1438,6 +1439,58 @@ <h4 style="width:25em;word-wrap:break-word;">
             </tr>
         </table>
     </script>
+
+    <script type="text/template" id="template-courseCareerPath">
+        <hr/>
+        <button style="margin-top: -186px; margin-left: 536px;" class='btn btn-primary' id="addNewCoursePath" onclick = "document.location.href='#courseCareerPath/add'" >Add New Career</button>
+        <button class="back_button btn btn-primary" style = "margin-left: -677px;"
+        onclick = "document.location.href='#courses'"><%= languageDict.attributes.Back_To_Course %></button>
+        <input id="searchText" type="Text" placeholder="Course Career Name" style="margin-top: -165px; margin-left: 1051px; height: 28px; width: 170px;">
+        <button style="margin-top: -242px; margin-left: 1395px;" class="Search btn btn-info" id="SearchCoursePath" >Search</button>
+        <div>
+            <table class="btable btable-striped">>
+                    <th>Course Career</th>
+            </table>
+        </div>
+    </script>
+    <script type="text/template" id="template-addCourseCareer">
+        <button class="back_button btn btn-primary" onclick = "document.location.href='#courseCareerPath'"><%= languageDict.attributes.Back_To_Course_Career %></button>
+        <hr/>
+        <h4 id="new-quiz"><%= languageDict.attributes.New_Career_Path %></h4>
+        <style>
+            input[type=text], select { width: 22%%;padding: 26px 16px; margin:15px 4px;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}
+            input[type=submit] { width: 100%;background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;
+                border: none;border-radius: 4px;cursor: pointer;}}
+        </style>
+        <div>
+            <form action="/action_page.php">
+                <label for="fname">Level Name</label>
+                <input type="text" id="fname" name="firstname" placeholder="Leve Name">
+                <label for="lname">Course Career Path Name</label>
+                <input type="text" id="lname" name="lastname" placeholder="Course Career Path Name">
+                <label for="country">List of Courses</label>
+                <select id="country" Placeholder="List of Courses" name="country">
+                  <option value="australia">Australia</option>
+                  <option value="canada">Canada</option>
+                  <option value="usa">USA</option>
+                </select>
+                <button id="AddCareerPath" class="course btn btn-success" style="margin-left: 23px;">Create Course Career</button>
+                <button id ="CancelCOursePath" class="btn resignBtn btn-danger" style="margin-left: 23px;" >Cancel</button>
+            </form>
+        </div>
+        <div>
+        <table class="btable btable-striped">
+                <tbody><tr><th style="width: 430px">Course Career</th>
+                    <th>Action</th>
+                        </tr>
+                            <td> </td>
+                        </tr>
+                </tbody>
+            </table
+        </div>
+
+    </script>
+
     <script type="text/html" id="template-courseLevelsTable">
         <h3 class="bigheader">
         <div style="width:95%"><%= languageDict.attributes.Step%>-<%= step%>: <b>&nbsp;&nbsp; <%=title%></b>

databases/coursecareerpath.js

@@ -0,0 +1,24 @@
+var couchapp = require('couchapp'),
+    path = require('path');
+
+ddoc = {
+    _id: '_design/bell'
+}
+
+ddoc.views = {
+    GetCourseCareerById: {
+        map: function(doc) {
+            if (doc._id ) {
+                emit(doc._id, doc);
+            }
+        }
+    },
+    GetCourseCareerByMember: {
+        map: function(doc) {
+            if (this.MemberID != "") {
+                emit([doc.MemberID], doc);
+            }
+        }
+    },
+}
+module.exports = ddoc;