开启创建实例页面

templates/guest_create.html

@@ -0,0 +1,108 @@
+{% extends "layout.html" %}
+{% block title %} Guest {% endblock %}
+{% block head %}
+    {{ super() }}
+
+    <style type="text/css">
+
+        @media (min-width: 768px) {
+            .form-horizontal .control-label {
+                text-align: left;
+            }
+        }
+        
+        label>span {
+            color: deepskyblue;
+        }
+
+        .btn {
+            border-radius: 0;
+        }
+
+        .btn-ability {
+            margin-right: 16px;
+            height: 50px;
+            padding: 2px 50px;
+            margin-bottom: 30px;
+        }
+
+        .btn-ability-line {
+        }
+
+    </style>
+{% endblock head %}
+{% block body %}
+<script>
+    $(document).ready(function() {
+
+    });
+</script>
+<div class="container" style="padding-top: 100px;">
+    <div class="panel">
+        <div class="panel-body">
+            <h3 class="title-hero">
+                创建实例
+            </h3>
+            <div class="example-box-wrapper">
+                <form class="form-horizontal bordered-row">
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-gauge"></span>&nbsp;&nbsp;运算能力</label>
+                        <div class="col-sm-10">
+                            <div class="btn-ability-line" data-toggle="buttons">
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">1&nbsp;&nbsp;核&nbsp;&nbsp;1&nbsp;&nbsp;GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">1&nbsp;&nbsp;核&nbsp;&nbsp;2&nbsp;&nbsp;GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">2&nbsp;&nbsp;核&nbsp;&nbsp;2&nbsp;&nbsp;GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">2&nbsp;&nbsp;核&nbsp;&nbsp;4&nbsp;&nbsp;GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">4&nbsp;&nbsp;核&nbsp;&nbsp;4&nbsp;&nbsp;GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">4&nbsp;&nbsp;核&nbsp;&nbsp;8&nbsp;&nbsp;GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">8&nbsp;&nbsp;核&nbsp;&nbsp;8&nbsp;&nbsp;GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">8&nbsp;&nbsp;核&nbsp;&nbsp;16GB
+                                </a>
+                                 <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">1&nbsp;&nbsp;核&nbsp;&nbsp;16GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">4&nbsp;&nbsp;核&nbsp;&nbsp;32GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">4&nbsp;&nbsp;核&nbsp;&nbsp;64GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">8&nbsp;&nbsp;核&nbsp;&nbsp;64GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">16核&nbsp;&nbsp;16GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">24核&nbsp;&nbsp;24GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">32核&nbsp;&nbsp;32GB
+                                </a>
+                                <a href="#" class="btn btn-lg btn-default btn-ability">
+                                    <input name="radio-toggle-1" type="radio">64核&nbsp;&nbsp;64GB
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock body %}

templates/guest.html → templates/guest_show.html

@@ -1,7 +1,7 @@
 {% extends "layout.html" %}
 {% block title %} Guest {% endblock %}
 {% block head %}
-  {{ super() }}
+    {{ super() }}
     <style type="text/css">
         .table {
             font-size: 12px;
@@ -96,6 +96,14 @@
             }
         });
 
+
+        $('body').addClass('add-transition');
+        $('.add-page-transition').on('click', function(){
+            var transAttr = $(this).attr('data-transition');
+            $('.add-transition').attr('class', 'add-transition');
+            $('.add-transition').addClass(transAttr);
+        });
+
     });
 
     function refresh() {
@@ -132,7 +140,7 @@
                         </div>
                         <div class="pull-right">
                             <button class="btn btn-default" onclick="refresh()" style="border-radius: 0;"><span class="glyph-icon icon-elusive-arrows-cw"></span></button>
-                            <button class="btn btn-info" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">创建实例</button>
+                            <a class="btn btn-info add-page-transition" href="/guests/create" data-transition="pt-page-moveFromRight-init" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">创建实例</a>
                         </div>
                     </div>
                 </div>

templates/layout.html

@@ -183,6 +183,7 @@
             </div>
         </div>-->
 
+        {% block body %}
         <div id="page-wrapper">
             <div id="page-header" class="bg-gradient-9">
                 <div id="header-logo" class="logo-bg">
@@ -255,6 +256,8 @@
                     </a>
                 </div><!-- #header-nav-right -->
             </div><!-- #page-header -->
+
+            {% block page_sidebar %}
             <div id="page-sidebar" style="margin-top: 20px;">
                 <div class="scroll-sidebar">
                     <ul id="sidebar-menu" data-spy="affix" data-offset-top="10">
@@ -310,6 +313,7 @@
                     </ul><!-- #sidebar-menu -->
                 </div><!-- #scroll-sidebar -->
             </div><!-- #page-sidebar -->
+            {% endblock page_sidebar %}
             <div id="page-content-wrapper">
                 <div id="page-content">
                     <div class="container">
@@ -318,7 +322,8 @@
                 </div>
             </div>
         </div>
-        
+        {% endblock body %}
+
         <!-- WIDGETS -->
         <script type="text/javascript" src="{{ url_for('static', filename='tether/js/tether.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>

views/guest.py

@@ -81,8 +81,10 @@ def show():
             if i == last_page:
                 break
 
-    return render_template('guest.html', guests_ret=guests_ret,
+    return render_template('guest_show.html', guests_ret=guests_ret,
                            os_template_mapping_by_id=os_template_mapping_by_id, page=page,
                            page_size=page_size, keyword=keyword, pages=pages, last_page=last_page)
 
 
+def create():
+    return render_template('guest_create.html')

views_route_table.py

@@ -13,4 +13,5 @@ __copyright__ = '(c) 2017 by James Iter.'
 
 
 add_rule_views(guest.blueprints, '', views_func='guest.show', methods=['GET'])
+add_rule_views(guest.blueprints, '/create', views_func='guest.create', methods=['GET'])