Sign-in Sheet

Description

A sign-in sheet site built with AngularJS

Users can choose between the Student or Teacher page. Students can toggle their status between signed-in and signed-out. Teachers can view which students are signed-in and which are signed-out.

In the most basic sense, this app is a list of objects the can be filtered into two groups. The student object's beginning state is "signed in : false." A method found in the "AttendanceController.js" switches the state of signed in to "true". The signed in student is the then filtered in the html or "view" to be displayed in the list "signed in"

See Code examples below to see these steps:

code highlight: 
 /* from student.html */ 
<ul class="students" ng-controller="AttendanceCtrl">
    <li ng-repeat="item in filtered = (students | orderBy:'lastName')" class="group">
        <img class="student__img" ng-src="{{item.image}}">
        <h3 class="student__name" >{{item.name}}</h3>

        <a ng-hide="item.isHere" ng-click="signInStudent(item)" class="signIn__btn">Sign In</a>
        <a ng-hide="!item.isHere" ng-click="signOutStudent(item)" class="signOut__btn">Sign Out</a>
    </li>
</ul>
    
 /* from StudentsFactory.js */ 
factory.students = [{
        name: "Juan Epstein",
        lastName: "Epstein",
        image: "/image/epstein.jpg",
        isHere: false  /*  each student object has this property at creation */  
    }];

 /* from AttendanceController.js */  
.signInStudent = function(student) {
        student.isHere = true;
};

 /* from teacher.html */  
<div>
    <h2 class="main__title">Who is here</h2>
    <ul class="students">
        <li ng-repeat="item in filtered = (students | filter:{isHere: true})" class="group">
          <img class="student__img--sm" ng-src="{{item.image}}">
          <h3 class="student__name" >{{item.name}}</h3>
        </li>
    </ul>
</div>