Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app" ng-controller="Controller">
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/angular.ng-notify/0.8.0/ng-notify.min.css" rel="stylesheet" type="text/css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  <script src="https://cdn.jsdelivr.net/angular.ng-notify/0.8.0/ng-notify.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MoCa (Module Catalog)</title>
</head>
<body class="container">
  
  <h1>
    <i class="glyphicon glyphicon-grain"></i>
    MoCa
    <small>(Module Catalog)</small>
  </h1>
  
  <div ng-repeat="weekDay in weekDays">
    <h4>{{weekDay.name}}</h4>
    <span 
          ng-if="weekDay.modules.length === 0"
          class="text-muted">
      Frei!
    </span>
    <table class="table table-striped">
      <tr ng-repeat="module in weekDay.modules track by $index"
          style="height: 25px">
        <td style="max-width: 100px; width: 100px;">
          {{module.startTime |date:'HH:mm'}} -
          {{module.endTime |date:'HH:mm'}}
        </td>
        <td>
          {{module.name}}
        </td>
        <td>
          <a href
         ng-click="weekDay.modules.splice($index, 1)" 
         class="btn btn-default btn-xs pull-right">
        &times;
      </a>
        </td>
      </tr>
    </table>
  </div>
  
  <hr>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Modul hinzufügen</h3>
    </div>
    <div class="panel-body">
      <form class="form">
        <div class="form-group">
          <label>Name</label>
          <input type="text" 
                 ng-model="newModule.name" 
                 class="form-control" 
                 placeholder="Name">
        </div>
​
        <div class="form-group">
          <label>Wochentag</label>
          <select 
                  ng-model="day"
                  ng-options="day for day in days"
                  class="form-control">
          </select>
        </div>
​
        <div class="row">
          <div class="col-xs-6">
            <div class="form-group">
              <label>Von</label>
              <input type="time" 
                 ng-model="newModule.startTime" 
                 class="form-control">
            </div>
          </div>
          <div class="col-xs-6">
            <div class="form-group">
              <label>Bis</label>
              <input type="time" 
                 ng-model="newModule.endTime" 
                 class="form-control">
            </div>
          </div>
        </div>
​
        <button 
                type="submit" 
                ng-click="addModule(newModule, day)"
                ng-disabled="!newModule.name || !day"
                class="btn btn-default pull-right">
          <i class="glyphicon glyphicon-plus"></i>
          Modul eintragen
        </button>
      </form>
    </div>
  </div>
  
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
herrherrmannpro
0viewers