Permalink
Browse files

建立 AJAX 版 Todo

  • Loading branch information...
1 parent e2231b0 commit 6b6ab431fdcbb44b3b9ba2ec1e3b2aacdcd972b1 Sam.IO.Hsiao committed Oct 18, 2016
Showing with 191 additions and 0 deletions.
  1. +66 −0 app/Http/Controllers/Tasks2Controller.php
  2. +116 −0 resources/views/tasks2.blade.php
  3. +9 −0 routes/web.php
@@ -0,0 +1,66 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\StoreTaskRequest;
+use App\Services\TaskService;
+use App\Task;
+use Response;
+
+class Tasks2Controller extends Controller
+{
+ /** @var TaskService */
+ private $taskService;
+
+ /**
+ * TasksController constructor.
+ * @param TaskService $taskService
+ */
+ public function __construct(TaskService $taskService)
+ {
+ $this->taskService = $taskService;
+ }
+
+ /**
+ * Display a listing of the resource.
+ * @return Response
+ */
+ public function index()
+ {
+ $data['tasks'] = $this->taskService->index();
+
+ return view('tasks2', $data);
+ }
+
+ /**
+ * Store a newly created resource in storage.
+ * @param StoreTaskRequest $request
+ * @return Task
+ */
+ public function store(StoreTaskRequest $request) : Task
+ {
+ $task = new Task();
+ $task->name = $request['name'];
+
+ $this->taskService->store($task);
+
+ return $task;
+ }
+
+ /**
+ * Remove the specified resource from storage.
+ * @param int $id
+ * @return Task
+ */
+ public function destroy(int $id) : Task
+ {
+ $task = new Task();
+ $task->id = $id;
+
+ $this->taskService->destroy($task);
+
+ return $task;
+ }
+}
@@ -0,0 +1,116 @@
+@extends('layouts.app')
+
+@section('content')
+ <div class="container">
+ <div class="col-sm-offset-2 col-sm-8">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ New Task
+ </div>
+
+ <div class="panel-body">
+ <!-- Display Validation Errors -->
+ @include('common.errors')
+
+ <!-- New Task Form -->
+ <div class="form-horizontal">
+ {{ csrf_field() }}
+
+ <!-- Task Name -->
+ <div class="form-group">
+ <label for="task-name" class="col-sm-3 control-label">Task</label>
+ <div class="col-sm-6">
+ <input type="text" name="name" id="task-name" class="form-control"
+ value="{{ old('task') }}">
+ </div>
+ </div>
+
+ <!-- Add Task Button -->
+ <div class="form-group">
+ <div class="col-sm-offset-3 col-sm-6">
+ <button id="add" class="btn btn-default"><i class="fa fa-btn fa-plus"></i>Add Task
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Current Tasks -->
+ @if (count($tasks) > 0)
+ <div id="panel" class="panel panel-default" style="visibility:visible">
+ @else
+ <div id="panel" class="panel panel-default" style="visibility:hidden">
+ @endif
+ <div class="panel-heading">
+ Current Tasks
+ </div>
+
+ <div class="panel-body">
+ <table id="table" class="table table-striped task-table">
+ <thead>
+ <th>Task</th>
+ <th>&nbsp;</th>
+ </thead>
+ <tbody>
+ @foreach ($tasks as $task)
+ <tr class="task{{$task->id}} task">
+ <td class="table-text">
+ <div>{{ $task->name }}</div>
+ </td>
+
+ <!-- Task Delete Button -->
+ <td>
+ <button class="btn btn-danger delete" data-id="{{ $task->id }}"><i
+ class="fa fa-btn fa-trash"></i>Delete
+ </button>
+ </td>
+ </tr>
+ @endforeach
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ <script>
+ $(document).ready(function () {
+ $('#add').click(function () {
+ $.ajax({
+ type: 'post',
+ url: '/todo2/task',
+ data: {
+ '_token': $('input[name=_token]').val(),
+ 'name': $('#task-name').val()
+ },
+ success: function (data) {
+ $('#panel').css('visibility', 'visible');
+ $('#table').append('<tr class="task' + data.id + ' task"><td class="table-text"><div>' + data.name + '</div>' +
+ '</td><td><button class="btn btn-danger delete" data-id="' + data.id + '"><i class="fa fa-btn fa-trash"></i>Delete</button></td></tr>');
+ $('#task-name').val('');
+ }
+ });
+ });
+
+ $(document).on('click', '.delete', function () {
+ var id = $(this).data('id');
+
+ $.ajax({
+ type: 'post',
+ url: '/todo2/task/' + id,
+ data: {
+ '_token': $('input[name=_token]').val(),
+ },
+ success: function (data) {
+ $('.task' + data.id).remove();
+
+ var length = $('.task').length;
+ if (length == 0) {
+ $('#panel').css('visibility', 'hidden');
+ }
+ }
+ });
+ });
+ });
+ </script>
+@endsection
View
@@ -24,5 +24,14 @@
/** Delete Task*/
Route::post('/todo/task/{id}', 'TasksController@destroy');
+
+ /** Show Task Dashboard*/
+ Route::get('/todo2', 'Tasks2Controller@index');
+
+ /** Add New Task*/
+ Route::post('/todo2/task', 'Tasks2Controller@store');
+
+ /** Delete Task*/
+ Route::post('/todo2/task/{id}', 'Tasks2Controller@destroy');
});

0 comments on commit 6b6ab43

Please sign in to comment.