mirror of
https://github.com/MaaAssistantArknights/MaaAssistantArknights.git
synced 2026-07-18 02:10:21 +08:00
Merge pull request #612 from LYZhelloworld/feat/Helloworld/tools-copilot-parse-groups
作业生成器增加"分组"的功能
This commit is contained in:
249
tools/CopilotDesinger/index.js
Normal file
249
tools/CopilotDesinger/index.js
Normal file
@@ -0,0 +1,249 @@
|
||||
// 全局JSON数据
|
||||
const data = {};
|
||||
|
||||
// 模板
|
||||
const input_text = () => {
|
||||
return $('<input type="text" class="form-control">');
|
||||
};
|
||||
|
||||
const skill_usage = () => {
|
||||
return $('<select id="skill_usage" class="form-control" style="width:auto">' +
|
||||
'<option value=0>不自动使用</option>' +
|
||||
'<option value=1>好了就用,有多少次用多少次</option>' +
|
||||
'<option value=2>好了就用,仅使用一次</option>' +
|
||||
'<option value=3>自动判断使用时机</option>' +
|
||||
'</select>');
|
||||
};
|
||||
|
||||
const delete_icon = () => {
|
||||
return $('<button type="button" class="btn btn-default"><span class="ui-icon ui-icon-closethick"></span></button>')
|
||||
};
|
||||
|
||||
const action_type = () => {
|
||||
return $('<select id="type" class="form-control" style="width:auto">' +
|
||||
'<option value="二倍速">二倍速</option>' +
|
||||
'<option value="部署">部署</option>' +
|
||||
'<option value="技能">技能</option>' +
|
||||
'<option value="撤退">撤退</option>' +
|
||||
'<option value="子弹时间">子弹时间</option>' +
|
||||
'<option value="技能用法">技能用法</option>' +
|
||||
'</select>');
|
||||
};
|
||||
|
||||
const direction = () => {
|
||||
return $('<select id="direction" class="form-control" style="width:auto">' +
|
||||
'<option value=""></option>' +
|
||||
'<option value="上">上</option>' +
|
||||
'<option value="下">下</option>' +
|
||||
'<option value="左">左</option>' +
|
||||
'<option value="右">右</option>' +
|
||||
'</select>');
|
||||
}
|
||||
|
||||
const oper = (oper_data, delete_func) => {
|
||||
const tr = $('<tr>');
|
||||
// 干员名字
|
||||
const name_input = input_text()
|
||||
.val(oper_data.name ?? "")
|
||||
.change(function () { oper_data.name = $(this).val(); });
|
||||
tr.append($('<td>').append(name_input));
|
||||
// 技能
|
||||
const skill_input = input_text()
|
||||
.attr('type', 'number')
|
||||
.val(String(oper_data.skill ?? 0))
|
||||
.change(function () { oper_data.skill = Number($(this).val()); });
|
||||
tr.append($('<td>').append(skill_input));
|
||||
// 技能用法
|
||||
const skill_usage_input = skill_usage()
|
||||
.val(String(oper_data.skill_usage ?? 0))
|
||||
.change(function () { oper_data.skill_usage = Number($(this).val()); });
|
||||
tr.append($('<td>').append(skill_usage_input));
|
||||
// 删除
|
||||
tr.append($('<td>').append(delete_icon().click(delete_func)));
|
||||
return tr;
|
||||
}
|
||||
|
||||
const action = (action_data) => {
|
||||
const tr = $('<tr>');
|
||||
// 类别
|
||||
const type_input = action_type()
|
||||
.val(action_data.type ?? "")
|
||||
.change(function () { action_data.type = $(this).val(); });
|
||||
tr.append($('<td>').append(type_input));
|
||||
// 击杀数
|
||||
const kills_input = input_text()
|
||||
.attr('type', 'number')
|
||||
.val(String(action_data.kills ?? ""))
|
||||
.change(function () { action_data.kills = $(this).val !== "" ? Number($(this).val()) : undefined; });
|
||||
tr.append($('<td>').append(kills_input));
|
||||
// 费用变化
|
||||
const cost_changes = input_text()
|
||||
.attr('type', 'number')
|
||||
.val(String(action_data.cost_changes ?? ""))
|
||||
.change(function () { action_data.cost_changes = $(this).val !== "" ? Number($(this).val()) : undefined; });
|
||||
tr.append($('<td>').append(cost_changes));
|
||||
// 干员
|
||||
const name_input = input_text()
|
||||
.val(action_data.name ?? "")
|
||||
.change(function () { action_data.name = $(this).val(); });
|
||||
tr.append($('<td>').append(name_input));
|
||||
// x坐标
|
||||
const location_x_input = input_text()
|
||||
.attr('type', 'number')
|
||||
.val(String((action_data.location ?? [undefined, undefined])[0] ?? ""))
|
||||
.change(function () {
|
||||
action_data.location = action_data.location ?? [undefined, undefined];
|
||||
action_data.location[0] = $(this).val() !== "" ? Number($(this).val()) : undefined;
|
||||
});
|
||||
tr.append($('<td>').append(location_x_input));
|
||||
// y坐标
|
||||
const location_y_input = input_text()
|
||||
.attr('type', 'number')
|
||||
.val(String((action_data.location ?? [undefined, undefined])[1] ?? ""))
|
||||
.change(function () {
|
||||
action_data.location = action_data.location ?? [undefined, undefined];
|
||||
action_data.location[1] = $(this).val() !== "" ? Number($(this).val()) : undefined;
|
||||
});
|
||||
tr.append($('<td>').append(location_y_input));
|
||||
// 方向
|
||||
const direction_input = direction()
|
||||
.val(action_data.direction ?? "")
|
||||
.change(function () { action_data.direction = $(this).val(); });
|
||||
tr.append($('<td>').append(direction_input));
|
||||
// 前延迟
|
||||
const pre_delay_input = input_text()
|
||||
.attr('type', 'number')
|
||||
.val(String(action_data.pre_delay ?? ""))
|
||||
.change(function () { action_data.pre_delay = $(this).val() !== "" ? Number($(this).val()) : undefined; });
|
||||
tr.append($('<td>').append(pre_delay_input));
|
||||
// 后延迟
|
||||
const rear_delay_input = input_text()
|
||||
.attr('type', 'number')
|
||||
.val(String(action_data.rear_delay ?? ""))
|
||||
.change(function () { action_data.rear_delay = $(this).val() !== "" ? Number($(this).val()) : undefined; });
|
||||
tr.append($('<td>').append(rear_delay_input));
|
||||
// 文本
|
||||
const doc_input = input_text()
|
||||
.val(action_data.doc ?? "")
|
||||
.change(function () { action_data.doc = $(this).val(); });
|
||||
tr.append($('<td>').append(doc_input));
|
||||
// 颜色
|
||||
const doc_color_input = input_text()
|
||||
.val(action_data.doc_color ?? "")
|
||||
.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();
|
||||
})));
|
||||
return tr;
|
||||
};
|
||||
|
||||
const group = (group_data, delete_func) => {
|
||||
// 群组名
|
||||
const name_div_row = $('<div class="row">');
|
||||
const name_div_col = $('<div class="col-11">');
|
||||
const name_input = input_text()
|
||||
.val(group_data.name ?? "")
|
||||
.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(delete_func));
|
||||
name_div_row.append(name_div_col).append(delete_col);
|
||||
|
||||
// 群组干员列表
|
||||
const table = $('<table class="table table-bordered table-condensed table-striped">' +
|
||||
'<thead>' +
|
||||
'<tr>' +
|
||||
'<th>干员名字</th>' +
|
||||
'<th>技能</th>' +
|
||||
'<th>技能用法</th>' +
|
||||
'<th>删除</th>' +
|
||||
'</tr>' +
|
||||
'</thead>' +
|
||||
'<tbody></tbody>' +
|
||||
'</table>');
|
||||
(group_data.opers ?? []).forEach(oper_data => table.find('tbody').append(oper(oper_data, () => {
|
||||
group_data.opers = group_data.opers.filter(o => o !== oper_data);
|
||||
loadData();
|
||||
})));
|
||||
|
||||
return $('<div>')
|
||||
.append(name_div_row)
|
||||
.append(table);
|
||||
};
|
||||
|
||||
// 加载数据
|
||||
const loadData = () => {
|
||||
$('#stage_name').text(data.stage_name ?? "");
|
||||
$('#details').text(data.details ?? "");
|
||||
$('#title').text(data.title ?? "");
|
||||
// TODO: requirements
|
||||
|
||||
$('#opers tbody').html('');
|
||||
(data.opers ?? []).forEach(oper_data => $('#opers tbody').append(oper(oper_data, () => {
|
||||
data.opers = data.opers.filter(o => o !== oper_data);
|
||||
loadData();
|
||||
})));
|
||||
|
||||
$('#groups').html('');
|
||||
(data.groups ?? []).forEach(group_data => $('#groups').append(group(group_data, () => {
|
||||
data.groups = data.groups.filter(g => g !== group_data);
|
||||
loadData();
|
||||
})));
|
||||
|
||||
$('#actions tbody').html('');
|
||||
(data.actions ?? []).forEach(action_data => $('#actions tbody').append(action(action_data)));
|
||||
};
|
||||
|
||||
$(document).ready(() => {
|
||||
// 绑定事件
|
||||
$('#stage_name').change(() => data.stage_name = $('#stage_name').val());
|
||||
$('#details').change(() => data.details = $('#details').val());
|
||||
$('#title').change(() => data.title = $('#title').val());
|
||||
|
||||
$('#opers_new').click(() => {
|
||||
data.opers = data.opers ?? [];
|
||||
data.opers.push({});
|
||||
loadData();
|
||||
});
|
||||
|
||||
$('#actions_new').click(() => {
|
||||
data.actions = data.actions ?? [];
|
||||
data.actions.push({});
|
||||
loadData();
|
||||
});
|
||||
|
||||
$('#groups_new').click(() => {
|
||||
data.groups = data.groups ?? [];
|
||||
data.groups.push({});
|
||||
loadData();
|
||||
})
|
||||
|
||||
$('#download_json').click(() => {
|
||||
const result = JSON.stringify(data, null, 4);
|
||||
const file = new Blob([result], { type: 'application/json' });
|
||||
const fileName = data.stage_name + '_' + data.opers.map(o => o.name).join('+') + '.json';
|
||||
const url = window.URL.createObjectURL(file);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', fileName);
|
||||
link.click();
|
||||
});
|
||||
|
||||
$('#upload_json').click(() => $('#json_file').click());
|
||||
|
||||
$('#json_file').change(function (e) {
|
||||
const files = e.target.files;
|
||||
const f = files[0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = (() => (e) => {
|
||||
Object.assign(data, JSON.parse(e.target.result));
|
||||
loadData();
|
||||
})(f);
|
||||
reader.readAsText(f);
|
||||
});
|
||||
|
||||
loadData();
|
||||
});
|
||||
@@ -9,602 +9,77 @@
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
||||
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
|
||||
<style>
|
||||
.actiontitle {
|
||||
font-size: 2rem;
|
||||
line-height: .75em;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-weight: lighter;
|
||||
font-size: 0.5em;
|
||||
color: gray;
|
||||
}
|
||||
</style>
|
||||
<script src="index.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="row" style="margin: 50 50;">
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<div class="form-group">
|
||||
<h2 for="stagename">
|
||||
关卡中文名
|
||||
</h2>
|
||||
<input type="text" class="form-control" id="stagename" />
|
||||
<span class="tips">小贴士:填完关卡名后开一局,会在目录下生成 map.png 地图坐标图片</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="form-group">
|
||||
<h2 for="description">
|
||||
文本
|
||||
</h2>
|
||||
<textarea type="text" class="form-control" id="description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="form-group">
|
||||
<h2 for="title">
|
||||
标题
|
||||
</h2>
|
||||
<textarea type="text" class="form-control" id="title"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button type="button" id="toJson" class="btn btn-primary" onclick="toJSON()">下载JSON</button>
|
||||
<input type="file" id="selectedFile" style="display: none;" name="files[]" size=1 />
|
||||
<button class="btn btn-primary" onclick="document.getElementById('selectedFile').click();">载入JSON</button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<button id="download_json" class="btn btn-primary">下载JSON</button>
|
||||
<input type="file" id="json_file" style="display: none;" name="files[]" size=1 />
|
||||
<button id="upload_json" class="btn btn-primary">载入JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2>选择干员</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<table id="operatorTable" class="table table-bordered table-condensed table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>修改</th>
|
||||
<th>干员名字</th>
|
||||
<th>技能</th>
|
||||
<th>技能用法</th>
|
||||
<th>删除</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-body">
|
||||
<div class="form-group">
|
||||
<label for="operatorname">
|
||||
干员名字
|
||||
</label>
|
||||
<input type="text" class="form-control" id="operatorname" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="skill">
|
||||
技能
|
||||
</label>
|
||||
<input type="number" class="form-control" id="skill" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="skill_usage">
|
||||
技能用法
|
||||
</label>
|
||||
<select id="skill_usage" class="form-control">
|
||||
<option value=0>不自动使用</option>
|
||||
<option value=1>好了就用,有多少次用多少次</option>
|
||||
<option value=2>好了就用,仅使用一次</option>
|
||||
<!-- <option value=3>自动判断使用时机</option> -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<button type="button" id="updateOperatorButton" class="btn btn-primary" onclick="update('operator');">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<p class="actiontitle">战斗流程 <span class="tips">小贴士:可以拖拽更改顺序</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-11">
|
||||
<table id="actionTable" class="table table-bordered table-condensed table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>修改</th>
|
||||
<th>类别</th>
|
||||
<th>Kills</th>
|
||||
<th>费用变化</th>
|
||||
<th>干员名字</th>
|
||||
<th>x坐标</th>
|
||||
<th>y坐标</th>
|
||||
<th>方向</th>
|
||||
<th>前延迟</th>
|
||||
<th>后延迟</th>
|
||||
<th>文本</th>
|
||||
<th>颜色</th>
|
||||
<th>删除</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-11">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-2">
|
||||
<label for="type">
|
||||
类别
|
||||
</label>
|
||||
<select id="type" class="form-control">
|
||||
<option value="二倍速">二倍速</option>
|
||||
<option value="部署">部署</option>
|
||||
<option value="技能">技能</option>
|
||||
<option value="撤退">撤退</option>
|
||||
<option value="子弹时间">子弹时间</option>
|
||||
<option value="技能用法">技能用法</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-sm-2">
|
||||
<label for="kill">
|
||||
击杀数
|
||||
</label>
|
||||
<input type="number" class="form-control" id="kill" />
|
||||
</div>
|
||||
<div class="form-group col-sm-2">
|
||||
<label for="cost_changes">
|
||||
费用变化
|
||||
</label>
|
||||
<input type="number" class="form-control" id="cost_changes" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-3">
|
||||
<label for="operator">
|
||||
干员名字
|
||||
</label>
|
||||
<input type="text" id="operator" class="form-control">
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-sm-2">
|
||||
<label for="xcoordinate">
|
||||
x坐标
|
||||
</label>
|
||||
<input type="number" class="form-control" id="xcoordinate" />
|
||||
</div>
|
||||
<div class="form-group col-sm-2">
|
||||
<label for="ycoordinate">
|
||||
y坐标
|
||||
</label>
|
||||
<input type="number" class="form-control" id="ycoordinate" />
|
||||
</div>
|
||||
|
||||
<div class="form-group col-sm-2">
|
||||
<label for="direction">
|
||||
方向
|
||||
</label>
|
||||
<select id="direction" class="form-control">
|
||||
<option value=""></option>
|
||||
<option value="上">上</option>
|
||||
<option value="下">下</option>
|
||||
<option value="左">左</option>
|
||||
<option value="右">右</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-2">
|
||||
<label for="pre_delay">
|
||||
前延迟(毫秒)
|
||||
</label>
|
||||
<input type="number" class="form-control" id="pre_delay" />
|
||||
</div>
|
||||
<div class="form-group col-sm-2">
|
||||
<label for="rear_delay">
|
||||
后延迟(毫秒)
|
||||
</label>
|
||||
<input type="number" class="form-control" id="rear_delay" />
|
||||
</div>
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="doc">
|
||||
文本
|
||||
</label>
|
||||
<input type="text" class="form-control" id="doc" />
|
||||
</div>
|
||||
<div class="form-group col-sm-2">
|
||||
<label for="doc_color">
|
||||
文本颜色
|
||||
</label>
|
||||
<input type="text" class="form-control" id="doc_color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<button type="button" id="updateActionButton" class="btn btn-primary" onclick="update('action');">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--JSON-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1>关卡中文名</h1>
|
||||
<span class="tips">小贴士:填完关卡名后开一局,会在目录下生成 map.png 地图坐标图片</span>
|
||||
<input type="text" id="stage_name" class="form-control" placeholder="关卡中文名">
|
||||
</div><!--关卡中文名-->
|
||||
<div class="col-12">
|
||||
<h2>文本</h2>
|
||||
<textarea type="text" class="form-control" id="details" placeholder="文本"></textarea>
|
||||
</div><!--文本-->
|
||||
<div class="col-12">
|
||||
<h2>标题</h2>
|
||||
<input type="text" id="title" class="form-control" placeholder="标题">
|
||||
</div><!--标题-->
|
||||
<div class="col-12">
|
||||
<h2>群组</h2>
|
||||
<div id="groups"></div>
|
||||
<button id="groups_new" class="btn btn-primary">添加群组</button>
|
||||
</div><!--群组-->
|
||||
<div class="col-12">
|
||||
<h2>干员</h2>
|
||||
<table id="opers" class="table table-bordered table-condensed table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>干员名字</th>
|
||||
<th>技能</th>
|
||||
<th>技能用法</th>
|
||||
<th>删除</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<button id="opers_new" class="btn btn-primary">新增</button>
|
||||
</div><!--干员-->
|
||||
<div class="col-12">
|
||||
<h2>战斗流程</h2>
|
||||
<table id="actions" class="table table-bordered table-condensed table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>类别</th>
|
||||
<th>击杀数</th>
|
||||
<th>费用变化</th>
|
||||
<th>干员名字</th>
|
||||
<th>x坐标</th>
|
||||
<th>y坐标</th>
|
||||
<th>方向</th>
|
||||
<th>前延迟</th>
|
||||
<th>后延迟</th>
|
||||
<th>文本</th>
|
||||
<th>文本颜色</th>
|
||||
<th>删除</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<button id="actions_new" class="btn btn-primary">新增</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var operatorList = [];
|
||||
var editRow = null;
|
||||
var editRowName = null;
|
||||
function load() {
|
||||
return charName.map(x => ({ "label": x, value: x }));
|
||||
}
|
||||
|
||||
$(function () {
|
||||
var availableTags = load();
|
||||
$("#operatorname").autocomplete({
|
||||
source: availableTags
|
||||
});
|
||||
});
|
||||
|
||||
function display(ctl, type) {
|
||||
editRow = $(ctl).parents("tr");
|
||||
var cols = editRow.children("td");
|
||||
if (type === 'operator') {
|
||||
$("#operatorname").val($(cols[1]).text());
|
||||
$("#skill").val($(cols[2]).text());
|
||||
$("#skill_usage").val($(cols[3]).text());
|
||||
$("#updateOperatorButton").text("Update");
|
||||
editRowName = $(ctl).context.name.substring(4)
|
||||
document.getElementById("operatorname").scrollIntoView();
|
||||
}
|
||||
else if (type === 'action') {
|
||||
$("#type").val($(cols[1]).text())
|
||||
$("#kill").val($(cols[2]).text())
|
||||
$("#cost_changes").val($(cols[3]).text())
|
||||
$("#operator").val($(cols[4]).text())
|
||||
$("#xcoordinate").val($(cols[5]).text())
|
||||
$("#ycoordinate").val($(cols[6]).text())
|
||||
$("#direction").val($(cols[7]).text())
|
||||
$("#pre_delay").val($(cols[8]).text())
|
||||
$("#rear_delay").val($(cols[9]).text())
|
||||
$("#doc").val($(cols[10]).text())
|
||||
$("#doc_color").val($(cols[11]).text())
|
||||
$("#updateActionButton").text("Update");
|
||||
document.getElementById("type").scrollIntoView();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function update(type) {
|
||||
if (type === 'operator') {
|
||||
if ($("#updateOperatorButton").text() == "Update") {
|
||||
updateInTable(type);
|
||||
}
|
||||
else {
|
||||
addToTable(type);
|
||||
}
|
||||
$("#operatorname").focus();
|
||||
}
|
||||
else if (type === 'action') {
|
||||
if ($("#updateActionButton").text() == "Update") {
|
||||
updateInTable(type);
|
||||
}
|
||||
else {
|
||||
addToTable(type);
|
||||
}
|
||||
$("#type").focus();
|
||||
}
|
||||
formClear(type);
|
||||
}
|
||||
function addToTable(type, data = null) {
|
||||
if (type === 'operator') {
|
||||
if ($("#operatorTable tbody").length == 0) {
|
||||
$("#operatorTable").append("<tbody></tbody>");
|
||||
}
|
||||
var result = buildTableRow(type, data);
|
||||
if (result && result.html) $("#operatorTable tbody").append(result.html);
|
||||
if (result && result.operatorName) updateOperatorList("add", result.operatorName);
|
||||
}
|
||||
else if (type === 'action') {
|
||||
if ($("#actionTable tbody").length == 0) $("#actionTable").append("<tbody></tbody>");
|
||||
let indexVal = parseInt($("#insertindex").val())
|
||||
if (indexVal >= 0 && indexVal <= $("#actionTable tbody tr").length) {
|
||||
var newRow = $(buildTableRow(type, data));
|
||||
newRow.insertBefore($('#actionTable tbody tr:nth(' + indexVal + ')'));
|
||||
}
|
||||
else $("#actionTable tbody").append(buildTableRow(type, data))
|
||||
}
|
||||
}
|
||||
|
||||
// Update operator in <table>
|
||||
function updateInTable(type) {
|
||||
var result = buildTableRow(type);
|
||||
if (result.operatorName) {
|
||||
updateOperatorList("update", editRowName, result.operatorName)
|
||||
$(editRow).after(result.html);
|
||||
}
|
||||
else {
|
||||
$(editRow).after(result);
|
||||
}
|
||||
$(editRow).remove();
|
||||
formClear(type);
|
||||
if (type == "operator") $("#updateOperatorButton").text("Add");
|
||||
else if (type == "action") $("#updateActionButton").text("Add");
|
||||
}
|
||||
|
||||
function buildTableRow(type, data = null) {
|
||||
let datastring = '';
|
||||
if (type === 'operator') {
|
||||
if (($("#operatorname").val() && $("#skill").val()) || data) {
|
||||
let obj = { name: "", skill: "", skill_usage: "" };
|
||||
if (data == null) {
|
||||
obj.name = $("#operatorname").val();
|
||||
obj.skill = $("#skill").val();
|
||||
obj.skill_usage = $("#skill_usage").val();
|
||||
}
|
||||
else {
|
||||
obj.name = data.name;
|
||||
obj.skill = data.skill;
|
||||
obj.skill_usage = (data.skill_usage ? data.skill_usage : 0);
|
||||
}
|
||||
datastring = "<td>" + obj.name + "</td>" +
|
||||
"<td>" + obj.skill + "</td>" +
|
||||
"<td>" + (obj.skill_usage ? obj.skill_usage : 0) + "</td>";
|
||||
var ret =
|
||||
"<tr draggable='true' ondragstart='start()' ondragover='dragover()'>" +
|
||||
"<td>" +
|
||||
"<button type='button' name =\"edit" + (data && data.name ? data.name : $("#operatorname").val()) + "\"" +
|
||||
"onclick='display(this,\"operator\");' " +
|
||||
"class='btn btn-default'>" +
|
||||
"<span class='ui-icon ui-icon-pencil' />" +
|
||||
"</button>" +
|
||||
"</td>" + datastring +
|
||||
"<td>" +
|
||||
"<button type='button' name =\"" + (data && data.name ? data.name : $("#operatorname").val()) + "\"" +
|
||||
"onclick='itemDelete(this);' " +
|
||||
"class='btn btn-default'>" +
|
||||
"<span class='ui-icon ui-icon-closethick' />" +
|
||||
"</button>" +
|
||||
"</td>" +
|
||||
"</tr>"
|
||||
return { html: ret, operatorName: $("#operatorname").val() };
|
||||
}
|
||||
else return;
|
||||
}
|
||||
else if (type === 'action') {
|
||||
if (data) {
|
||||
datastring = "<td>" + (data.type ? data.type : "") + "</td>" +
|
||||
"<td>" + (data.kills ? data.kills : "") + "</td>" +
|
||||
"<td>" + (data.cost_changes ? data.cost_changes : "") + "</td>" +
|
||||
"<td>" + (data.name ? data.name : "") + "</td>" +
|
||||
"<td>" + (data.location ? data.location[0] : "") + "</td>" +
|
||||
"<td>" + (data.location ? data.location[1] : "") + "</td>" +
|
||||
"<td>" + (data.direction ? data.direction : "") + "</td>" +
|
||||
"<td>" + (data.pre_delay ? data.pre_delay : "") + "</td>" +
|
||||
"<td>" + (data.rear_delay ? data.rear_delay : "") + "</td>" +
|
||||
"<td>" + (data.doc ? data.doc : "") + "</td>" +
|
||||
"<td>" + (data.doc_color ? data.doc_color : "") + "</td>";
|
||||
}
|
||||
else {
|
||||
datastring = "<td>" + $("#type").val() + "</td>" +
|
||||
"<td>" + $("#kill").val() + "</td>" +
|
||||
"<td>" + $("#cost_changes").val() + "</td>" +
|
||||
"<td>" + $("#operator").val() + "</td>" +
|
||||
"<td>" + $("#xcoordinate").val() + "</td>" +
|
||||
"<td>" + $("#ycoordinate").val() + "</td>" +
|
||||
"<td>" + $("#direction").val() + "</td>" +
|
||||
"<td>" + $("#pre_delay").val() + "</td>" +
|
||||
"<td>" + $("#rear_delay").val() + "</td>" +
|
||||
"<td>" + $("#doc").val() + "</td>" +
|
||||
"<td>" + $("#doc_color").val() + "</td>";
|
||||
}
|
||||
var ret =
|
||||
"<tr draggable='true' ondragstart='start()' ondragover='dragover()'>" +
|
||||
"<td>" +
|
||||
"<button type='button' " +
|
||||
"onclick='display(this,\"action\");' " +
|
||||
"class='btn btn-default'>" +
|
||||
"<span class='ui-icon ui-icon-pencil' />" +
|
||||
"</button>" +
|
||||
"</td>" + datastring +
|
||||
"<td>" +
|
||||
"<button type='button' " +
|
||||
"onclick='itemDelete(this);' " +
|
||||
"class='btn btn-default'>" +
|
||||
"<span class='ui-icon ui-icon-closethick' />" +
|
||||
"</button>" +
|
||||
"</td>" +
|
||||
"</tr>"
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
function itemDelete(ctl) {
|
||||
updateOperatorList("delete", $(ctl).context.name)
|
||||
$(ctl).parents("tr").remove();
|
||||
}
|
||||
function updateOperatorList(action, oldname, newName = "") {
|
||||
var selectobject = document.getElementById("operator");
|
||||
if (action == 'clean') {
|
||||
operatorList = [];
|
||||
operatorList.push({ label: "", value: "" })
|
||||
}
|
||||
else if (action == "add" && operatorList.findIndex(o => o.value == oldname) == -1) {
|
||||
operatorList.push({ value: oldname, label: oldname });
|
||||
}
|
||||
else {
|
||||
var index = operatorList.findIndex(x => x.value == oldname);
|
||||
if (index > -1) {
|
||||
operatorList.slice(index);
|
||||
if (action == "update") {
|
||||
operatorList[index].label = operatorList[index].value = newName;
|
||||
// 把现有table干员名字替换
|
||||
var actionTable = $("#actionTable tbody");
|
||||
actionTable.find('tr').each(function (i, el) {
|
||||
var actionData = prepareActionData($(this))
|
||||
if (actionData.name == oldname) {
|
||||
actionData.name = newName;
|
||||
$(this).replaceWith(buildTableRow("action", actionData))
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
operatorList.slice(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
$("#operator").autocomplete({
|
||||
source: operatorList
|
||||
});
|
||||
}
|
||||
function formClear(type) {
|
||||
if (type == "operator") {
|
||||
$("#operatorname").val("");
|
||||
$("#skill").val("");
|
||||
}
|
||||
else if (type == "action") {
|
||||
$("#type").val("");
|
||||
$("#kill").val("");
|
||||
$("#cost_changes").val("");
|
||||
$("#operator").val("");
|
||||
$("#xcoordinate").val("");
|
||||
$("#ycoordinate").val("");
|
||||
$("#direction").val("");
|
||||
$("#pre_delay").val("");
|
||||
$("#rear_delay").val("");
|
||||
$("#doc").val("");
|
||||
$("#doc_color").val("");
|
||||
}
|
||||
}
|
||||
function prepareActionData(tr) {
|
||||
var $tds = tr.find('td'),
|
||||
type = $tds.eq(1).text(),
|
||||
kills = $tds.eq(2).text(),
|
||||
cost_changes = $tds.eq(3).text(),
|
||||
name = $tds.eq(4).text(),
|
||||
xcoordinate = $tds.eq(5).text(),
|
||||
ycoordinate = $tds.eq(6).text(),
|
||||
direction = $tds.eq(7).text(),
|
||||
pre_delay = $tds.eq(8).text(),
|
||||
rear_delay = $tds.eq(9).text(),
|
||||
doc = $tds.eq(10).text(),
|
||||
doc_color = $tds.eq(11).text();
|
||||
kills = parseInt(kills)
|
||||
cost_changes = parseInt(cost_changes)
|
||||
pre_delay = parseInt(pre_delay)
|
||||
rear_delay = parseInt(rear_delay)
|
||||
xcoordinate = parseInt(xcoordinate)
|
||||
ycoordinate = parseInt(ycoordinate)
|
||||
let location = [xcoordinate, ycoordinate]
|
||||
var actionData = { type, kills, cost_changes, name, location, direction, pre_delay, rear_delay, doc, doc_color };
|
||||
if (isNaN(actionData.kills)) delete actionData.kills;
|
||||
if (isNaN(actionData.pre_delay)) delete actionData.pre_delay;
|
||||
if (isNaN(actionData.rear_delay)) delete actionData.rear_delay;
|
||||
if (actionData.direction === "") delete actionData.direction;
|
||||
if (isNaN(actionData.location[0]) || isNaN(actionData.location[1])) delete actionData.location;
|
||||
return actionData;
|
||||
}
|
||||
function toJSON() {
|
||||
var operatorTable = $("#operatorTable tbody");
|
||||
var actionTable = $("#actionTable tbody");
|
||||
var opers = [];
|
||||
var actions = [];
|
||||
operatorTable.find('tr').each(function (i, el) {
|
||||
var $tds = $(this).find('td'),
|
||||
name = $tds.eq(1).text(),
|
||||
skill = $tds.eq(2).text(),
|
||||
skill_usage = $tds.eq(3).text();
|
||||
if (name && skill && skill_usage) {
|
||||
skill_usage = parseInt(skill_usage)
|
||||
skill = parseInt(skill)
|
||||
opers.push({ name, skill, skill_usage });
|
||||
}
|
||||
});
|
||||
actionTable.find('tr').each(function (i, el) {
|
||||
var actionData = prepareActionData($(this));
|
||||
actions.push(actionData);
|
||||
});
|
||||
var stage_name = document.getElementById("stagename").value;
|
||||
var title = document.getElementById("title").value;
|
||||
var details = document.getElementById("description").value;
|
||||
var doc = { title, details };
|
||||
var obj = { "minimum_required": "v4.0", doc, stage_name, opers, actions };
|
||||
var jsonString = JSON.stringify(obj);
|
||||
var jsonPretty = JSON.stringify(JSON.parse(jsonString), null, 4);
|
||||
var file = new Blob([jsonPretty], { type: 'text/plain' });
|
||||
var fileName = obj.stage_name + '_' + opers.map(o => o.name).join('+') + '.json';
|
||||
const url = window.URL.createObjectURL(file);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', fileName);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
}
|
||||
function handleFileSelect(evt) {
|
||||
let files = evt.target.files;
|
||||
let f = files[0];
|
||||
let reader = new FileReader();
|
||||
reader.onload = (function (theFile) {
|
||||
return function (e) {
|
||||
let data = JSON.parse(e.target.result);
|
||||
if (!data) alert("读取文件错误")
|
||||
else {
|
||||
document.getElementById("stagename").value = data.stage_name ? data.stage_name : "";
|
||||
document.getElementById("title").value = data.doc.title ? data.doc.title : "";
|
||||
document.getElementById("description").value = data.doc.details ? data.doc.details : "";
|
||||
$("#operatorTable tbody tr").remove();
|
||||
updateOperatorList("clean", "")
|
||||
if (data.opers) data.opers.forEach(x => { addToTable("operator", x); updateOperatorList("add", x.name); });
|
||||
$("#insertindex").val(-1)
|
||||
$("#actionTable tbody tr").remove();
|
||||
if (data.actions) data.actions.forEach(x => { addToTable("action", x) });
|
||||
}
|
||||
};
|
||||
})(f);
|
||||
reader.readAsText(f);
|
||||
}
|
||||
var row;
|
||||
|
||||
function start() {
|
||||
row = event.target;
|
||||
}
|
||||
function dragover() {
|
||||
var e = event;
|
||||
e.preventDefault();
|
||||
|
||||
let children = Array.from(e.target.parentNode.parentNode.children);
|
||||
|
||||
if (children.indexOf(e.target.parentNode) > children.indexOf(row))
|
||||
e.target.parentNode.after(row);
|
||||
else
|
||||
e.target.parentNode.before(row);
|
||||
}
|
||||
document.getElementById('selectedFile').addEventListener('change', handleFileSelect, false);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user