JoelCodes · May 26, 2017 00:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
  <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" /></head>
  <script>
    var events = [];
    var id = 0;
    var eventService = {
      getEvents(){
        return Promise.resolve(events);
      },
      addEvent(start, end){
        events.push({start, end, id});
        id += 1;
        return Promise.resolve({start, end});
      },
      deleteEvent(id){
        events = events.filter(function(event){
          return event.id !== id;
        });
        return Promise.resolve();
      }
    }
  </script>
 <body>
  <div class="container">
    <div class="new-event-form">
      <div class="form-group">
        <label for="title">Event Title</label>
        <input class='form-control' type="text" name="title"/>
      </div>
      <div class="form-group">
        <label for="description">Event Description</label>
        <input class='form-control' type="text" name="description"/>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label for="start">Start</label>
            <div class="start-datepicker input-group date">
              <input type='text' class="form-control" name='start'/>
              <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label for="end">End</label>
            <div class="end-datepicker input-group date">
              <input type='text' class="form-control" name='end'/>
              <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <button class="btn btn-primary make-button">Make</button>
      </div>
    </div>
    <ul class='time-block-list'>

    </ul>
  </div>
  <script>
    $(function(){
      var $timeBlockList = $('.time-block-list');

      function fillList(){

        eventService.getEvents()
          .then(events => {
            $timeBlockList.empty();
            events.forEach(event => {
              var $li = $('<li>')
                .text(event.start + " - " + event.end)
                .appendTo($timeBlockList);
              $('<button>')
                .addClass('btn btn-primary')
                .text('Edit')
                .on('click', function(){
                  var $form = $(`<div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label for="start">Start</label>
            <div class="start-datepicker input-group date">
              <input type='text' class="form-control" name='start'/>
              <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label for="end">End</label>
            <div class="end-datepicker input-group date">
              <input type='text' class="form-control" name='end'/>
              <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
      </div>`).appendTo($li);
        $form.find('.start-datepicker').datetimepicker({
          defaultDate: event.start
        });
        $form.find('.end-datepicker').datetimepicker({
          defaultDate: event.end
        });
                })
                .appendTo($li);
              
                })
            })
      }

      var $newEventForm = $('.new-event-form');
      console.log($newEventForm.find('.from-datepicker'));
      $newEventForm.find('.start-datepicker').datetimepicker();
      $newEventForm.find('.end-datepicker').datetimepicker();
      $newEventForm.find('.make-button').on('click', function(){
        var eventData = {
          start: $newEventForm.find('.start-datepicker').data("DateTimePicker").date().format(),
          end: $newEventForm.find('.end-datepicker').data("DateTimePicker").date().format()
        };
        eventService.addEvent($newEventForm.find('.start-datepicker').data("DateTimePicker").date().format(), $newEventForm.find('.end-datepicker').data("DateTimePicker").date().format())
          .then(fillList);
      });
    });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
	<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" /></head>
	<script>
	var events = [];
	var id = 0;
	var eventService = {
	getEvents(){
	return Promise.resolve(events);
	},
	addEvent(start, end){
	events.push({start, end, id});
	id += 1;
	return Promise.resolve({start, end});
	},
	deleteEvent(id){
	events = events.filter(function(event){
	return event.id !== id;
	});
	return Promise.resolve();
	}
	}
	</script>
	<body>
	<div class="container">
	<div class="new-event-form">
	<div class="form-group">
	<label for="title">Event Title</label>
	<input class='form-control' type="text" name="title"/>
	</div>
	<div class="form-group">
	<label for="description">Event Description</label>
	<input class='form-control' type="text" name="description"/>
	</div>
	<div class="row">
	<div class="col-md-6">
	<div class="form-group">
	<label for="start">Start</label>
	<div class="start-datepicker input-group date">
	<input type='text' class="form-control" name='start'/>
	<span class="input-group-addon">
	<span class="glyphicon glyphicon-calendar"></span>
	</span>
	</div>
	</div>
	</div>
	<div class="col-md-6">
	<div class="form-group">
	<label for="end">End</label>
	<div class="end-datepicker input-group date">
	<input type='text' class="form-control" name='end'/>
	<span class="input-group-addon">
	<span class="glyphicon glyphicon-calendar"></span>
	</span>
	</div>
	</div>
	</div>
	</div>
	<div>
	<button class="btn btn-primary make-button">Make</button>
	</div>
	</div>
	<ul class='time-block-list'>

	</ul>
	</div>
	<script>
	$(function(){
	var $timeBlockList = $('.time-block-list');

	function fillList(){

	eventService.getEvents()
	.then(events => {
	$timeBlockList.empty();
	events.forEach(event => {
	var $li = $('<li>')
	.text(event.start + " - " + event.end)
	.appendTo($timeBlockList);
	$('<button>')
	.addClass('btn btn-primary')
	.text('Edit')
	.on('click', function(){
	var $form = $(`<div class="row">
	<div class="col-md-6">
	<div class="form-group">
	<label for="start">Start</label>
	<div class="start-datepicker input-group date">
	<input type='text' class="form-control" name='start'/>
	<span class="input-group-addon">
	<span class="glyphicon glyphicon-calendar"></span>
	</span>
	</div>
	</div>
	</div>
	<div class="col-md-6">
	<div class="form-group">
	<label for="end">End</label>
	<div class="end-datepicker input-group date">
	<input type='text' class="form-control" name='end'/>
	<span class="input-group-addon">
	<span class="glyphicon glyphicon-calendar"></span>
	</span>
	</div>
	</div>
	</div>
	</div>`).appendTo($li);
	$form.find('.start-datepicker').datetimepicker({
	defaultDate: event.start
	});
	$form.find('.end-datepicker').datetimepicker({
	defaultDate: event.end
	});
	})
	.appendTo($li);

	})
	})
	}

	var $newEventForm = $('.new-event-form');
	console.log($newEventForm.find('.from-datepicker'));
	$newEventForm.find('.start-datepicker').datetimepicker();
	$newEventForm.find('.end-datepicker').datetimepicker();
	$newEventForm.find('.make-button').on('click', function(){
	var eventData = {
	start: $newEventForm.find('.start-datepicker').data("DateTimePicker").date().format(),
	end: $newEventForm.find('.end-datepicker').data("DateTimePicker").date().format()
	};
	eventService.addEvent($newEventForm.find('.start-datepicker').data("DateTimePicker").date().format(), $newEventForm.find('.end-datepicker').data("DateTimePicker").date().format())
	.then(fillList);
	});
	});
	</script>
	</body>
	</html>
No results found