Summary
I'm having a hard time developing what I believe is a simple form using angularjs 1.5.11. It is supposed to be a multiple form single page UI which manages work schedules.
The final result should be the following:
- The first form asks if the user is creating a new work schedule or update an existing work schedule.
-
- If "new" is selected then a table form with all the days of the week is provided with a submit/reset button.
- If "update" is selected then the table form is prefilled with the current schedule data, but it can be edited.
- If submit is selected the table form fields can no longer be edited and the last form will appear which prompts the user to select the employees to associate with the schedule.
- There's a final submit button which performs a POST call.
I am not experiencing any bugs or error messages. However, I am having a tough time digging through the angularjs documentation and I feel uncomfortable piecing this together. After completing a few courses through codeacademy, udemy, and following the angularjs tutorial on the official site, I still don't feel that I am following best practices and rather than developing a bad solution I am seeking to see what the HTML and JS code should ultimately look like.
What I Tried
I provided a snippet below of what I currently have in place. I started off by completing #1 via using two radio buttons and addressed #2.1 via a table with time inputs.
The Code
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope', function ($scope) {
$scope.days = [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
];
}]);.schedRadio,
.period {
list-style-type: none;
}
.h1,
.h3 {
text-align: center;
}<!doctype html>
<html ng-app="myApp">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<div class="container">
<div class="row justify-content-center">
<div class="col-8 justify-content-center">
<h1>Employee Scheduler</h1>
<form>
<ul class="schedRadio">
<li>
<input type="radio" id="createSched" name="sched-radio" value="create"
ng-click="create_ = true; list_ = false;" />
<label for="createSched">Create a work schedule.</label>
</li>
<li>
<input type="radio" id="listSched" name="sched-radio" value="list"
ng-click="list_ = true; create_ = false;" />
<label for="listSched">Update an existing work schedule.</label>
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="newSched container" ng-show="create_">
<div class="row justify-content-center">
<div class="col-8 justify-content-center">
<h3>Create A New Work Schedule</h3>
<table class="table">
<thead>
<tr class="row">
<th></th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
<tbody ng-repeat="day in days">
<tr class="row">
<th>{{ day }}</th>
<td>
<input type="time" id="{{ day | lowercase }}startTime" step="3600" />
</td>
<td>
<input type="time" id="{{ day | lowercase }}endTime" step="3600" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="listSched" ng-show="list_">
<h3>Listing all work schedules.</h3>
</div>
</body>
</html>