adding bootstrap multiselect for users/servers

This commit is contained in:
Pepijn Over 2014-08-01 15:30:01 +02:00
parent e60e647eb3
commit fb0b321380
21 changed files with 177 additions and 211 deletions

View File

@ -116,5 +116,6 @@ The following libraries are being used by PHP Server Monitor:
* jqPlot - http://www.jqplot.com
* Twitter Bootstrap - http://getbootstrap.com
* Bootstrap Multiselect - https://github.com/davidstutz/bootstrap-multiselect
* PHP Mailer - https://github.com/PHPMailer/PHPMailer
* php-pushover - https://github.com/kryap/php-pushover

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'преди минута',
'seconds_ago' => 'преди %d секунди',
'a_second_ago' => 'преди секунда',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => 'Настройки',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'omkring et minut siden',
'seconds_ago' => '%d sekunder siden',
'a_second_ago' => 'et sekund siden',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => 'Indstillinger',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'about a minute ago',
'seconds_ago' => '%d seconds ago',
'a_second_ago' => 'a second ago',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => 'Einstellungen',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'about a minute ago',
'seconds_ago' => '%d seconds ago',
'a_second_ago' => 'a second ago',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => 'Config',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'about a minute ago',
'seconds_ago' => '%d seconds ago',
'a_second_ago' => 'a second ago',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => 'Configurar',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'Il y a une minute',
'seconds_ago' => 'Il y a %d secondes',
'a_second_ago' => 'Il y a une seconde',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => 'Configuration',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'about a minute ago',
'seconds_ago' => '%d seconds ago',
'a_second_ago' => 'a second ago',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => 'Configurazione',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'about a minute ago',
'seconds_ago' => '%d seconds ago',
'a_second_ago' => 'a second ago',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => '설정',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'een minuut geleden',
'seconds_ago' => '%d seconden geleden',
'a_second_ago' => 'een seconde geleden',
'check_all' => 'Selecteer alles',
'uncheck_all' => 'Deselecteer alles',
),
'menu' => array(
'config' => 'Configuratie',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'cerca de um minuto atrás',
'seconds_ago' => '%d segundos atrás',
'a_second_ago' => 'um segundo atrás',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => 'Configuração',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => 'минуту назад',
'seconds_ago' => '%d секунд назад',
'a_second_ago' => 'секунду назад',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => 'Параметры',

View File

@ -58,8 +58,6 @@ $sm_lang = array(
'a_minute_ago' => '1分钟前',
'seconds_ago' => '%d 秒前',
'a_second_ago' => '刚刚',
'check_all' => 'Check all',
'uncheck_all' => 'Uncheck all',
),
'menu' => array(
'config' => '设置',

View File

@ -190,7 +190,7 @@ class ServerController extends AbstractServerController {
$user_idc_selected = $this->getServerUsers($this->server_id);
foreach($users as &$user) {
if(in_array($user['user_id'], $user_idc_selected)) {
$user['edit_checked'] = 'checked="checked"';
$user['edit_selected'] = 'selected="selected"';
}
}
@ -443,8 +443,6 @@ class ServerController extends AbstractServerController {
'label_yes' => psm_get_lang('system', 'yes'),
'label_no' => psm_get_lang('system', 'no'),
'label_add_new' => psm_get_lang('system', 'add_new'),
'label_check_all' => psm_get_lang('system', 'check_all'),
'label_uncheck_all' => psm_get_lang('system', 'uncheck_all'),
)
);

View File

@ -168,7 +168,7 @@ class UserController extends AbstractController {
foreach($this->servers as &$server) {
if(in_array($server['server_id'], $user_servers)) {
$server['edit_checked'] = 'checked="checked"';
$server['edit_selected'] = 'selected="selected"';
$server['class'] = 'active';
}
}
@ -329,8 +329,6 @@ class UserController extends AbstractController {
'label_edit' => psm_get_lang('system', 'edit'),
'label_delete' => psm_get_lang('system', 'delete'),
'label_add_new' => psm_get_lang('system', 'add_new'),
'label_check_all' => psm_get_lang('system', 'check_all'),
'label_uncheck_all' => psm_get_lang('system', 'uncheck_all'),
'icon_level_10' => 'icon-admin',
'icon_level_20' => 'icon-user',
)

View File

@ -13,6 +13,7 @@
<!-- Le styles -->
<link href="static/plugin/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="static/plugin/twitter-bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="static/plugin/bootstrap-multiselect/bootstrap-multiselect.min.css" rel="stylesheet">
<link href="static/css/style.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
@ -20,6 +21,7 @@
<![endif]-->
<script type="text/javascript" src="static/plugin/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="static/plugin/twitter-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/plugin/bootstrap-multiselect/bootstrap-multiselect.min.js"></script>
<script type="text/javascript" src="static/js/scripts.js"></script>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50" class="{body_class}">

View File

@ -75,110 +75,102 @@
<form class="form-horizontal well" action="{url_save}" method="post">
<fieldset>
<legend>{titlemode}</legend>
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label" for="label">{label_label}</label>
<div class="controls">
<input type="text" id="label" name="label" value="{edit_value_label}" maxlength="255" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="ip">{label_domain}</label>
<div class="controls">
<input type="text" id="ip" name="ip" value="{edit_value_ip}" maxlength="100" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="type">{label_type}</label>
<div class="controls">
<select id="type" name="type">
<option value="service" {edit_type_selected_service}>{label_service}</option>
<option value="website" {edit_type_selected_website}>{label_website}</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="port">{label_port}</label>
<div class="controls">
<input class="input-mini" type="text" id="port" name="port" value="{edit_value_port}" maxlength="5" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="pattern">{label_pattern}</label>
<div class="controls">
<input type="text" id="pattern" name="pattern" value="{edit_value_pattern}" maxlength="255" data-toggle="tooltip" title="{label_pattern_description}" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="warning_threshold">{label_warning_threshold}</label>
<div class="controls">
<input class="input-mini" type="text" id="warning_threshold" name="warning_threshold" value="{edit_value_warning_threshold}" maxlength="5" data-toggle="tooltip" title="{label_warning_threshold_description}" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="timeout">{label_timeout}</label>
<div class="controls">
<input class="input-mini" type="text" id="timeout" name="timeout" value="{edit_value_timeout}" placeholder="{default_value_timeout}" maxlength="10" data-toggle="tooltip" title="{label_timeout_description}" /> s
</div>
</div>
<div class="control-group">
<label class="control-label" for="active">{label_monitoring}</label>
<div class="controls">
<select id="active" name="active">
<option value="yes" {edit_active_selected_yes}>{label_yes}</option>
<option value="no" {edit_active_selected_no}>{label_no}</option>
</select>
</div>
</div>
<div class="control-group {control_class_email}">
<label class="control-label" for="email">{label_send_email} {warning_email}</label>
<div class="controls">
<select id="email" name="email">
<option value="yes" {edit_email_selected_yes}>{label_yes}</option>
<option value="no" {edit_email_selected_no}>{label_no}</option>
</select>
</div>
</div>
<div class="control-group {control_class_sms}">
<label class="control-label" for="sms">{label_send_sms} {warning_sms}</label>
<div class="controls">
<select id="sms" name="sms">
<option value="yes" {edit_sms_selected_yes}>{label_yes}</option>
<option value="no" {edit_sms_selected_no}>{label_no}</option>
</select>
</div>
</div>
<div class="control-group {control_class_pushover}">
<label class="control-label" for="pushover">{label_pushover} {warning_pushover}</label>
<div class="controls">
<select id="pushover" name="pushover">
<option value="yes" {edit_pushover_selected_yes}>{label_yes}</option>
<option value="no" {edit_pushover_selected_no}>{label_no}</option>
</select>
</div>
</div>
</div>
<div class="span6">
<div class="control-group">
<label class="control-label">{label_users}</label>
<div class="controls">
<!--%tpl_repeat_users-->
<label class="checkbox"><input type="checkbox" name="user_id[]" value="{user_id}" {edit_checked}> {name}</label>
<!--%%tpl_repeat_users-->
{users}
<p><button class="btn btn-small" onclick="psm_onClickCheckboxIDCToggleAll('user_id[]', true);return false;">{label_check_all}</button>
<button class="btn btn-small" onclick="psm_onClickCheckboxIDCToggleAll('user_id[]', false);return false;">{label_uncheck_all}</button></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="label">{label_label}</label>
<div class="controls">
<input type="text" id="label" name="label" value="{edit_value_label}" maxlength="255" />
</div>
</div>
<div class="row-fluid">
<div class="form-actions">
<button class="btn btn-success" type="submit">{label_save}</button>
<a class="btn" href="{url_go_back}" >{label_go_back}</a>
<div class="control-group">
<label class="control-label" for="ip">{label_domain}</label>
<div class="controls">
<input type="text" id="ip" name="ip" value="{edit_value_ip}" maxlength="100" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="type">{label_type}</label>
<div class="controls">
<select id="type" name="type">
<option value="service" {edit_type_selected_service}>{label_service}</option>
<option value="website" {edit_type_selected_website}>{label_website}</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="port">{label_port}</label>
<div class="controls">
<input class="input-mini" type="text" id="port" name="port" value="{edit_value_port}" maxlength="5" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="pattern">{label_pattern}</label>
<div class="controls">
<input type="text" id="pattern" name="pattern" value="{edit_value_pattern}" maxlength="255" data-toggle="tooltip" title="{label_pattern_description}" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="warning_threshold">{label_warning_threshold}</label>
<div class="controls">
<input class="input-mini" type="text" id="warning_threshold" name="warning_threshold" value="{edit_value_warning_threshold}" maxlength="5" data-toggle="tooltip" title="{label_warning_threshold_description}" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="timeout">{label_timeout}</label>
<div class="controls">
<input class="input-mini" type="text" id="timeout" name="timeout" value="{edit_value_timeout}" placeholder="{default_value_timeout}" maxlength="10" data-toggle="tooltip" title="{label_timeout_description}" /> s
</div>
</div>
<div class="control-group">
<label class="control-label" for="active">{label_monitoring}</label>
<div class="controls">
<select id="active" name="active">
<option value="yes" {edit_active_selected_yes}>{label_yes}</option>
<option value="no" {edit_active_selected_no}>{label_no}</option>
</select>
</div>
</div>
<div class="control-group {control_class_email}">
<label class="control-label" for="email">{label_send_email} {warning_email}</label>
<div class="controls">
<select id="email" name="email">
<option value="yes" {edit_email_selected_yes}>{label_yes}</option>
<option value="no" {edit_email_selected_no}>{label_no}</option>
</select>
</div>
</div>
<div class="control-group {control_class_sms}">
<label class="control-label" for="sms">{label_send_sms} {warning_sms}</label>
<div class="controls">
<select id="sms" name="sms">
<option value="yes" {edit_sms_selected_yes}>{label_yes}</option>
<option value="no" {edit_sms_selected_no}>{label_no}</option>
</select>
</div>
</div>
<div class="control-group {control_class_pushover}">
<label class="control-label" for="pushover">{label_pushover} {warning_pushover}</label>
<div class="controls">
<select id="pushover" name="pushover">
<option value="yes" {edit_pushover_selected_yes}>{label_yes}</option>
<option value="no" {edit_pushover_selected_no}>{label_no}</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_id">{label_users}</label>
<div class="controls">
<select class="multiselect" multiple="multiple" id="user_id" name="user_id[]">
<!--%tpl_repeat_users-->
<option value="{user_id}" {edit_selected}> {name}</option>
<!--%%tpl_repeat_users-->
{users}
</select>
</div>
</div>
<div class="form-actions">
<button class="btn btn-success" type="submit">{label_save}</button>
<a class="btn" href="{url_go_back}" >{label_go_back}</a>
</div>
</fieldset>
</form>
<!--%%tpl_server_update-->

View File

@ -66,94 +66,86 @@
<form class="form-horizontal well" action="{url_save}" method="post">
<fieldset>
<legend>{titlemode}</legend>
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label" for="user_name">{label_user_name}</label>
<div class="controls">
<input type="text" id="user_name" name="user_name" value="{edit_value_user_name}" maxlength="64" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">{label_name}</label>
<div class="controls">
<input type="text" id="name" name="name" value="{edit_value_name}" maxlength="255" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="level">{label_level}</label>
<div class="controls">
<select id="level" name="level">
<!--%tpl_repeat_levels-->
<option value="{value}" {selected}>{label}</option>
<!--%%tpl_repeat_levels-->
{levels}
</select>
<p class="help-block">{label_level_description}</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">{label_password}</label>
<div class="controls">
<input type="password" id="password" name="password" maxlength="255" placeholder="{placeholder_password}" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="password_repeat">{label_password_repeat}</label>
<div class="controls">
<input type="password" id="password_repeat" name="password_repeat" maxlength="255" placeholder="{placeholder_password}" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">{label_email}</label>
<div class="controls">
<input type="text" id="email" name="email" value="{edit_value_email}" maxlength="255" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="mobile">{label_mobile}</label>
<div class="controls">
<input type="text" id="mobile" name="mobile" value="{edit_value_mobile}" maxlength="15" />
</div>
</div>
<div class="control-group">
<label class="control-label">{label_pushover}</label>
<div class="controls">{label_pushover_description} </div>
</div>
<div class="control-group">
<label class="control-label" for="mobile">{label_pushover_key}</label>
<div class="controls">
<input type="text" id="pushover_key" name="pushover_key" value="{edit_value_pushover_key}" maxlength="255" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="mobile">{label_pushover_device}</label>
<div class="controls">
<input type="text" id="pushover_device" name="pushover_device" value="{edit_value_pushover_device}" maxlength="255" />
<p class="help-block">{label_pushover_device_description}</p>
</div>
<div class="control-group">
<label class="control-label" for="user_name">{label_user_name}</label>
<div class="controls">
<input type="text" id="user_name" name="user_name" value="{edit_value_user_name}" maxlength="64" required>
</div>
</div>
<div class="span6">
<div class="control-group">
<label class="control-label">{label_servers}</label>
<div class="controls">
<div class="control-group">
<label class="control-label" for="name">{label_name}</label>
<div class="controls">
<input type="text" id="name" name="name" value="{edit_value_name}" maxlength="255" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="level">{label_level}</label>
<div class="controls">
<select id="level" name="level">
<!--%tpl_repeat_levels-->
<option value="{value}" {selected}>{label}</option>
<!--%%tpl_repeat_levels-->
{levels}
</select>
<p class="help-block">{label_level_description}</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">{label_password}</label>
<div class="controls">
<input type="password" id="password" name="password" maxlength="255" placeholder="{placeholder_password}" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="password_repeat">{label_password_repeat}</label>
<div class="controls">
<input type="password" id="password_repeat" name="password_repeat" maxlength="255" placeholder="{placeholder_password}" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">{label_email}</label>
<div class="controls">
<input type="text" id="email" name="email" value="{edit_value_email}" maxlength="255" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="mobile">{label_mobile}</label>
<div class="controls">
<input type="text" id="mobile" name="mobile" value="{edit_value_mobile}" maxlength="15" />
</div>
</div>
<div class="control-group">
<label class="control-label">{label_pushover}</label>
<div class="controls">{label_pushover_description} </div>
</div>
<div class="control-group">
<label class="control-label" for="mobile">{label_pushover_key}</label>
<div class="controls">
<input type="text" id="pushover_key" name="pushover_key" value="{edit_value_pushover_key}" maxlength="255" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="mobile">{label_pushover_device}</label>
<div class="controls">
<input type="text" id="pushover_device" name="pushover_device" value="{edit_value_pushover_device}" maxlength="255" />
<p class="help-block">{label_pushover_device_description}</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="server_id">{label_servers}</label>
<div class="controls">
<select class="multiselect" multiple="multiple" id="server_id" name="server_id[]">
<!--%tpl_repeat_servers-->
<label class="checkbox"><input type="checkbox" name="server_id[]" value="{server_id}" {edit_checked}> {label}</label>
<option value="{server_id}" {edit_selected}> {label}</option>
<!--%%tpl_repeat_servers-->
{servers}
<p><button class="btn btn-small" onclick="psm_onClickCheckboxIDCToggleAll('server_id[]', true);return false;">{label_check_all}</button>
<button class="btn btn-small" onclick="psm_onClickCheckboxIDCToggleAll('server_id[]', false);return false;">{label_uncheck_all}</button></p>
</div>
</select>
</div>
</div>
</div>
<div class="row-fluid">
<div class="form-actions">
<button class="btn btn-success" type="submit">{label_save}</button>
<button class="btn" onclick="history.back();return false;" >{label_go_back}</button>
</div>
</div>
<div class="form-actions">
<button class="btn btn-success" type="submit">{label_save}</button>
<button class="btn" onclick="history.back();return false;" >{label_go_back}</button>
</div>
</fieldset>
</form>
<!--%%tpl_user_update-->

View File

@ -40,6 +40,11 @@ $().ready(function() {
}
return false;
});
$('select.multiselect').multiselect({
includeSelectAllOption: true,
maxHeight: 400,
enableCaseInsensitiveFiltering: true
});
psm_flash_message();
psm_tooltips();

View File

@ -0,0 +1 @@
.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li>label.multiselect-group{margin:0;padding:3px 20px;height:100%;font-weight:700}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0}

File diff suppressed because one or more lines are too long