Split server mods list into two pane layout

This commit is contained in:
Björn Dahlgren 2022-09-04 23:05:16 +02:00
parent 27df1c9713
commit fc49f3bf2b
15 changed files with 236 additions and 116 deletions

View File

@ -0,0 +1,10 @@
var Backbone = require('backbone')
var ServerMod = require('app/models/server_mod')
module.exports = Backbone.Collection.extend({
comparator: function (a, b) {
return a.get('name').toLowerCase().localeCompare(b.get('name').toLowerCase())
},
model: ServerMod
})

View File

@ -0,0 +1,11 @@
var Backbone = require('backbone')
module.exports = Backbone.Model.extend({
defaults: {
name: ''
},
idAttribute: 'name',
isNew: function () {
return true
}
})

View File

@ -0,0 +1,16 @@
var _ = require('underscore')
var ModsListView = require('app/views/mods/list')
var ListItemView = require('app/views/servers/mods/available/list_item')
var tpl = require('tpl/servers/mods/available/list.html')
module.exports = ModsListView.extend({
childView: ListItemView,
template: _.template(tpl),
buildChildView: function (item, ChildViewType, childViewOptions) {
var options = _.extend({ model: item, selectedModsCollection: this.options.selectedModsCollection }, childViewOptions)
var view = new ChildViewType(options)
return view
}
})

View File

@ -0,0 +1,33 @@
var _ = require('underscore')
var ServerMod = require('app/models/server_mod')
var ModListItemView = require('app/views/mods/list_item')
var tpl = require('tpl/servers/mods/available/list_item.html')
var template = _.template(tpl)
module.exports = ModListItemView.extend({
template: template,
templateHelpers: function () {
var superTemplateHelpers = ModListItemView.prototype.templateHelpers.call(this)
var name = this.model.get('name')
var modSelected = this.options.selectedModsCollection.get(name)
return Object.assign({}, superTemplateHelpers, {
isDisabledButton: function () {
return modSelected ? 'disabled' : ''
}
})
},
events: {
'click .add-mod': 'addMod'
},
addMod: function (e) {
e.preventDefault()
this.options.selectedModsCollection.add(new ServerMod({
name: this.model.get('name')
}))
}
})

View File

@ -1,7 +1,9 @@
var _ = require('underscore')
var ServerMods = require('app/collections/server_mods')
var ModsView = require('app/views/mods/index')
var ListView = require('app/views/servers/mods/list')
var AvailableModsListView = require('app/views/servers/mods/available/list')
var SelectedModsListView = require('app/views/servers/mods/selected/list')
var tpl = require('tpl/servers/mods/index.html')
var template = _.template(tpl)
@ -9,24 +11,66 @@ var template = _.template(tpl)
module.exports = ModsView.extend({
template: template,
regions: {
availableView: '#available',
selectedView: '#selected'
},
modelEvents: {
change: 'serverUpdated'
},
initialize: function (options) {
ModsView.prototype.initialize.call(this, options)
this.modsListView = new ListView({
this.selectedModsCollection = new ServerMods(this.serverMods())
this.availableModsListView = new AvailableModsListView({
collection: this.options.mods,
server: this.options.server,
selectedModsCollection: this.selectedModsCollection,
filterValue: this.filterValue
})
this.selectedModsListView = new SelectedModsListView({
collection: this.selectedModsCollection
})
this.listenTo(this.selectedModsCollection, 'update', this.availableModsListView.render)
},
updateFilter: function (event) {
this.filterValue = event.target.value
this.availableModsListView.filterValue = this.filterValue
this.availableModsListView.render()
this.selectedModsListView.filterValue = this.filterValue
this.selectedModsListView.render()
},
onRender: function () {
this.availableView.show(this.availableModsListView)
this.selectedView.show(this.selectedModsListView)
},
serverMods: function () {
return this.model.get('mods')
.map(function (mod) {
return {
name: mod
}
})
},
serverUpdated: function () {
this.modsListView.render()
this.selectedModsCollection.set(this.serverMods())
},
serialize: function () {
return this.modsListView.serialize()
this.selectedModsCollection.sort()
return {
mods: this.selectedModsCollection.toJSON()
.map(function (mod) {
return mod.name
})
}
}
})

View File

@ -1,46 +0,0 @@
var $ = require('jquery')
var _ = require('underscore')
var ModsListView = require('app/views/mods/list')
var ListItemView = require('app/views/servers/mods/list_item')
var tpl = require('tpl/servers/mods/list.html')
module.exports = ModsListView.extend({
childView: ListItemView,
template: _.template(tpl),
events: {
'click .check-all': 'checkAll',
'click .uncheck-all': 'uncheckAll'
},
buildChildView: function (item, ChildViewType, childViewOptions) {
var options = _.extend({ model: item, server: this.options.server }, childViewOptions)
var view = new ChildViewType(options)
return view
},
changeAllCheckbox: function (checked) {
this.$('input:checkbox').map(function (idx, el) {
return $(el).prop('checked', checked)
})
},
checkAll: function (e) {
e.preventDefault()
this.changeAllCheckbox(true)
},
uncheckAll: function (e) {
e.preventDefault()
this.changeAllCheckbox(false)
},
serialize: function () {
return {
mods: this.$('input:checkbox:checked').map(function (idx, el) {
return $(el).val()
}).get()
}
}
})

View File

@ -1,41 +0,0 @@
var _ = require('underscore')
var ModListItemView = require('app/views/mods/list_item')
var tpl = require('tpl/servers/mods/list_item.html')
var template = _.template(tpl)
module.exports = ModListItemView.extend({
tagName: 'tr',
template: template,
templateHelpers: function () {
var modFile = this.model.get('modFile')
var name = this.model.get('name')
var steamMeta = this.model.get('steamMeta')
var enabled = this.options.server.get('mods').indexOf(name) > -1
var link = null
var title = null
if (steamMeta && steamMeta.id) {
if (steamMeta.id) {
link = 'https://steamcommunity.com/sharedfiles/filedetails/?id=' + steamMeta.id
}
if (steamMeta.name) {
title = steamMeta.name
}
}
if (modFile && modFile.name) {
title = modFile.name
}
return {
enabled: enabled,
link: link,
title: title
}
}
})

View File

@ -0,0 +1,21 @@
var _ = require('underscore')
var Marionette = require('marionette')
var ServerMod = require('app/models/server_mod')
var ListItemView = require('app/views/servers/mods/selected/list_item')
var tpl = require('tpl/servers/mods/selected/list.html')
module.exports = Marionette.CompositeView.extend({
childView: ListItemView,
childViewContainer: 'tbody',
template: _.template(tpl),
events: {
'click .add-mod': 'addMod'
},
addMod: function (e) {
e.preventDefault()
this.collection.add(new ServerMod({ name: 'Unlisted' }))
}
})

View File

@ -0,0 +1,27 @@
var $ = require('jquery')
var _ = require('underscore')
var ModListItemView = require('app/views/mods/list_item')
var tpl = require('tpl/servers/mods/selected/list_item.html')
var template = _.template(tpl)
module.exports = ModListItemView.extend({
template: template,
events: {
'click button.delete': 'delete',
'change select#difficulty': 'changed',
'change input#name': 'changed'
},
changed: function (e) {
var val = $(e.target).val()
this.model.set(e.target.id, val)
},
delete: function (e) {
e.preventDefault()
this.model.destroy()
}
})

View File

@ -1,10 +1,9 @@
<form>
<button class="btn btn-xs btn-primary check-all">Check All</button>
<button class="btn btn-xs btn-primary uncheck-all">Uncheck All</button>
<table class="table table-striped">
<thead>
<tr>
<th>Mod</th>
<th></th>
</tr>
</thead>

View File

@ -0,0 +1,18 @@
<td>
<%-name%>
<% if (link) { %>
<a href='<%-link%>' target=_blank rel='noopener noreferrer'>
<%-title%>
</a>
<% } else if (title) { %>
<%-title%>
<% } %>
</td>
<td>
<a class="btn btn-primary btn-xs pull-right add-mod" <%- isDisabledButton() %>>
<span class="glyphicon glyphicon-plus"></span>
Add
</a>
<div class="clearfix"></div>
</td>

View File

@ -1,8 +1,14 @@
<form>
<div class="form-group">
<label for="filterMods">Filter</label>
<input type="text" class="form-control" id="filterMods" placeholder="Filter mods..." value="<%-filterValue%>">
</div>
</form>
<div class="row">
<div class="col-sm-6">
<form>
<div class="form-group">
<label for="filterMods">Filter</label>
<input type="text" class="form-control" id="filterMods" placeholder="Filter mods..." value="<%-filterValue%>">
</div>
</form>
<div id="list"></div>
<div id="available"></div>
</div>
<div class="col-sm-6">
<div id="selected"></div>
</div>

View File

@ -1,15 +0,0 @@
<td>
<div class="checkbox">
<label>
<input type="checkbox" value="<%-name%>" <% if (enabled) { %>checked<% } %> >
<%-name%>
<% if (link) { %>
<a href='<%-link%>' target=_blank rel='noopener noreferrer'>
<%-title%>
</a>
<% } else if (title) { %>
<%-title%>
<% } %>
</label>
</div>
</td>

View File

@ -0,0 +1,18 @@
<form>
<table class="table table-striped">
<thead>
<tr>
<th>Selected Mods</th>
<th></th>
</tr>
</thead>
<!-- want to insert collection items, here -->
<tbody></tbody>
</table>
</form>
<a class="btn btn-primary add-mod" href="#">
<span class="glyphicon glyphicon-plus"></span>
Add unlisted mod
</a>

View File

@ -0,0 +1,19 @@
<td>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Name" value="<%- name %>">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-xs btn-danger delete">
<span class="glyphicon glyphicon-minus"></span>
Remove mod
</button>
</div>
</div>
</form>
</td>