Added Nestable Tabs

app/views/home/index.html.erb

@@ -1,4 +1,14 @@
 <h1>Home#index</h1>
 <p>Hello World from support_tool</p>
-<div id="main">
+<div id="container">
+  <div id="menu">
+    <ul>
+      <li><a href="#lists">Mailinglisten</a></li>
+      <li><a href="#pad">Pad</a></li>
+    </ul>
+  </div>
+  <div id="main">
+    <div class="tab tab-lists tab-active"></div>
+    <div class="tab tab-pad">Pad administration</div>
+  </div>
 </div>

app/views/layouts/application.html.erb

@@ -12,7 +12,7 @@
     'application',
     'app/models/mailing_list',
     'app/controllers/main',
-    'app/views/index',
+    'app/views/lists',
     'app/views/list'
   %>
   <%= csrf_meta_tag %>

public/javascripts/app/controllers/main.js

@@ -1,15 +1,24 @@
 App.Controllers.Main = Backbone.Controller.extend({
     routes: {
-        "":                         "index",
+        "":                 "index",
+        "lists":            "lists",
+        "pad":              "pad",
     },
 
     index: function() {
         mailingLists.fetch({
           success:function(){
-            new App.Views.Index();
+            new App.Views.Lists();
           }
         });
-
+    },
+    lists: function(){
+      console.log('set lists');
+      main_tabs.set('lists');
+    },
+    pad: function(){
+      console.log('set tabs');
+      main_tabs.set('pad');
     }
 });
 

public/javascripts/app/templates/list.ejs

@@ -1,4 +1,19 @@
 <li>
-  <a href='#documents/<%=model.id%>'><%=model.escape('name')%></a>
-  <span class="note">melden</span><span class="notice"></span>
+  <div>
+    <span class="name click"><%=model.escape('name')%></span>
+    <span class="note"> melden</span><span class="notice"></span>
+  </div>
+  <div class="box tab tab-<%=model.id%>">
+    DAS IST EIN TEST <span class="close click">x</span>
+    <br>
+    Administrator ändern
+    <br>
+    Administrator Passwort zurücksetzen
+    <br>
+    Moderator ändern
+    <br>
+    Moderator Passwort zurücksetzen
+    <br>
+     Liste löschen
+  </div>  
 </li>

public/javascripts/app/templates/index.ejs → public/javascripts/app/templates/lists.ejs

@@ -1,5 +1,5 @@
 <h3>
-  <a href='#new'>Create New</a>
+  <span class="new">Create New</span>
 </h3>
 <form>
   <input type="text" class="searchfield"/> 

public/javascripts/app/views/list.js

@@ -1,21 +1,31 @@
 App.Views.List = Backbone.View.extend({
-    initialize: function() {
+    initialize: function(data) {
         this.id = 'main';
-        this.template = new EJS({url: 'javascripts/app/templates/list.ejs'})
+        this.template = new EJS({url: 'javascripts/app/templates/list.ejs'});
         this.model.bind('change', this.render);
         this.count = 0;
+        this.tabs = data.tabs;
     },
     events: {    
-      "click .note" : "note"
+      "click .note" : "note",
+      "click .name" : "name",
+      "click .close": "close"
     },
 
     note: function() {
       this.count++;
       this.$('.notice').html(this.count)
     },
 
+    name: function() {
+      this.tabs.panels.set(this.model.id);
+    },
+
+    close: function() {
+      this.tabs.panels.close();
+    },
+
     render: function() {
-        console.log('rendering');
         // if(this.collection.length > 0) {
         //             var out = "<h3><a href='#new'>Create New</a></h3><ul>";
         //             this.collection.each(function(item) {

public/javascripts/app/views/lists.js

@@ -0,0 +1,59 @@
+App.Views.Lists = Backbone.View.extend({
+    initialize: function() {
+        this.id="main";
+        console.log('initialize');
+        this.collection = mailingLists;
+        this.template = new EJS({url: 'javascripts/app/templates/lists.ejs'})
+
+        var self = this;
+
+        //this.collection.bind('add', this.addOne);
+        this.collection.bind('refresh',function(){ self.resetAll(); });
+        //this.collection.bind('all', this.render)
+
+        this.tabs = {};
+        this.render();
+        //console.log('init---')
+        this.addAll();
+        this.tabs.panels = new Tab(this.$(".mailing-lists"));
+        console.log('PANELS-X', this.panels);
+
+    },
+
+    events: {    
+      "click .search" : "search"
+    },
+
+    render: function() {
+        $(this.el).html(this.template.render(this));
+        $('#main .tab-lists').html(this.el);
+    },
+
+    addOne: function(list) {
+          console.log('addOne');
+          var view = new App.Views.List({model: list, tabs: this.tabs});
+          console.log('PANELS-A', this.panels);
+          this.$(".mailing-lists").append(view.render().el);
+    },
+
+    addAll: function() {
+      console.log('addAll');
+      var self = this;
+      this.collection.each(function(list){ self.addOne(list); });
+      console.log('addAll done');
+    },
+    resetAll: function(){
+      console.log('resetAll');
+      this.$(".mailing-lists").html('');
+      this.addAll();
+    },
+
+    search: function(){
+      console.log('search');
+      this.collection.search(this.$('.searchfield')[0].value);
+      //this.resetAll();
+      console.log('search done')
+      return false;
+    }
+
+});

public/javascripts/application.js

@@ -5,6 +5,7 @@ var App = {
     Views: {},
     Controllers: {},
     init: function() {
+        main_tabs = new Tab($('#main'));
         new App.Controllers.Main();
         Backbone.history.start();
         console.log('app init');
@@ -15,3 +16,25 @@ $(function() {
         App.init();
 });
 
+
+var Tab = function(tabs){
+
+  this.tabs = $(tabs);
+  this.active_tab = this.tabs.find('.tab-active');
+  //console.log('active tab is ',this.active_tab[0])  
+
+  this.set = function(tab){
+    //console.log('tab set '+tab);
+    this.active_tab.removeClass('tab-active');
+    this.active_tab = this.tabs.find('.tab-'+tab);
+    this.active_tab.addClass('tab-active');
+    //console.log('tab set '+tab+' done');
+  };
+
+  this.close = function(){
+    this.active_tab.removeClass('tab-active');
+    this.active_tab = this.tabs.find('.tab-active');
+  }
+};
+
+var main_tabs;

public/stylesheets/main.css

@@ -1,5 +1,34 @@
+#menu {
+  float: left;
+  width:300px;
+}
+
+#main {
+  float: left;
+}
+
+.tab {
+  display: none;
+}
+.tab.tab-active {
+  display: block;
+}
 
 .list div {
   float: left;
   width: 150px;
+}
+
+.box {
+  border: 1px solid #888;
+  background-color: #EEE;
+  border-radius:10px;
+  padding: 5px;
+  position:absolute;
+  z-index: 5;
+  margin-left:20px;
+}
+
+.click {
+  cursor: pointer;
 }