Search mods in frontend

lib/mods.js

@@ -1,5 +1,6 @@
 var async = require('async');
 var events = require('events');
+var filesize = require('filesize');
 var fs = require('fs');
 var path = require('path');
 var playwithsix = require('playwithsix');
@@ -84,7 +85,16 @@ Mods.prototype.resolveMods = function (modsToResolve, cb) {
 };
 
 Mods.prototype.search = function (query, cb) {
-  playwithsix.search(query, cb);
+  playwithsix.search(query, function (err, mods) {
+    if (err) {
+      cb(err);
+    } else {
+      mods.map(function (mod) {
+        mod.formattedSize = filesize(mod.size);
+      });
+      cb(null, mods);
+    }
+  });
 };
 
 Mods.prototype.traverse = function (mod, cb) {

package.json

@@ -11,6 +11,7 @@
     "async": "^0.9.0",
     "express": "3.x",
     "express-resource": "~1.0.0",
+    "filesize": "^3.1.0",
     "gamedig": "^0.2.11",
     "playwithsix": "0.0.9",
     "slug": "~0.4.0",

public/js/app/views/mods/form.js

@@ -7,21 +7,24 @@ define(function (require) {
       Backbone            = require('backbone'),
       Marionette          = require('marionette'),
       FormView            = require('marionette-formview'),
+      ListItemView        = require('app/views/mods/search/list_item'),
       Ladda               = require('ladda'),
-      Mod                 = require('app/models/mod'),
+      Mods                = require('app/collections/mods'),
       tpl                 = require('text!tpl/mods/form.html');
 
-  return Marionette.ItemView.extend({
+  return Marionette.CompositeView.extend({
 
     events: {
       'submit': 'beforeSubmit',
     },
 
+    itemView: ListItemView,
+    itemViewContainer: "tbody",
     template: _.template(tpl),
 
     initialize: function (options) {
       this.mods = options.mods;
-      this.model = new Mod();
+      this.collection = new Mods();
       this.bind('ok', this.submit);
       this.bind('shown', this.shown);
     },
@@ -54,15 +57,22 @@ define(function (require) {
       this.laddaBtn.start();
       self.modal.$el.find('.btn.cancel').addClass('disabled');
 
-      this.model.save({ name: $form.find('.mod').val() }, {
-        success: function () {
+      $.ajax({
+        url: '/api/mods/search',
+        type: 'POST',
+        data: {
+          query: $form.find('.query').val()
+        },
+        dataType: 'json',
+        success: function (data) {
           self.laddaBtn.stop();
-          self.modal.close();
+          self.modal.$el.find('.btn.cancel').removeClass('disabled');
+          self.collection.set(data);
         },
         error: function () {
           self.laddaBtn.stop();
           $form.find('.form-group').addClass('has-error');
-          $form.find('.help-block').text('Problem downloading mod');
+          $form.find('.help-block').text('Problem searching, try again');
           self.modal.$el.find('.btn.cancel').removeClass('disabled');
         }
       });

public/js/app/views/mods/list.js

@@ -24,7 +24,12 @@ define(function (require) {
     download: function (event) {
       event.preventDefault();
       var view = new FormView({mods: this.collection});
-      var modal = new Backbone.BootstrapModal({ content: view, animate: true });
+      var modal = new Backbone.BootstrapModal({
+        content: view,
+        animate: true,
+        cancelText: 'Close',
+        okText: 'Search',
+      });
       view.modal = modal;
       modal.open();
     },

public/js/app/views/mods/search/list_item.js

@@ -0,0 +1,48 @@
+define(function (require) {
+
+  "use strict";
+
+  var $                   = require('jquery'),
+    _                   = require('underscore'),
+    Backbone            = require('backbone'),
+    Marionette          = require('marionette'),
+    Ladda               = require('ladda'),
+    tpl                 = require('text!tpl/mods/search/list_item.html'),
+
+  template = _.template(tpl);
+
+  return Marionette.ItemView.extend({
+    tagName: "tr",
+    template: template,
+
+    events: {
+      "click .install": "install"
+    },
+
+    install: function (event) {
+      var self = this;
+      event.preventDefault();
+
+      this.laddaBtn = Ladda.create(this.$el.find(".ladda-button").get(0));
+      this.laddaBtn.start();
+      this.$el.find('.ladda-button').addClass('disabled');
+
+      $.ajax({
+        url: "/api/mods/",
+        type: 'POST',
+        data: {
+          name: this.model.get('name'),
+        },
+        dataType: 'json',
+        success: function (resp) {
+          self.laddaBtn.stop();
+          self.$el.find('.ladda-button').removeClass('disabled');
+        },
+        error: function (resp) {
+          self.laddaBtn.stop();
+          self.$el.find('.ladda-button').removeClass('disabled');
+        },
+      });
+    },
+  });
+});

public/js/tpl/mods/form.html

@@ -1,12 +1,23 @@
 <p>
-  Use foldername from <a href='http://play.withsix.com/' target=_blank>play withSIX</a>
-  such as @A3MP
+  Install mods from <a href='http://play.withsix.com/' target=_blank>Play withSIX</a>
 </p>
 
 <form class="form" role="form" action="/api/mods" method="POST">
   <div class="form-group">
-    <label for="mod" class="control-label">Mod</label>
-    <input type="text" class="form-control mod" name="name" id="mod" data-field="mod">
+    <label for="query" class="control-label">Search</label>
+    <input type="text" class="form-control query" name="query" id="query" data-field="query">
     <span class="help-block"></span>
   </div>
 </form>
+
+<table class="table table-striped">
+  <thead>
+    <tr>
+      <th>Mod</th>
+      <th></th>
+    </tr>
+  </thead>
+
+  <!-- want to insert collection items, here -->
+  <tbody></tbody>
+</table>

public/js/tpl/mods/list_item.html

@@ -7,9 +7,10 @@
 </td>
 <td>
   <% if (outdated) { %>
-    <a class="btn btn-primary btn-xs update ladda-button" data-style="expand-left">
+    <a class="btn btn-primary btn-xs update ladda-button pull-right" data-style="expand-left">
       <span class="glyphicon glyphicon-save"></span>
       Update
     </a>
+    <div class="clearfix"></div>
   <% } %>
 </td>

public/js/tpl/mods/search/list_item.html

@@ -0,0 +1,20 @@
+<td style="width: 100%;">
+  <p>
+    <strong><%-name%></strong>
+    <small><%-type%></small
+  </p>
+  <p><%-title%></p>
+</td>
+<td>
+  <p>
+    <a class="btn btn-primary btn-xs install ladda-button pull-right" data-style="expand-left">
+      <span class="glyphicon glyphicon-save"></span>
+      Install
+    </a>
+    <div class="clearfix"></div>
+  </p>
+  <p>
+    <small class="pull-right"><%-formattedSize%></small>
+    <div class="clearfix"></div>
+  </p>
+</td>