Oasis 0.8.7 mobile (nodejs-project baseline)
This commit is contained in:
s1to
commit
e563b86ede
226 changed files with 141968 additions and 0 deletions
249
src/views/logs_view.js
Normal file
249
src/views/logs_view.js
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
const { div, h2, p, section, button, form, span, table, thead, tbody, tr, th, td, input, textarea, br, option, select } = require("../server/node_modules/hyperaxe");
|
||||
const { template, i18n } = require("./main_views");
|
||||
const moment = require("../server/node_modules/moment");
|
||||
const { renderUrl } = require("../backend/renderUrl");
|
||||
|
||||
const safeArr = v => Array.isArray(v) ? v : [];
|
||||
|
||||
const FILTERS = ["today", "week", "month", "year", "always"];
|
||||
|
||||
const filterLabel = (f) => {
|
||||
const map = {
|
||||
today: i18n.logsFilterToday || 'TODAY',
|
||||
week: i18n.logsFilterWeek || 'LAST WEEK',
|
||||
month: i18n.logsFilterMonth || 'LAST MONTH',
|
||||
year: i18n.logsFilterYear || 'LAST YEAR',
|
||||
always: i18n.logsFilterAlways || 'ALWAYS'
|
||||
};
|
||||
return map[f] || f.toUpperCase();
|
||||
};
|
||||
|
||||
const renderFilterBar = (current, hasItems = false) =>
|
||||
div({ class: "logs-toolbar" },
|
||||
form({ method: "GET", action: "/logs", class: "logs-toolbar-inline" },
|
||||
FILTERS.map(f =>
|
||||
button({
|
||||
type: "submit", name: "filter", value: f,
|
||||
class: current === f ? "filter-btn active" : "filter-btn"
|
||||
}, filterLabel(f))
|
||||
)
|
||||
),
|
||||
form({ method: "GET", action: "/logs", class: "logs-toolbar-inline" },
|
||||
input({ type: "hidden", name: "view", value: "create" }),
|
||||
button({ type: "submit", class: "create-button" }, i18n.logsCreate || 'Create Log')
|
||||
),
|
||||
hasItems
|
||||
? form({ method: "GET", action: "/logs/export", class: "logs-toolbar-inline" },
|
||||
button({ type: "submit", class: "create-button" }, i18n.logsExport || 'Export Logs')
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const renderSearchBox = (current, search) => {
|
||||
const q = search || {};
|
||||
return div({ class: "logs-search" },
|
||||
form({ method: "GET", action: "/logs", class: "filter-box" },
|
||||
input({ type: "hidden", name: "filter", value: current || 'today' }),
|
||||
input({
|
||||
type: "text", name: "q", class: "filter-box__input",
|
||||
placeholder: i18n.logsSearchText || 'Search in logs...',
|
||||
value: q.q || ''
|
||||
}),
|
||||
div({ class: "filter-box__controls" },
|
||||
input({
|
||||
type: "date", name: "date", class: "filter-box__select",
|
||||
value: q.date || ''
|
||||
}),
|
||||
select({ name: "type", class: "filter-box__select" },
|
||||
option({ value: '', ...(q.type ? {} : { selected: true }) }, i18n.logsSearchAnyType || 'Any type'),
|
||||
option({ value: 'manual', ...(q.type === 'manual' ? { selected: true } : {}) }, i18n.logsModeManual || 'Manual'),
|
||||
option({ value: 'ai', ...(q.type === 'ai' ? { selected: true } : {}) }, i18n.logsModeAI || 'AI')
|
||||
),
|
||||
button({ type: "submit", class: "filter-box__button" }, i18n.logsSearchButton || 'Search')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const renderToolbar = (current, search, hasItems) =>
|
||||
div({ class: "logs-toolbar-wrap" },
|
||||
renderFilterBar(current, hasItems),
|
||||
renderSearchBox(current, search)
|
||||
);
|
||||
|
||||
const MAX_PREVIEW = 140;
|
||||
|
||||
const truncate = (str) => {
|
||||
const s = String(str || '');
|
||||
if (s.length <= MAX_PREVIEW) return s;
|
||||
return s.slice(0, MAX_PREVIEW).replace(/\s+\S*$/, '') + '…';
|
||||
};
|
||||
|
||||
const renderLogPreview = (item) => {
|
||||
const text = truncate(item.text);
|
||||
return div({ class: "logs-entry-text" }, ...renderUrl(text));
|
||||
};
|
||||
|
||||
const renderTable = (items) => {
|
||||
if (!safeArr(items).length) return p({ class: "no-content" }, i18n.logsEmpty || 'No logs yet.');
|
||||
return table({ class: "logs-table" },
|
||||
thead(
|
||||
tr(
|
||||
th(i18n.logsColumnDate || 'Date'),
|
||||
th(i18n.logsColumnType || 'Type'),
|
||||
th(i18n.logsColumnLog || 'Log'),
|
||||
th(''),
|
||||
th('')
|
||||
)
|
||||
),
|
||||
tbody(
|
||||
items.map(item =>
|
||||
tr(
|
||||
td({ class: "logs-col-date" },
|
||||
span({ class: "logs-date-day" }, moment(item.ts).format("DD/MM/YYYY")),
|
||||
' ',
|
||||
span({ class: "logs-date-time" }, moment(item.ts).format("HH:mm"))
|
||||
),
|
||||
td({ class: "logs-col-type" },
|
||||
span({ class: item.mode === 'ai' ? "logs-type-text logs-type-ai" : "logs-type-text logs-type-manual" },
|
||||
item.mode === 'ai' ? (i18n.logsModeAI || 'AI') : (i18n.logsModeManual || 'Manual')
|
||||
)
|
||||
),
|
||||
td({ class: "logs-col-log" },
|
||||
item.label ? div({ class: "logs-entry-label" }, item.label) : null,
|
||||
renderLogPreview(item)
|
||||
),
|
||||
td({ class: "logs-col-actions" },
|
||||
form({ method: "GET", action: `/logs/view/${encodeURIComponent(item.key)}` },
|
||||
button({ type: "submit", class: "filter-btn" }, i18n.logsViewDetails || 'View Details')
|
||||
)
|
||||
),
|
||||
td({ class: "logs-col-actions" },
|
||||
form({ method: "GET", action: `/logs/export/${encodeURIComponent(item.key)}` },
|
||||
button({ type: "submit", class: "filter-btn" }, i18n.logsExportOne || 'Export')
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const renderModeToggle = (mode, aiModOn) => {
|
||||
const isAi = mode === 'ai';
|
||||
const isManual = !mode || mode === 'manual';
|
||||
return form({ method: "GET", action: "/logs", class: "logs-mode-form" },
|
||||
input({ type: "hidden", name: "view", value: "create" }),
|
||||
div({ class: "logs-mode-group" },
|
||||
button({
|
||||
type: "submit", name: "mode", value: "manual",
|
||||
class: isManual ? "filter-btn active" : "filter-btn"
|
||||
}, i18n.logsModeManual || 'Manual'),
|
||||
aiModOn
|
||||
? button({
|
||||
type: "submit", name: "mode", value: "ai",
|
||||
class: isAi ? "filter-btn active" : "filter-btn"
|
||||
}, i18n.logsModeAIWritten || 'AI-Assistant')
|
||||
: null
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const renderCreateForm = (mode, aiModOn) => {
|
||||
const isAi = mode === 'ai' && aiModOn;
|
||||
const inner = isAi
|
||||
? div({ class: "div-center audio-form" },
|
||||
form({ method: "POST", action: "/logs/create" },
|
||||
input({ type: "hidden", name: "mode", value: "ai" }),
|
||||
button({ type: "submit", class: "create-button" }, i18n.logsGenerateButton || 'Generate Text')
|
||||
)
|
||||
)
|
||||
: div({ class: "div-center audio-form" },
|
||||
form({ method: "POST", action: "/logs/create" },
|
||||
input({ type: "hidden", name: "mode", value: "manual" }),
|
||||
span(i18n.logsManualPrompt || 'Write your log'), br(),
|
||||
textarea({ name: "text", rows: "8", required: true, placeholder: i18n.logsTextPlaceholder || 'Describe your experiences...' }),
|
||||
br(), br(),
|
||||
button({ type: "submit", class: "create-button" }, i18n.logsWriteButton || 'Write')
|
||||
)
|
||||
);
|
||||
return div(renderModeToggle(mode, aiModOn), inner);
|
||||
};
|
||||
|
||||
const renderEditForm = (entry) => {
|
||||
return div({ class: "div-center audio-form" },
|
||||
h2(i18n.logsEditTitle || 'Edit Log'),
|
||||
form({ method: "POST", action: `/logs/edit/${encodeURIComponent(entry.key)}` },
|
||||
span(i18n.logsManualPrompt || 'Write your log...'), br(),
|
||||
textarea({ name: "text", rows: "8", required: true }, entry.text || ''),
|
||||
input({ type: "hidden", name: "label", value: entry.label || '' }),
|
||||
br(), br(),
|
||||
button({ type: "submit", class: "create-button" }, i18n.logsUpdateButton || 'Update')
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const renderDetail = (entry) => {
|
||||
const headerLine = `[${moment(entry.ts).format("DD/MM/YYYY HH:mm:ss")}]:`;
|
||||
return div({ class: "div-center audio-form logs-detail" },
|
||||
h2(headerLine),
|
||||
entry.label ? div({ class: "logs-entry-label" }, entry.label) : null,
|
||||
div({ class: "logs-detail-text" }, ...renderUrl(String(entry.text || ''))),
|
||||
div({ class: "logs-detail-actions" },
|
||||
form({ method: "GET", action: "/logs" },
|
||||
button({ type: "submit", class: "filter-btn" }, i18n.walletBack || 'Back')
|
||||
),
|
||||
form({ method: "GET", action: `/logs/export/${encodeURIComponent(entry.key)}` },
|
||||
button({ type: "submit", class: "filter-btn" }, i18n.logsExportOne || 'Export')
|
||||
),
|
||||
form({ method: "GET", action: "/logs" },
|
||||
input({ type: "hidden", name: "view", value: "edit" }),
|
||||
input({ type: "hidden", name: "id", value: entry.key }),
|
||||
button({ type: "submit", class: "filter-btn" }, i18n.logsEdit || 'Edit')
|
||||
),
|
||||
form({ method: "POST", action: `/logs/delete/${encodeURIComponent(entry.key)}` },
|
||||
button({ type: "submit", class: "filter-btn danger-btn" }, i18n.logsDelete || 'Delete')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
exports.logsView = (items, filter, mode, opts = {}) => {
|
||||
const listTitle = i18n.logsTitle || 'Logs';
|
||||
const description = i18n.logsDescription || 'Record your experience in the network.';
|
||||
const view = opts.view || 'list';
|
||||
const aiModOn = !!opts.aiModOn;
|
||||
const hasItems = Array.isArray(items) && items.length > 0;
|
||||
|
||||
if (view === 'create') {
|
||||
const h = i18n.logsCreateTitle || 'Create Log';
|
||||
const body = section(
|
||||
div({ class: "tags-header" }, h2(h), p(description)),
|
||||
renderFilterBar(filter, hasItems),
|
||||
renderCreateForm(mode, aiModOn)
|
||||
);
|
||||
return template(h, body);
|
||||
}
|
||||
if (view === 'edit' && opts.entry) {
|
||||
const h = i18n.logsEditTitle || 'Edit Log';
|
||||
const body = section(
|
||||
div({ class: "tags-header" }, h2(h), p(description)),
|
||||
renderEditForm(opts.entry)
|
||||
);
|
||||
return template(h, body);
|
||||
}
|
||||
if (view === 'detail' && opts.entry) {
|
||||
const h = i18n.logsViewTitle || 'Log';
|
||||
const body = section(
|
||||
div({ class: "tags-header" }, h2(h), p(description)),
|
||||
renderDetail(opts.entry)
|
||||
);
|
||||
return template(h, body);
|
||||
}
|
||||
const body = section(
|
||||
div({ class: "tags-header" }, h2(listTitle), p(description)),
|
||||
renderToolbar(filter, opts.search || {}, hasItems),
|
||||
div({ class: "logs-list" }, renderTable(items))
|
||||
);
|
||||
return template(listTitle, body);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue