AngularJS-我想对我的HTML中的可编辑字段实施if-check

Question

I have built my first AngularJS page and it checks in new visitors and checks out any active visitors on the list. The app also allows the user to select any active visitor and edit/modify their information. However my issue is that, during modification, I have no control (as per my limited understanding).

The HTML looks like this:

<table>
    <tr>
       <td></td>
        <td><b>Visitor</b></td>
        <td><b>Title</b></td>
        <td><b>Visitee</b></td>
        <td><b>Arrival</b></td>
        <td><b>Departure</b></td>
        <td><b>Status</b></td>
     </tr>
     <tr data-ng-repeat="user in userList">
        <td><a data-ng-click="selectUser(user)">Select</a></td>
        <td>{{user.Visitor}}</td>
        <td>{{user.Title}}</td>
        <td>{{user.Visitee}}</td>
        <td>{{user.Arrival}}</td>
        <td>{{user.Departure}}</td>
        <td><b>{{user.Status}}</b></td>
     </tr>
</table>

Above is the table structure that shows information about checked in visitors (also shows checked-out visitors with a non-active status field).

There is a "Select" link that allows the user to select any particular visitor and their information gets populated into an editable group of textboxes:

<div>
    <div style="display: inline-block;">
        Visitor: 
    </div>
    <div style="display: inline-block; margin-left: 28px; width: 383px;">
        <input type="text" data-ng-model="currentUser.Visitor">
    </div>
</div>
<div style="margin-top: 20px"></div>
<div class="row" style="margin-left: 30px">
    <div style="display: inline-block;">
        Title: 
    </div>
    <div style="display: inline-block; margin-left: 40px;">
        <input type="text" data-ng-model="currentUser.Title">
    </div>
</div>
<div style="margin-top: 20px"></div>
<div class="row" style="margin-left: 30px">
    <div style="display: inline-block;">
        Visitee: 
    </div>
    <div style="display: inline-block; margin-left: 24px;">
        <input type="text" data-ng-model="currentUser.Visitee" >
    </div>
</div>
<div style="margin-top: 20px"></div>
<div class="row" style="margin-left: 30px">
    <div style="display: inline-block;">
        Arrival:
    </div>
    <div style="display: inline-block; margin-left: 25px;">
        <input type="text" data-ng-model="currentUser.Arrival">
    </div>
</div>
<div style="margin-top: 20px"></div>
<div class="row" style="margin-left: 30px">
    <div style="display: inline-block;">
        Departure:
    </div>
    <div style="display: inline-block; margin-left: 0px;">
        <input type="text" data-ng-model="currentUser.Departure">
    </div>
</div>

To checkin and checkout visitors I have the following buttons in html that call their respective functions in my JavaScript code:

<div>
    <div style="margin: 2% 0 0 8%; display: inline-block">
        <button data-ng-click="addNew(currentUser)" class="btn btn-primary" type="button">Add New Check-in</button>
    </div>
    <div style="margin: 2% 0 0 1%; display: inline-block">
        <button data-ng-click="removeItem(currentUser)" class="btn btn-primary" type="button">Check-out</button>
    </div>
</div>

My JS file looks like this:

var app = angular.module('myApp', ['ngTouch', 'ui.grid']);
app.controller('UserController', ['$scope', '$filter', function ($scope, $filter) {
    $scope.selectUser = function (user) {
        $scope.currentUser = user;
    }
    $scope.userList = [
       { Visitor: "John Doe1", Title: "Lawyer", Visitee: "James Smith1", Arrival: "01/01/2016 10:45 AM", Departure: "01/01/2016 12:55 PM", Status: "N"},
       { Visitor: "John Doe2", Title: "Contractor Dude", Visitee: "James Smith2", Arrival: now, Departure: tentative_departureTime, Status: "A" },
       { Visitor: "John Doe3", Title: "Attorney", Visitee: "James Smith3", Arrival: now, Departure: tentative_departureTime, Status: "A" },
       { Visitor: "John Doe4", Title: "Maintenance Guy", Visitee: "James Smith4", Arrival: past_checkinTime, Departure: expired_departureTime, Status: "N" }
    ];
    $scope.addNew = function (currentUser) {      
        var now = new Date();
        var departureTime = new Date(now.getTime() + 2 * 60 * 60 * 1000);
        departureTime = departureTime.format("MM/dd/yyyy, hh:mm tt");
        $scope.currentUser.Arrival = $filter('date')(new Date(), 'MM/dd/yyyy, hh:mm a');
        $scope.currentUser.Departure = $filter('date')(departureTime);
        $scope.currentUser.Status = "Active";
        $scope.userList.push(angular.extend({}, currentUser));
        $scope.currentUser = {}; //clear out Employee object
    };
    $scope.removeItem = function (currentUser) {
        if ($scope.userList.indexOf(currentUser) >= 0) {
            var now = new Date();
            now = now.format("MM/dd/yyyy, hh:mm tt");
            if ($scope.currentUser.Departure > now) {
                $scope.currentUser.Departure = $filter('date')(now);
            }
            $scope.currentUser.Status = "N";
            $scope.currentUser = {}; // clear out Employee object
        }
        else {
            alert("Please select a visitor before atttempting to check-out.");
        }
    };
});

The issue is, lets say I have a VisitorA , and the person checked in at 10:00 AM, and is mistakenly marked as checked out at 12:00 PM, the status of their visit is set to "N" (not active) when the current time is 12:05 PM.

I would like to set the checkout time to 01:00 PM (tentative, now that it is in the future). I would like to add a check that will set the status back to "Active" when the departure time is set in the future. I am not sure how to change the status, since I cannot figure out where the "Edit" is taking place.

Answer 1

My understanding is that you need a way to update the status of your users as and when it updates in real time.

Using ES6 Javascript you can define a User class which has a getter function allowing you to re-calculate the Status property on every digest cycle without changing the code in your view.

class User {
    constructor({ Visitor, Title, Visitee, Arrival, Departure } = {}) {
        this.Visitor = Visitor;
        this.Title = Title;
        this.Visitee = Visitee;
        this.Arrival = new Date(Arrival);
        this.Departure = new Date(Departure);
    }
    get Status() {
        return this.Departure > new Date() ? 'A' : 'N';
    }
}

Here we can simply call User.Status and it will calculate the status on the fly.

Your JS then becomes something like the following (I've kept most of your calculation logic in tact):

var app = angular.module('myApp', ['ngTouch', 'ui.grid']);
app.controller('UserController', ['$scope', '$filter', function ($scope, $filter) {

    class User {
        constructor({ Visitor, Title, Visitee, Arrival, Departure } = {}) {
            this.Visitor = Visitor;
            this.Title = Title;
            this.Visitee = Visitee;
            this.Arrival = new Date(Arrival);
            this.Departure = new Date(Departure);
        }
        get Status() {
            return this.Departure > new Date() ? 'A' : 'N';
        }
    }

    $scope.userList = [
       new User({ Visitor: "John Doe1", Title: "Lawyer", Visitee: "James Smith1", Arrival: "01/01/2016 10:45 AM", Departure: "01/01/2016 12:55 PM" }),
       new User({ Visitor: "John Doe2", Title: "Contractor Dude", Visitee: "James Smith2", Arrival: now, Departure: tentative_departureTime }),
       new User({ Visitor: "John Doe3", Title: "Attorney", Visitee: "James Smith3", Arrival: now, Departure: tentative_departureTime }),
       new User({ Visitor: "John Doe4", Title: "Maintenance Guy", Visitee: "James Smith4", Arrival: past_checkinTime, Departure: expired_departureTime })
    ];

    $scope.addNew = function () {
        // Note: I removed the currentUser argument from the function call since it 
        // was redundant (we can use $scope.currentUser directly)

        var now = new Date();
        var departureTime = new Date(now.getTime() + 2 * 60 * 60 * 1000);
        departureTime = departureTime.format("MM/dd/yyyy, hh:mm tt");

        var newUser = new User({
            Arrival: new Date($filter('date')(new Date(), 'MM/dd/yyyy, hh:mm a')),
            Departure: new Date($filter('date')(departureTime)),
        });
        $scope.userList.push(newUser);
        $scope.currentUser = {}; // clear out Employee object
    };

    $scope.removeItem = function () {
        // Note: I removed the currentUser argument from the function call since it 
        // was redundant (we can use $scope.currentUser directly)

        if ($scope.userList.indexOf($scope.currentUser) >= 0) {
            var now = new Date();
            now = now.format("MM/dd/yyyy, hh:mm tt");
            if ($scope.currentUser.Departure > now) {
                $scope.currentUser.Departure = new Date($filter('date')(now));
            }
            $scope.currentUser = {}; // clear out Employee object
        }
        else {
            alert("Please select a visitor before atttempting to check-out.");
        }
    };
});

And your HTML remains unchanged!

I agree with the comments that you're best off comparing dates by comparing Javascript Date objects instead of strings, so I've cast the dates in your example to Date objects. For a challenge you could try implementing some setters and getters on the User class which allow you to assign a string date value and have it converted into a Date object inside the class.

Read more about ES6 classes here: https://coryrylan.com/blog/javascript-es6-class-syntax .

Note that for support in older browsers, you may need to transpile ES6 using a bundler like Webpack with Babel.