From 700896e3f8fa1a3cb65dcd7c856ad3885efaf485 Mon Sep 17 00:00:00 2001
From: Juhana Luomanen <juhana.luomanen@aalto.fi>
Date: Sat, 27 May 2017 13:33:03 +0300
Subject: [PATCH] Move slides and rotations under tabs

---
 infoscreen/templates/infoscreen_admin.html | 160 +++++++++++----------
 1 file changed, 86 insertions(+), 74 deletions(-)

diff --git a/infoscreen/templates/infoscreen_admin.html b/infoscreen/templates/infoscreen_admin.html
index 6f5f241..032550f 100644
--- a/infoscreen/templates/infoscreen_admin.html
+++ b/infoscreen/templates/infoscreen_admin.html
@@ -35,82 +35,94 @@
                 <li class="active"><a data-toggle="tab" href="#slides" role="tab">Slides</a></li>
                 <li class="nav-item"><a data-toggle="tab" href="#rotations " role="tab">Rotations</a></li>
             </ul>
-            <div class="row" ng-controller="infoadmin_ctrl">
-                <div class="col-xs-12 col-md-6">
-                    <h2>{% trans "Info items" %}</h2>
-                    <div>{% trans "Infoitems available for rotations" %}</div>
-                    <table class="table table-striped">
-                        <tr>
-                            <th>{% trans "Item" %}</th>
-                            <th>{% trans "Type" %}</th>
-                            <th>{% trans "Set duration" %}</th>
-                            <th>{% trans "Add to rotation" %}</th>
-                            <th>{% trans "Delete" %}</th>
-                        </tr>
-                        <tr ng-repeat="i in infoitems | orderBy:['display_name','name']">
-                            <td>{$ i.name $}</td>
-                            <td>{$ i.display_name $}</td>
-                            <td><input type="number" min="1" max="60" class="form-control" ng-model="i.duration"></input></td>
-                            <td><input type="button" class="btn btn-success" ng-click="createInstance(selected_rot.id, i.id, i.item_type, i.duration);" value="{% trans "Add" %}"></input></td>
-                            <td><input type="button" class="btn btn-danger" ng-click="deleteItem(i.item_type, i.id);" value="{% trans "Delete" %}"></input></td>
-                        </tr>
-                    </table>
-                    <h2>{% trans "Create new item" %}</h2>
-                    <table class="table table-striped">
-                        <tr>
-                            <td>{% trans "Item type" %}</td>
-                            <td>
-                                <select class="form-control form-control-sm" ng-model="createtype", ng-options="t.name for t in infotypes">
-                                    <option value=""></option>
-                                </select>
-                            </td>
-                        </tr>
-                    </table>
-                    <div ng-include="createtype.create_template_url"></div>
-                </div>
-                <div class="col-xs-12 col-md-6">
-                    <h2>{% trans "Rotations" %}</h2>
-                    <div>
-                        {% trans "Select rotation to edit" %}:
-                    </div>
-                    <table class="table table-striped">
-                        <tr>
-                            <th>{% trans "Rotation" %}</th>
-                            <th>{% trans "id" %}</th>
-                            <th>{% trans "Select" %}</th>
-                            <th>{% trans "Preview" %}</th>
-                            <th>{% trans "Delete" %}</th>
-                        </tr>
-                        <tr ng-repeat="r in rotations">
-                            <td>{$ r.name $}</td>
-                            <td>{$ r.id $}</td>
-                            <td><input type="button" class="btn btn-info" ng-click="selectRotation(r.id)" value="{% trans "Select" %}"></td>
-                            <td><a href="/infoscreen/{$ r.id $}"><input type="button" class="btn btn-primary" value="{% trans "Preview" %}"></a></td>
-                            <td><input type="button" class="btn btn-danger" ng-click="deleteRotation(r.id)" value="{% trans "Delete" %}"></input></td>
-                        </tr>
-                        <tr>
-                            <td><input type="text" class="form-control" ng-model="r.name" placeholder="{% trans "Name" %}"></input></td>
-                            <td><input type="button" class="btn btn-success" ng-click="createRotation(r.name)" value="{% trans "Create new" %}"></input></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                    </table>
+            <div class="tab-content">
+                <div id="slides" class="tab-pane active">
+                    <div class="row" ng-controller="infoadmin_ctrl">
+                        <div class="col-xs-12 col-md-6">
+                            <h2>{% trans "Create new item" %}</h2>
+                            <table class="table table-striped">
+                                <tr>
+                                    <td>{% trans "Item type" %}</td>
+                                    <td>
+                                        <select class="form-control form-control-sm" ng-model="createtype", ng-options="t.name for t in infotypes">
+                                            <option value=""></option>
+                                        </select>
+                                    </td>
+                                </tr>
+                            </table>
+                            <div ng-include="createtype.create_template_url"></div>
+                        </div>
+                        <div class="col-xs-12 col-md-6">
+                            <h2>{% trans "Info items" %}</h2>
+                            <div>{% trans "Infoitems available for rotations" %}</div>
+                            <table class="table table-striped">
+                                <tr>
+                                    <th>{% trans "Item" %}</th>
+                                    <th>{% trans "Type" %}</th>
+                                    <th>{% trans "Set duration" %}</th>
+                                    <th>{% trans "Add to rotation" %}</th>
+                                    <th>{% trans "Delete" %}</th>
+                                </tr>
+                                <tr ng-repeat="i in infoitems | orderBy:['display_name','name']">
+                                    <td>{$ i.name $}</td>
+                                    <td>{$ i.display_name $}</td>
+                                    <td><input type="number" min="1" max="60" class="form-control" ng-model="i.duration"></input></td>
+                                    <td><input type="button" class="btn btn-success" ng-click="createInstance(selected_rot.id, i.id, i.item_type, i.duration);" value="{% trans "Add" %}"></input></td>
+                                    <td><input type="button" class="btn btn-danger" ng-click="deleteItem(i.item_type, i.id);" value="{% trans "Delete" %}"></input></td>
+                                </tr>
+                            </table>
 
-                    <h2>{% trans "Rotation" %}: {$ selected_rot.name $}</h2>
-                    <div>{% trans "Instances in currently selected rotation" %}:</div>
-                    <table class="table table-striped">
-                        <tr>
-                            <th>{% trans "Instance" %}</th>
-                            <th>{% trans "Duration" %}</th>
-                            <th>{% trans "Delete" %}</th>
-                        </tr>
-                        <tr ng-repeat="i in selected_rot.instances">
-                            <td>{$ i.item.name $}</td><td>{$ i.duration $} s</td>
-                            <td><input type="button" ng-click="deleteInstance(i.id);" value="{% trans "Delete" %}" class="btn btn-danger"></input></td>
-                        </tr>
-                    </table>
+                        </div>
+                    </div>
                 </div>
+                <div id="rotations" class="tab-pane">
+                    <div class="col-xs-12 col-md-6" ng-controller="infoadmin_ctrl">
+                        <h2>{% trans "Rotations" %}</h2>
+                        <div>
+                            {% trans "Select rotation to edit" %}:
+                        </div>
+                        <table class="table table-striped">
+                            <tr>
+                                <th>{% trans "Rotation" %}</th>
+                                <th>{% trans "id" %}</th>
+                                <th>{% trans "Select" %}</th>
+                                <th>{% trans "Preview" %}</th>
+                                <th>{% trans "Delete" %}</th>
+                            </tr>
+                            <tr ng-repeat="r in rotations">
+                                <td>{$ r.name $}</td>
+                                <td>{$ r.id $}</td>
+                                <td><input type="button" class="btn btn-info" ng-click="selectRotation(r.id)" value="{% trans "Select" %}"></td>
+                                <td><a href="/infoscreen/{$ r.id $}"><input type="button" class="btn btn-primary" value="{% trans "Preview" %}"></a></td>
+                                <td><input type="button" class="btn btn-danger" ng-click="deleteRotation(r.id)" value="{% trans "Delete" %}"></input></td>
+                            </tr>
+                            <tr>
+                                <td><input type="text" class="form-control" ng-model="r.name" placeholder="{% trans "Name" %}"></input></td>
+                                <td><input type="button" class="btn btn-success" ng-click="createRotation(r.name)" value="{% trans "Create new" %}"></input></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                            </tr>
+                        </table>
+                    </div>
+
+                    <div class="col-xs-12 col-md-6">
+                        <h2>{% trans "Rotation" %}: {$ selected_rot.name $}</h2>
+                        <div>{% trans "Instances in currently selected rotation" %}:</div>
+                        <table class="table table-striped">
+                            <tr>
+                                <th>{% trans "Instance" %}</th>
+                                <th>{% trans "Duration" %}</th>
+                                <th>{% trans "Delete" %}</th>
+                            </tr>
+                            <tr ng-repeat="i in selected_rot.instances">
+                                <td>{$ i.item.name $}</td><td>{$ i.duration $} s</td>
+                                <td><input type="button" ng-click="deleteInstance(i.id);" value="{% trans "Delete" %}" class="btn btn-danger"></input></td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
             </div>
             <div style="margin-top: 100px;">
                 {% include "footer.html" %}