tamakyi
5aeded2d51
上一版改成 select 之后有两个问题：活动和类别都只能从列表里挑，填不进去的写不了； 而且建议被强制预选，用户选「不动」再点「用高德分析」（会整页重载）就白选了， 看起来像被锁死。 现在：活动是可输入的输入框，带已有类型提示，填新名字会新建类型； 类别下拉末尾加「其它（自己写）…」，选中后露出文本框，写什么存什么—— 真机自己也存中文类别，写中文一样认得，不必强记 MKPOICategory 那串枚举名。 「不动」改成真正的默认：什么都不预选，想批量采纳就点「采纳本页建议」。 点「用高德分析」前会把本页填过的存进 sessionStorage，回来接着填，不会白改。
176 lines
7.7 KiB
HTML
176 lines
7.7 KiB
HTML
{{define "content"}}
|
||
<div class="wrap">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>地点补全</h1>
|
||
<div class="sub">
|
||
共 <strong>{{num .Total}}</strong> 个地点缺活动或类别，其中 <strong>{{num .WithHint}}</strong> 个能给出建议。
|
||
<strong>只填空</strong>——已经有活动或类别的一律不动。
|
||
</div>
|
||
</div>
|
||
<div class="row"><a class="btn" href="/admin">← 返回后台</a></div>
|
||
</div>
|
||
|
||
{{if .Flash}}<div class="alert ok">{{.Flash}}</div>{{end}}
|
||
{{if .Err}}<div class="alert err">{{.Err}}</div>{{end}}
|
||
|
||
{{if .Rows}}
|
||
<div class="card">
|
||
<h2>待补全（{{num .Total}}）{{if gt .PageCount 1}}<span class="muted" style="font-size:13px;font-weight:400"> 第 {{.PageNo}} / {{.PageCount}} 页</span>{{end}}</h2>
|
||
<div class="card-sub">
|
||
<strong>默认都是「不动」</strong>，你改过的才会写进去。
|
||
活动可以直接打字（会提示已有的类型），也可以点「采纳本页建议」一键填上；
|
||
类别从下拉里挑，都不合适就选「其它」自己写一个（真机也存中文类别，写中文同样认得）。<br>
|
||
活动按<strong>地点</strong>补：一次把它名下所有没设活动的到访一起填上，不会只改一条。
|
||
右侧「高德参考」是高德在这个坐标上找到的 POI 与类型，拿不准时作参考。
|
||
</div>
|
||
|
||
{{if gt .PageCount 1}}
|
||
<div class="pager">
|
||
{{if gt .PageNo 1}}<a href="{{.PageLink (sub .PageNo 1)}}">上一页</a>{{end}}
|
||
<span class="cur">第 {{.PageNo}} / {{.PageCount}} 页</span>
|
||
{{if lt .PageNo .PageCount}}<a href="{{.PageLink (add .PageNo 1)}}">下一页</a>{{end}}
|
||
</div>
|
||
{{end}}
|
||
|
||
<form method="post" action="/admin/fillup/apply" id="fillup-form">
|
||
<input type="hidden" name="page" value="{{.PageNo}}">
|
||
<div class="tw">
|
||
<table class="tb tb-stack">
|
||
<thead>
|
||
<tr>
|
||
<th>地点</th><th>城市</th><th class="num">待设到访</th><th>缺什么</th>
|
||
<th>活动</th><th>类别</th><th>建议来源</th><th>高德参考</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{{range $row := .Rows}}
|
||
<tr>
|
||
<td>{{if $row.Name}}{{$row.Name}}{{else}}<span class="muted">（未命名）</span>{{end}}</td>
|
||
<td data-label="城市">{{if $row.City}}{{$row.City}}{{else}}<span class="muted">—</span>{{end}}</td>
|
||
<td class="num" data-label="待设到访">{{if $row.NoAct}}{{$row.NoAct}}{{else}}<span class="muted">—</span>{{end}}</td>
|
||
<td data-label="缺什么">{{$row.Missing}}</td>
|
||
<td data-label="活动">
|
||
{{if $row.NoAct}}
|
||
<input list="fill-act" name="act_{{$row.PlaceID}}" value=""
|
||
placeholder="（不动）" data-hint="{{$row.ActHint}}" style="min-width:8em">
|
||
{{else}}<span class="muted">—</span>{{end}}
|
||
</td>
|
||
<td data-label="类别">
|
||
{{if $row.NoCat}}
|
||
{{$hint := $row.CatHint}}
|
||
<select name="cat_{{$row.PlaceID}}" class="cat-sel" data-hint="{{$hint}}">
|
||
<option value="">（不动）</option>
|
||
{{if $hint}}<option value="{{$hint}}">建议：{{catName $hint}}</option>{{end}}
|
||
{{range $.Categories}}{{if ne .Value $hint}}<option value="{{.Value}}">{{.Label}}</option>{{end}}{{end}}
|
||
<option value="__custom__">其它（自己写）…</option>
|
||
</select>
|
||
<input type="text" name="cat_{{$row.PlaceID}}__custom" placeholder="例如 美食街"
|
||
style="display:none;margin-top:4px;min-width:10em">
|
||
{{else}}<span class="muted">—</span>{{end}}
|
||
</td>
|
||
<td data-label="建议来源">{{if $row.Source}}{{$row.Source}}{{else}}<span class="muted">—</span>{{end}}</td>
|
||
<td data-label="高德参考">
|
||
{{if $row.AmapType}}
|
||
<span style="font-size:12.5px">{{if $row.AmapPoi}}{{$row.AmapPoi}}<br>{{end}}<span class="muted">{{$row.AmapType}}</span></span>
|
||
{{else}}<span class="muted">—</span>{{end}}
|
||
</td>
|
||
</tr>
|
||
{{end}}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="row" style="margin-top:12px">
|
||
<button class="btn primary" type="submit">执行补全</button>
|
||
<button class="btn" type="button" id="pick-hints">采纳本页建议</button>
|
||
<button class="btn" type="submit" formaction="/admin/fillup/amap" id="amap-btn"
|
||
title="用高德按坐标搜一遍，给还没建议的地点补上参考（每批 40 个）">用高德分析剩下的</button>
|
||
</div>
|
||
</form>
|
||
|
||
{{if gt .PageCount 1}}
|
||
<div class="pager" style="margin-top:12px">
|
||
{{if gt .PageNo 1}}<a href="{{.PageLink (sub .PageNo 1)}}">上一页</a>{{end}}
|
||
<span class="cur">第 {{.PageNo}} / {{.PageCount}} 页</span>
|
||
{{if lt .PageNo .PageCount}}<a href="{{.PageLink (add .PageNo 1)}}">下一页</a>{{end}}
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{else}}
|
||
<div class="card">
|
||
<div class="alert ok">所有地点的活动和类别都齐了，没什么要补的。</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
|
||
<datalist id="fill-act">
|
||
{{range .Activities}}<option value="{{.Name}}"></option>{{end}}
|
||
</datalist>
|
||
|
||
<script>
|
||
(function () {
|
||
var KEY = 'rond-fillup-draft';
|
||
|
||
// 选了「其它（自己写）」就露出旁边的文本框
|
||
document.querySelectorAll('select.cat-sel').forEach(function (sel) {
|
||
var box = document.querySelector('input[name="' + sel.name + '__custom"]');
|
||
if (!box) return;
|
||
var sync = function () {
|
||
var custom = sel.value === '__custom__';
|
||
box.style.display = custom ? '' : 'none';
|
||
if (custom) box.focus();
|
||
};
|
||
sel.addEventListener('change', sync);
|
||
sync();
|
||
});
|
||
|
||
// 采纳本页建议：活动按 data-hint 填进输入框，类别把建议项选上
|
||
var pick = document.getElementById('pick-hints');
|
||
if (pick) {
|
||
pick.addEventListener('click', function () {
|
||
var n = 0;
|
||
document.querySelectorAll('input[name^="act_"]').forEach(function (inp) {
|
||
if (inp.value || !inp.dataset.hint) return;
|
||
inp.value = inp.dataset.hint;
|
||
n++;
|
||
});
|
||
document.querySelectorAll('select.cat-sel').forEach(function (sel) {
|
||
if (sel.value || !sel.dataset.hint) return;
|
||
sel.value = sel.dataset.hint;
|
||
n++;
|
||
});
|
||
pick.textContent = n ? '已填入 ' + n + ' 条建议' : '本页没有可填的建议';
|
||
});
|
||
}
|
||
|
||
// 「用高德分析」会整页重载，先把这一页填过的存起来、回来再恢复——
|
||
// 否则挑了半天，点一下就全没了。
|
||
var save = function () {
|
||
var draft = {};
|
||
document.querySelectorAll('input[name^="act_"], input[name$="__custom"], select.cat-sel').forEach(function (el) {
|
||
if (el.value) draft[el.name] = el.value;
|
||
});
|
||
try { sessionStorage.setItem(KEY, JSON.stringify(draft)); } catch (e) { /* 隐私模式就算了 */ }
|
||
};
|
||
var amap = document.getElementById('amap-btn');
|
||
if (amap) amap.addEventListener('click', save);
|
||
|
||
try {
|
||
var draft = JSON.parse(sessionStorage.getItem(KEY) || '{}');
|
||
Object.keys(draft).forEach(function (name) {
|
||
var el = document.querySelector('[name="' + name + '"]');
|
||
if (!el) return;
|
||
el.value = draft[name];
|
||
if (el.tagName === 'SELECT') el.dispatchEvent(new Event('change'));
|
||
});
|
||
} catch (e) { /* 坏数据就当没有 */ }
|
||
|
||
// 提交成功后草稿就没用了，清掉，免得下次进来还带着旧选择
|
||
var form = document.getElementById('fillup-form');
|
||
if (form) form.addEventListener('submit', function () {
|
||
try { sessionStorage.removeItem(KEY); } catch (e) {}
|
||
});
|
||
})();
|
||
</script>
|
||
{{end}}
|