Add max_space option slider

conf/piratebox_config.php.tpl

@@ -23,6 +23,7 @@ $options = [
 
   'base_path'          => "<TPL:NGINX_REALPATH>",
   'base_uri'           => "/",
+  'max_space'          => <TPL:OPT_MAXSPACE>,
 
   'allow_renaming'     => <TPL:OPT_RENAMING>,
   'allow_deleting'     => <TPL:OPT_DELETING>,

conf/ynh-piratebox

@@ -85,6 +85,7 @@ set_captive() {
 
   sed -i "s|<TPL:OPT_NAME>|${ynh_opt_name}|" -i /var/www/piratebox/config.php
   sed -i "s|<TPL:OPT_RENAMING>|${ynh_opt_renaming}|" -i /var/www/piratebox/config.php
+  sed -i "s|<TPL:OPT_MAXSPACE>|${ynh_opt_maxspace}|" -i /var/www/piratebox/config.php
   sed -i "s|<TPL:OPT_DELETING>|${ynh_opt_deleting}|" -i /var/www/piratebox/config.php
   sed -i "s|<TPL:OPT_CHAT>|${ynh_opt_chat}|" -i /var/www/piratebox/config.php
 
@@ -170,6 +171,7 @@ if [ "$1" != restart ]; then
 
   ynh_service_enabled=$(ynh_setting_get piratebox service_enabled)
   ynh_opt_renaming=$(ynh_setting_get piratebox opt_renaming)
+  ynh_opt_maxspace=$(ynh_setting_get piratebox opt_maxspace)
   ynh_opt_deleting=$(ynh_setting_get piratebox opt_deleting)
   ynh_opt_chat=$(ynh_setting_get piratebox opt_chat)
   ynh_opt_name=$(ynh_setting_get piratebox opt_name)

scripts/install

@@ -60,6 +60,7 @@ if ! $upgrade; then
   sudo yunohost app setting piratebox opt_domain -v "${opt_domain}"
   sudo yunohost app setting piratebox opt_name -v "${opt_name}"
   sudo yunohost app setting piratebox opt_renaming -v "${opt_renaming}"
+  sudo yunohost app setting piratebox opt_maxspace -v 90
   sudo yunohost app setting piratebox opt_deleting -v "${opt_deleting}"
   sudo yunohost app setting piratebox opt_chat -v "${opt_chat}"
   sudo yunohost app setting piratebox wifi_device_id -v -1

scripts/upgrade

@@ -25,6 +25,12 @@ bash ./install "${domain}" "${path}" "${opt_domain}" "${opt_name}" "${opt_deleti
 sudo mv "${tmpdir}/uploads/"* /var/www/piratebox/public/uploads/ 2> /dev/null
 sudo rm -r "${tmpdir}/"
 
+# Changes
+
+if [ "$(ynh_setting piratebox opt_maxspace)" == '' ]; then
+  sudo yunohost app setting piratebox opt_maxspace -v 90
+fi
+
 sudo systemctl start ynh-piratebox
 
 exit 0

sources/controller.php

@@ -74,6 +74,7 @@ dispatch('/', function() {
   set('wifi_device_id', $wifi_device_id);
   set('wifi_ssid', $wifi_ssid);
   set('wifi_ssid_list', $wifi_ssid_list);
+  set('opt_maxspace', ynh_setting_get('opt_maxspace'));
   set('opt_renaming', ynh_setting_get('opt_renaming'));
   set('opt_deleting', ynh_setting_get('opt_deleting'));
   set('opt_chat', ynh_setting_get('opt_chat'));
@@ -111,6 +112,7 @@ dispatch_put('/settings', function() {
   if($service_enabled == 1) {
     ynh_setting_set('opt_name', $_POST['opt_name']);
     ynh_setting_set('opt_renaming', isset($_POST['opt_renaming']) ? 1 : 0);
+    ynh_setting_set('opt_maxspace', $_POST['opt_maxspace']);
     ynh_setting_set('opt_deleting', isset($_POST['opt_deleting']) ? 1 : 0);
     ynh_setting_set('opt_chat', isset($_POST['opt_chat']) ? 1 : 0);
     ynh_setting_set('wifi_device_id', $_POST['wifi_device_id']);

sources/i18n/fr_FR/LC_MESSAGES/localization.po

@@ -8,8 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: data 2\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2015-07-25 10:54+0200\n"
-"PO-Revision-Date: 2015-07-25 10:57+0100\n"
+"POT-Creation-Date: 2015-07-25 13:10+0200\n"
+"PO-Revision-Date: 2015-07-25 13:11+0100\n"
 "Last-Translator: samy boutayeb <samy@langues-etcetera.fr>\n"
 "Language-Team: none\n"
 "Language: fr\n"
@@ -19,20 +19,44 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
 "X-Generator: Poedit 1.6.10\n"
 
-#: sources/views/layout.html.php:27 sources/views/settings.html.php:80
-#: sources/controller.php:102
+#: sources/controller.php:95
+msgid "The name cannot be empty"
+msgstr "Le nom ne peut pas être vide"
+
+#: sources/controller.php:99
+msgid "You need to select an associated hotspot"
+msgstr "Vous devez choisir un point d'accès à associer"
+
+#: sources/controller.php:103 sources/views/layout.html.php:27
+#: sources/views/settings.html.php:80
 msgid "PirateBox"
 msgstr "PirateBox"
 
-#: sources/views/layout.html.php:49
+#: sources/controller.php:103
+msgid "configuration not updated"
+msgstr "configuration non-mise à jour"
+
+#: sources/controller.php:123
+msgid "Configuration updated and service successfully reloaded"
+msgstr "Configuration mise à jour et service rechargé avec succès"
+
+#: sources/controller.php:125
+msgid "Configuration updated but service reload failed"
+msgstr "Configuration mise à jour mais le rechargement du service a échoué"
+
+#: sources/controller.php:129
+msgid "Service successfully disabled"
+msgstr "Service désactivé avec succès"
+
+#: sources/views/layout.html.php:51
 msgid "Error"
 msgstr "Erreur"
 
-#: sources/views/layout.html.php:54 sources/views/settings.html.php:60
+#: sources/views/layout.html.php:56 sources/views/settings.html.php:60
 msgid "Notice"
 msgstr "Notice"
 
-#: sources/views/layout.html.php:66
+#: sources/views/layout.html.php:68
 msgid "Any problem? Contribute!"
 msgstr "Un problème ? Contribuez !"
 
@@ -88,45 +112,31 @@ msgid "Name"
 msgstr "Nom"
 
 #: sources/views/settings.html.php:92
+msgid "Maximum space occupied on the partition where the PirateBox data are"
+msgstr ""
+"Espace maximum occupé sur la partition sur laquelle les données de la "
+"PirateBox se trouvent"
+
+#: sources/views/settings.html.php:92
+msgid "Maximum Space"
+msgstr "Espace maximum"
+
+#: sources/views/settings.html.php:99
 msgid "Renaming Allowed"
 msgstr "Renommage autorisé"
 
-#: sources/views/settings.html.php:101
+#: sources/views/settings.html.php:108
 msgid "Deleting Allowed"
 msgstr "Suppression autorisée"
 
-#: sources/views/settings.html.php:110
+#: sources/views/settings.html.php:117
 msgid "Chat Enabled"
 msgstr "Chat autorisé"
 
-#: sources/views/settings.html.php:122
+#: sources/views/settings.html.php:129
 msgid "Reloading may take a few minutes. Be patient."
 msgstr "Le rechargement peut prendre quelques minutes. Soyez patient."
 
-#: sources/views/settings.html.php:122
+#: sources/views/settings.html.php:129
 msgid "Save and reload"
 msgstr "Sauvegarder et recharger"
-
-#: sources/controller.php:94
-msgid "The name cannot be empty"
-msgstr "Le nom ne peut pas être vide"
-
-#: sources/controller.php:98
-msgid "You need to select an associated hotspot"
-msgstr "Vous devez choisir un point d'accès à associer"
-
-#: sources/controller.php:102
-msgid "configuration not updated"
-msgstr "configuration non-mise à jour"
-
-#: sources/controller.php:121
-msgid "Configuration updated and service successfully reloaded"
-msgstr "Configuration mise à jour et service rechargé avec succès"
-
-#: sources/controller.php:123
-msgid "Configuration updated but service reload failed"
-msgstr "Configuration mise à jour mais le rechargement du service a échoué"
-
-#: sources/controller.php:127
-msgid "Service successfully disabled"
-msgstr "Service désactivé avec succès"

sources/i18n/localization.pot

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2015-07-25 10:54+0200\n"
+"POT-Creation-Date: 2015-07-25 13:10+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -17,20 +17,44 @@ msgstr ""
 "Content-Type: text/plain; charset=CHARSET\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: sources/views/layout.html.php:27 sources/views/settings.html.php:80
-#: sources/controller.php:102
+#: sources/controller.php:95
+msgid "The name cannot be empty"
+msgstr ""
+
+#: sources/controller.php:99
+msgid "You need to select an associated hotspot"
+msgstr ""
+
+#: sources/controller.php:103 sources/views/layout.html.php:27
+#: sources/views/settings.html.php:80
 msgid "PirateBox"
 msgstr ""
 
-#: sources/views/layout.html.php:49
+#: sources/controller.php:103
+msgid "configuration not updated"
+msgstr ""
+
+#: sources/controller.php:123
+msgid "Configuration updated and service successfully reloaded"
+msgstr ""
+
+#: sources/controller.php:125
+msgid "Configuration updated but service reload failed"
+msgstr ""
+
+#: sources/controller.php:129
+msgid "Service successfully disabled"
+msgstr ""
+
+#: sources/views/layout.html.php:51
 msgid "Error"
 msgstr ""
 
-#: sources/views/layout.html.php:54 sources/views/settings.html.php:60
+#: sources/views/layout.html.php:56 sources/views/settings.html.php:60
 msgid "Notice"
 msgstr ""
 
-#: sources/views/layout.html.php:66
+#: sources/views/layout.html.php:68
 msgid "Any problem? Contribute!"
 msgstr ""
 
@@ -84,45 +108,29 @@ msgid "Name"
 msgstr ""
 
 #: sources/views/settings.html.php:92
+msgid "Maximum space occupied on the partition where the PirateBox data are"
+msgstr ""
+
+#: sources/views/settings.html.php:92
+msgid "Maximum Space"
+msgstr ""
+
+#: sources/views/settings.html.php:99
 msgid "Renaming Allowed"
 msgstr ""
 
-#: sources/views/settings.html.php:101
+#: sources/views/settings.html.php:108
 msgid "Deleting Allowed"
 msgstr ""
 
-#: sources/views/settings.html.php:110
+#: sources/views/settings.html.php:117
 msgid "Chat Enabled"
 msgstr ""
 
-#: sources/views/settings.html.php:122
+#: sources/views/settings.html.php:129
 msgid "Reloading may take a few minutes. Be patient."
 msgstr ""
 
-#: sources/views/settings.html.php:122
+#: sources/views/settings.html.php:129
 msgid "Save and reload"
 msgstr ""
-
-#: sources/controller.php:94
-msgid "The name cannot be empty"
-msgstr ""
-
-#: sources/controller.php:98
-msgid "You need to select an associated hotspot"
-msgstr ""
-
-#: sources/controller.php:102
-msgid "configuration not updated"
-msgstr ""
-
-#: sources/controller.php:121
-msgid "Configuration updated and service successfully reloaded"
-msgstr ""
-
-#: sources/controller.php:123
-msgid "Configuration updated but service reload failed"
-msgstr ""
-
-#: sources/controller.php:127
-msgid "Service successfully disabled"
-msgstr ""

sources/public/css/bootstrap-slider.css

@@ -0,0 +1,139 @@
+/*!
+ * Slider for Bootstrap
+ *
+ * Copyright 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+.slider {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+}
+.slider.slider-horizontal {
+  margin-top: 9px;
+  width: 100%;
+  height: 20px;
+}
+.slider.slider-horizontal .slider-track {
+  height: 10px;
+  width: 100%;
+  margin-top: -5px;
+  top: 50%;
+  left: 0;
+}
+.slider.slider-horizontal .slider-selection {
+  height: 100%;
+  top: 0;
+  bottom: 0;
+}
+.slider.slider-horizontal .slider-handle {
+  margin-left: -10px;
+  margin-top: -5px;
+}
+.slider.slider-horizontal .slider-handle.triangle {
+  border-width: 0 10px 10px 10px;
+  width: 0;
+  height: 0;
+  border-bottom-color: #0480be;
+  margin-top: 0;
+}
+.slider.slider-vertical {
+  height: 210px;
+  width: 20px;
+}
+.slider.slider-vertical .slider-track {
+  width: 10px;
+  height: 100%;
+  margin-left: -5px;
+  left: 50%;
+  top: 0;
+}
+.slider.slider-vertical .slider-selection {
+  width: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+.slider.slider-vertical .slider-handle {
+  margin-left: -5px;
+  margin-top: -10px;
+}
+.slider.slider-vertical .slider-handle.triangle {
+  border-width: 10px 0 10px 10px;
+  width: 1px;
+  height: 1px;
+  border-left-color: #0480be;
+  margin-left: 0;
+}
+.slider input {
+  display: none;
+}
+.slider .tooltip-inner {
+  white-space: nowrap;
+}
+.slider-track {
+  position: absolute;
+  cursor: pointer;
+  background-color: #f7f7f7;
+  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
+  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
+  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
+  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.slider-selection {
+  position: absolute;
+  background-color: #f7f7f7;
+  background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
+  background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
+  background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
+  background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.slider-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: #0e90d2;
+  background-image: -moz-linear-gradient(top, #149bdf, #0480be);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
+  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
+  background-image: -o-linear-gradient(top, #149bdf, #0480be);
+  background-image: linear-gradient(to bottom, #149bdf, #0480be);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  opacity: 0.8;
+  border: 0px solid transparent;
+}
+.slider-handle.round {
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+}
+.slider-handle.triangle {
+  background: transparent none;
+}

sources/public/js/bootstrap-slider.js

@@ -0,0 +1,388 @@
+/* =========================================================
+ * bootstrap-slider.js v2.0.0
+ * http://www.eyecon.ro/bootstrap-slider
+ * =========================================================
+ * Copyright 2012 Stefan Petre
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+ 
+!function( $ ) {
+
+	var Slider = function(element, options) {
+		this.element = $(element);
+		this.picker = $('<div class="slider">'+
+							'<div class="slider-track">'+
+								'<div class="slider-selection"></div>'+
+								'<div class="slider-handle"></div>'+
+								'<div class="slider-handle"></div>'+
+							'</div>'+
+							'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'+
+						'</div>')
+							.insertBefore(this.element)
+							.append(this.element);
+		this.id = this.element.data('slider-id')||options.id;
+		if (this.id) {
+			this.picker[0].id = this.id;
+		}
+
+		if (typeof Modernizr !== 'undefined' && Modernizr.touch) {
+			this.touchCapable = true;
+		}
+
+		var tooltip = this.element.data('slider-tooltip')||options.tooltip;
+
+		this.tooltip = this.picker.find('.tooltip');
+		this.tooltipInner = this.tooltip.find('div.tooltip-inner');
+
+		this.orientation = this.element.data('slider-orientation')||options.orientation;
+		switch(this.orientation) {
+			case 'vertical':
+				this.picker.addClass('slider-vertical');
+				this.stylePos = 'top';
+				this.mousePos = 'pageY';
+				this.sizePos = 'offsetHeight';
+				this.tooltip.addClass('right')[0].style.left = '100%';
+				break;
+			default:
+				this.picker
+					.addClass('slider-horizontal')
+					.css('width', this.element.outerWidth());
+				this.orientation = 'horizontal';
+				this.stylePos = 'left';
+				this.mousePos = 'pageX';
+				this.sizePos = 'offsetWidth';
+				this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px';
+				break;
+		}
+
+		this.min = this.element.data('slider-min')||options.min;
+		this.max = this.element.data('slider-max')||options.max;
+		this.step = this.element.data('slider-step')||options.step;
+		this.value = this.element.data('slider-value')||options.value;
+		if (this.value[1]) {
+			this.range = true;
+		}
+
+		this.selection = this.element.data('slider-selection')||options.selection;
+		this.selectionEl = this.picker.find('.slider-selection');
+		if (this.selection === 'none') {
+			this.selectionEl.addClass('hide');
+		}
+		this.selectionElStyle = this.selectionEl[0].style;
+
+
+		this.handle1 = this.picker.find('.slider-handle:first');
+		this.handle1Stype = this.handle1[0].style;
+		this.handle2 = this.picker.find('.slider-handle:last');
+		this.handle2Stype = this.handle2[0].style;
+
+		var handle = this.element.data('slider-handle')||options.handle;
+		switch(handle) {
+			case 'round':
+				this.handle1.addClass('round');
+				this.handle2.addClass('round');
+				break
+			case 'triangle':
+				this.handle1.addClass('triangle');
+				this.handle2.addClass('triangle');
+				break
+		}
+
+		if (this.range) {
+			this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
+			this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
+		} else {
+			this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
+			this.handle2.addClass('hide');
+			if (this.selection == 'after') {
+				this.value[1] = this.max;
+			} else {
+				this.value[1] = this.min;
+			}
+		}
+		this.diff = this.max - this.min;
+		this.percentage = [
+			(this.value[0]-this.min)*100/this.diff,
+			(this.value[1]-this.min)*100/this.diff,
+			this.step*100/this.diff
+		];
+
+		this.offset = this.picker.offset();
+		this.size = this.picker[0][this.sizePos];
+
+		this.formater = options.formater;
+
+		this.layout();
+
+		if (this.touchCapable) {
+			// Touch: Bind touch events:
+			this.picker.on({
+				touchstart: $.proxy(this.mousedown, this)
+			});
+		} else {
+			this.picker.on({
+				mousedown: $.proxy(this.mousedown, this)
+			});
+		}
+
+		if (tooltip === 'show') {
+			this.picker.on({
+				mouseenter: $.proxy(this.showTooltip, this),
+				mouseleave: $.proxy(this.hideTooltip, this)
+			});
+		} else {
+			this.tooltip.addClass('hide');
+		}
+	};
+
+	Slider.prototype = {
+		constructor: Slider,
+
+		over: false,
+		inDrag: false,
+		
+		showTooltip: function(){
+			this.tooltip.addClass('in');
+			//var left = Math.round(this.percent*this.width);
+			//this.tooltip.css('left', left - this.tooltip.outerWidth()/2);
+			this.over = true;
+		},
+		
+		hideTooltip: function(){
+			if (this.inDrag === false) {
+				this.tooltip.removeClass('in');
+			}
+			this.over = false;
+		},
+
+		layout: function(){
+			this.handle1Stype[this.stylePos] = this.percentage[0]+'%';
+			this.handle2Stype[this.stylePos] = this.percentage[1]+'%';
+			if (this.orientation == 'vertical') {
+				this.selectionElStyle.top = Math.min(this.percentage[0], this.percentage[1]) +'%';
+				this.selectionElStyle.height = Math.abs(this.percentage[0] - this.percentage[1]) +'%';
+			} else {
+				this.selectionElStyle.left = Math.min(this.percentage[0], this.percentage[1]) +'%';
+				this.selectionElStyle.width = Math.abs(this.percentage[0] - this.percentage[1]) +'%';
+			}
+			if (this.range) {
+				this.tooltipInner.text(
+					this.formater(this.value[0]) + 
+					' : ' + 
+					this.formater(this.value[1])
+				);
+				this.tooltip[0].style[this.stylePos] = this.size * (this.percentage[0] + (this.percentage[1] - this.percentage[0])/2)/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
+			} else {
+				this.tooltipInner.text(
+					this.formater(this.value[0])
+				);
+				this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0]/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
+			}
+		},
+
+		mousedown: function(ev) {
+
+			// Touch: Get the original event:
+			if (this.touchCapable && ev.type === 'touchstart') {
+				ev = ev.originalEvent;
+			}
+
+			this.offset = this.picker.offset();
+			this.size = this.picker[0][this.sizePos];
+
+			var percentage = this.getPercentage(ev);
+
+			if (this.range) {
+				var diff1 = Math.abs(this.percentage[0] - percentage);
+				var diff2 = Math.abs(this.percentage[1] - percentage);
+				this.dragged = (diff1 < diff2) ? 0 : 1;
+			} else {
+				this.dragged = 0;
+			}
+
+			this.percentage[this.dragged] = percentage;
+			this.layout();
+
+			if (this.touchCapable) {
+				// Touch: Bind touch events:
+				$(document).on({
+					touchmove: $.proxy(this.mousemove, this),
+					touchend: $.proxy(this.mouseup, this)
+				});
+			} else {
+				$(document).on({
+					mousemove: $.proxy(this.mousemove, this),
+					mouseup: $.proxy(this.mouseup, this)
+				});
+			}
+
+			this.inDrag = true;
+			var val = this.calculateValue();
+			this.element.trigger({
+					type: 'slideStart',
+					value: val
+				}).trigger({
+					type: 'slide',
+					value: val
+				});
+			return false;
+		},
+
+		mousemove: function(ev) {
+			
+			// Touch: Get the original event:
+			if (this.touchCapable && ev.type === 'touchmove') {
+				ev = ev.originalEvent;
+			}
+
+			var percentage = this.getPercentage(ev);
+			if (this.range) {
+				if (this.dragged === 0 && this.percentage[1] < percentage) {
+					this.percentage[0] = this.percentage[1];
+					this.dragged = 1;
+				} else if (this.dragged === 1 && this.percentage[0] > percentage) {
+					this.percentage[1] = this.percentage[0];
+					this.dragged = 0;
+				}
+			}
+			this.percentage[this.dragged] = percentage;
+			this.layout();
+			var val = this.calculateValue();
+			this.element
+				.trigger({
+					type: 'slide',
+					value: val
+				})
+				.data('value', val)
+				.prop('value', val);
+			return false;
+		},
+
+		mouseup: function(ev) {
+			if (this.touchCapable) {
+				// Touch: Bind touch events:
+				$(document).off({
+					touchmove: this.mousemove,
+					touchend: this.mouseup
+				});
+			} else {
+				$(document).off({
+					mousemove: this.mousemove,
+					mouseup: this.mouseup
+				});
+			}
+
+			this.inDrag = false;
+			if (this.over == false) {
+				this.hideTooltip();
+			}
+			this.element;
+			var val = this.calculateValue();
+			this.element
+				.trigger({
+					type: 'slideStop',
+					value: val
+				})
+				.data('value', val)
+				.prop('value', val);
+			return false;
+		},
+
+		calculateValue: function() {
+			var val;
+			if (this.range) {
+				val = [
+					(this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step),
+					(this.min + Math.round((this.diff * this.percentage[1]/100)/this.step)*this.step)
+				];
+				this.value = val;
+			} else {
+				val = (this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step);
+				this.value = [val, this.value[1]];
+			}
+			return val;
+		},
+
+		getPercentage: function(ev) {
+			if (this.touchCapable) {
+				ev = ev.touches[0];
+			}
+			var percentage = (ev[this.mousePos] - this.offset[this.stylePos])*100/this.size;
+			percentage = Math.round(percentage/this.percentage[2])*this.percentage[2];
+			return Math.max(0, Math.min(100, percentage));
+		},
+
+		getValue: function() {
+			if (this.range) {
+				return this.value;
+			}
+			return this.value[0];
+		},
+
+		setValue: function(val) {
+			this.value = val;
+
+			if (this.range) {
+				this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
+				this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
+			} else {
+				this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
+				this.handle2.addClass('hide');
+				if (this.selection == 'after') {
+					this.value[1] = this.max;
+				} else {
+					this.value[1] = this.min;
+				}
+			}
+			this.diff = this.max - this.min;
+			this.percentage = [
+				(this.value[0]-this.min)*100/this.diff,
+				(this.value[1]-this.min)*100/this.diff,
+				this.step*100/this.diff
+			];
+			this.layout();
+		}
+	};
+
+	$.fn.slider = function ( option, val ) {
+		return this.each(function () {
+			var $this = $(this),
+				data = $this.data('slider'),
+				options = typeof option === 'object' && option;
+			if (!data)  {
+				$this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults,options))));
+			}
+			if (typeof option == 'string') {
+				data[option](val);
+			}
+		})
+	};
+
+	$.fn.slider.defaults = {
+		min: 0,
+		max: 10,
+		step: 1,
+		orientation: 'horizontal',
+		value: 5,
+		selection: 'before',
+		tooltip: 'show',
+		handle: 'round',
+		formater: function(value) {
+			return value;
+		}
+	};
+
+	$.fn.slider.Constructor = Slider;
+
+}( window.jQuery );

sources/public/js/custom.js

@@ -47,14 +47,28 @@ $(document).ready(function() {
     }
   });
 
+  function showSliders() {
+    $('#opt_maxspace').slider({
+      formater: function(value) {
+        return value + '%';
+      }
+    });
+  }
+
   $('#service_enabled').change(function() {
     if($('#service_enabled').parent().hasClass('off')) {
       $('.enabled').hide('slow');
     } else {
-      $('.enabled').show('slow');
+      $('.slider').hide();
+      $('.txtslider').hide();
+      $('.enabled').show('slow', showSliders);
     }
   });
 
+  if(!$('#service_enabled').parent().hasClass('off')) {
+    showSliders();
+  }
+
   $('.dropdown-menu li').click(function() {
     var menu = $(this).parent();
     var items = menu.children();

sources/views/layout.html.php

@@ -33,11 +33,13 @@
   <link media="all" type="text/css" href="<?= PUBLIC_DIR ?>/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <link media="all" type="text/css" href="<?= PUBLIC_DIR ?>/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
   <link media="all" type="text/css" href="<?= PUBLIC_DIR ?>/css/bootstrap-toggle.min.css" rel="stylesheet">
+  <link media="all" type="text/css" href="<?= PUBLIC_DIR ?>/css/bootstrap-slider.css" rel="stylesheet">
   <link media="all" type="text/css" href="<?= PUBLIC_DIR ?>/css/style.css" rel="stylesheet">
 
   <script src="<?= PUBLIC_DIR ?>/jquery/jquery-2.1.1.min.js"></script>
   <script src="<?= PUBLIC_DIR ?>/bootstrap/js/bootstrap.min.js"></script>
   <script src="<?= PUBLIC_DIR ?>/js/bootstrap-toggle.min.js"></script>
+  <script src="<?= PUBLIC_DIR ?>/js/bootstrap-slider.js"></script>
   <script src="<?= PUBLIC_DIR ?>/js/custom.js"></script>
 </head>
 

sources/views/settings.html.php

@@ -84,7 +84,14 @@
           <div class="form-group">
             <label for="opt_name" class="col-sm-3 control-label"><?= _('Name') ?></label>
             <div class="col-sm-9">
-              <input type="text" class="form-control" name="opt_name" id="opt_name" placeholder="PirateBox" value="<?= htmlentities($opt_name) ?>" />
+              <input type="text" class="form-control" name="opt_name" id="opt_name" placeholder="ShareBox" value="<?= htmlentities($opt_name) ?>" />
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label for="opt_maxspace" class="col-sm-3 control-label" data-toggle="tooltip" data-title="<?= _('Maximum space occupied on the partition where the PirateBox data are') ?>"><?= _('Maximum Space') ?></label>
+            <div class="col-sm-9">
+              <input type="text" class="form-control txtslider" name="opt_maxspace" id="opt_maxspace" value="<?= htmlentities($opt_maxspace) ?>" data-slider-min="0" data-slider-max="100" data-slider-step="5" data-slider-value="<?= htmlentities($opt_maxspace) ?>" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" />
             </div>
           </div>