implement generating services using UI

Author: Mulkave

resources/views/components/add-menu.blade.php

@@ -7,8 +7,9 @@
 <div id="creation-menu">
     <ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
     data-mdl-for="lucid-add-button">
-        <li class="mdl-menu__item" @click="showCreateJobDialog()">Job</li>
+        <li class="mdl-menu__item" @click="showCreateServiceDialog()">Service</li>
         <li class="mdl-menu__item" @click="showCreateFeatureDialog()">Feature</li>
+        <li class="mdl-menu__item" @click="showCreateJobDialog()">Job</li>
     </ul>
 </div>
 
@@ -24,6 +25,10 @@
 
         showCreateFeatureDialog: function() {
             CreateFeatureDialog.show();
+        },
+
+        showCreateServiceDialog: function() {
+            CreateServiceDialog.show();
         }
     }
 });

resources/views/components/create-service.blade.php

@@ -0,0 +1,65 @@
+<!-- create service form -->
+<dialog id="lucid-create-service-dialog" class="mdl-dialog">
+    <h5 class="mdl-dialog__title">New Service</h5>
+    <div class="mdl-dialog__content">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <input class="mdl-textfield__input" type="text" id="lucid-service-title" v-model="name">
+            <label class="mdl-textfield__label" for="lucid-service-title">Name your Service</label>
+        </div>
+    </div>
+    <div class="mdl-dialog__actions">
+        <button type="button" class="mdl-button mdl-js-button
+            mdl-button--raised mdl-js-ripple-effect mdl-button--colored" @click="createNewService()">Create</button>
+        <button type="button" class="mdl-button mdl-js-button mdl-textfield--floating-label
+            mdl-button--raised mdl-js-ripple-effect close" @click="closeCreateServiceForm()">Close</button>
+    </div>
+</dialog>
+
+<script type="text/javascript">
+
+var CreateServiceDialog = new Vue({
+    el: '#lucid-create-service-dialog',
+
+    data: {
+        name: ''
+    },
+
+    methods: {
+        show: function() {
+            this.$el.showModal();
+        },
+
+        closeCreateServiceForm: function() {
+            this.$el.close();
+        },
+
+        resetForm: function() {
+            this.name = '';
+        },
+
+        createNewService: function() {
+            // there must be a name
+            if (this.name.length <= 0) {
+                return false;
+            }
+
+            Vue.http.post('services', {name: this.name}).then(
+                // success
+                function(response) {
+                    this.closeCreateServiceForm();
+
+                    var service = response.json();
+                    Toast.show('Service '+service.name+' is now ready');
+
+                    this.resetForm();
+                }.bind(this),
+                // error
+                function(response) {
+                    console.error('Error creating service:', response.status);
+                }
+            );
+        }
+    }
+});
+
+</script>

resources/views/layout.blade.php

@@ -77,6 +77,7 @@
     @include('lucid::components.code-preview')
     @include('lucid::components.create-job')
     @include('lucid::components.create-feature')
+    @include('lucid::components.create-service')
     @include('lucid::components.add-menu')
 
     <script src="/vendor/lucid/js/lib/prism.js"></script>

src/Http/routes.php

@@ -38,6 +38,10 @@
         return (new Controller())->listFeatures($slug);
     });
 
+    Route::post('/services', function () {
+        return app(Lucid\Console\Generators\ServiceGenerator::class)->generate(request()->input('name'))->toArray();
+    });
+
     Route::get('/features/{name}', function ($name) {
         return (new Controller())->findFeature($name)->toArray();
     });
@@ -75,7 +79,7 @@
         return app(Lucid\Console\Generators\FeatureGenerator::class)->generate($title, $service, $jobs)->toArray();
     });
 
-    Route::get('/logs', function() {
+    Route::get('/logs', function () {
         $reader = app(Stevebauman\LogReader\LogReader::class);
 
         if (request()->has('level')) {
@@ -86,11 +90,11 @@
             ->paginate(25);
     });
 
-    Route::put('/logs/{id}/read', function($id) {
+    Route::put('/logs/{id}/read', function ($id) {
         app(Stevebauman\LogReader\LogReader::class)->find($id)->markRead();
     });
 
-    Route::get('/analysis', function() {
+    Route::get('/analysis', function () {
         return (new Lucid\Console\Analyser())->analyse();
     });