Implement moving

This commit is contained in:
Helloworld
2022-05-30 10:56:03 +08:00
parent 8702abe745
commit d24dd7d3b7

View File

@@ -19,8 +19,36 @@ const skill_usage = () => {
'</select>');
};
const delete_icon = () => {
return $('<button type="button" class="btn btn-default"><span class="ui-icon ui-icon-closethick"></span></button>')
const move_up_icon = (data, arr) => {
return $('<button type="button" class="btn btn-primary"><span class="ui-icon ui-icon-triangle-1-n"></span></button>')
.click(() => {
const index = arr.indexOf(data);
if (index > 0) {
arr.splice(index, 1);
arr.splice(index - 1, 0, data);
loadData();
}
});
}
const move_down_icon = (data, arr) => {
return $('<button type="button" class="btn btn-primary"><span class="ui-icon ui-icon-triangle-1-s"></span></button>')
.click(() => {
const index = arr.indexOf(data);
if (index < arr.length - 1) {
arr.splice(index, 1);
arr.splice(index + 1, 0, data);
loadData();
}
});
}
const delete_icon = (data, arr) => {
return $('<button type="button" class="btn btn-danger"><span class="ui-icon ui-icon-closethick"></span></button>')
.click(() => {
arr.splice(arr.indexOf(data), 1);
loadData();
});
};
const action_type = () => {
@@ -44,7 +72,7 @@ const direction = () => {
'</select>');
};
const oper = (oper_data, arr, delete_callback) => {
const oper = (oper_data, arr) => {
const tr = $('<tr>');
// 干员名字
const name_input = input_oper_name()
@@ -63,14 +91,14 @@ const oper = (oper_data, arr, delete_callback) => {
.change(function () { oper_data.skill_usage = Number($(this).val()); });
tr.append($('<td>').append(skill_usage_input));
// 删除
tr.append($('<td>').append(delete_icon().click(() => {
arr = arr.filter(o => o !== oper_data);
delete_callback(arr);
})));
tr.append($('<td>')
.append(move_up_icon(oper_data, arr))
.append(move_down_icon(oper_data, arr))
.append(delete_icon(oper_data, arr)));
return tr;
}
const action = (action_data) => {
const action = (action_data, arr) => {
const tr = $('<tr>');
// 类别
const type_input = action_type()
@@ -140,14 +168,13 @@ const action = (action_data) => {
.change(function () { action_data.doc_color = $(this).val(); });
tr.append($('<td>').append(doc_color_input));
// 删除
tr.append($('<td>').append(delete_icon().click(() => {
data.actions = data.actions.filter(a => a !== action_data);
loadData();
})));
tr.append($('<td>').append(move_up_icon(action_data, arr))
.append(move_down_icon(action_data, arr))
.append(delete_icon(action_data, arr)));
return tr;
};
const group = (group_data, arr, delete_callback) => {
const group = (group_data, arr) => {
// 群组名
const name_div_row = $('<div class="row">');
const name_div_col = $('<div class="col-11">');
@@ -156,10 +183,9 @@ const group = (group_data, arr, delete_callback) => {
.change(function () { group_data.name = $(this).val(); });
name_div_col.append(name_input);
const delete_col = $('<div class="col-1">');
delete_col.append(delete_icon().click(() => {
arr = arr.filter(o => o !== group_data);
delete_callback(arr);
}));
delete_col.append(move_up_icon(group_data, arr))
.append(move_down_icon(group_data, arr))
.append(delete_icon(group_data, arr));
name_div_row.append(name_div_col).append(delete_col);
// 群组干员列表
@@ -202,22 +228,16 @@ const loadData = () => {
$('#opers tbody').html('');
(data.opers ?? []).forEach(oper_data => $('#opers tbody').append(
oper(oper_data, data.opers, (new_arr) => {
data.opers = new_arr;
loadData();
})
oper(oper_data, data.opers)
));
$('#groups').html('');
(data.groups ?? []).forEach(group_data => $('#groups').append(
group(group_data, data.groups, (new_arr) => {
data.groups = new_arr;
loadData();
})
group(group_data, data.groups)
));
$('#actions tbody').html('');
(data.actions ?? []).forEach(action_data => $('#actions tbody').append(action(action_data)));
(data.actions ?? []).forEach(action_data => $('#actions tbody').append(action(action_data, data.actions)));
};
$(document).ready(() => {