К сожалению, на данный момент отсутствуют методы для работы с лентой объекта, временно отложим в сторону использование снифферов. Но не стоит отчаиваться, ведь у нас всегда есть возможность настроить форму с помощью виджета "Код". Так что даже если сейчас небо кажется облачным, мы всегда можем найти свет солнца в наших решениях.
Для начала добавим в контекст приложения поле типа - строка, зададим имя свойства - json .
В это поле мы будем складывать историю сообщений в формате json, предварительно преобразуя ее в строку.
Перейдем в форму просмотра предварительно создав ее.
В контексте формы добавим поле типа - строка, зададим название - message.
Данное свойство необходимо для ввода сообщения от пользователя.
Вынесем на форму свойство - сообщение, виджет код и кнопку.
Заполним виджет код (tables) следующем скриптом.
Код:
<style>
table {
margin: auto;
width: 80%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-align: left;
}
.small-cell {
width: fit-content;
}
.large-cell {
width: 60%;
word-break: break-word; /* Добавлено свойство для переноса слов */
}
</style>
<table>
<thead>
<tr>
<th class="small-cell">Время</th>
<th class="small-cell">Имя</th>
<th class="large-cell">Сообщение</th>
</tr>
</thead>
<tbody id="chat-table"></tbody>
</table>
<script>
var data = <%= Context.data.json %>;
function renderTable(data) {
const tbody = document.querySelector('#chat-table');
tbody.innerHTML = '';
data.forEach(({ time, name, message }) => {
const tr = document.createElement('tr');
const tdTime = document.createElement('td');
tdTime.textContent = time;
const tdName = document.createElement('td');
tdName.textContent = name;
const tdMessage = document.createElement('td');
tdMessage.textContent = message;
tr.appendChild(tdTime);
tr.appendChild(tdName);
tr.appendChild(tdMessage);
// Вставляем элемент в начало таблицы
tbody.insertBefore(tr, tbody.firstChild);
});
}
renderTable(data);
</script>
Функция renderTable разбирает json и формирует из него читаемую таблицу.
Перейдем в кнопку и повесим на неё функцию - message.
Далее перейдем в сценарии и добавим следующий код.
Код:
/* Client scripts module */
declare const console: any;
// Определение типа для JSON-сообщения
type Json_message = {
time: string,
name: string,
message: string
}
// Асинхронная функция message()
async function message(): Promise<void> {
// Проверка, что сообщение не является пустым или состоит только из пробелов
if (ViewContext.data.message != undefined && ViewContext.data.message.trim() != "") {
// Получение информации о текущем пользователе
let name_user = await System.users.getCurrentUser();
let json_message: Json_message[] = [];
// Проверка, что JSON-строка не пустая и уже существует
if (Context.data.json != "" && Context.data.json) {
// Разбор JSON-строки в массив json_message
json_message = JSON.parse(Context.data.json);
let new_record = {} as Json_message;
new_record.name = name_user.data.__name.toString();
new_record.time = new Datetime().format("hh:mm:ss");
new_record.message = ViewContext.data.message;
// Добавление новой записи в массив json_message
json_message.push(new_record);
} else {
let new_record = {} as Json_message;
new_record.name = name_user.data.__name.toString();
new_record.time = new Datetime().format("hh:mm:ss");
new_record.message = ViewContext.data.message;
// Добавление новой записи в пустой массив json_message
json_message.push(new_record);
}
let app = await Application.search().where(f => f.__id.eq(Context.data.__id)).first();
if (app != undefined) {
// Преобразование массива json_message в JSON-строку и сохранение ее в свойство json объекта app
app.data.json = JSON.stringify(json_message);
// Сохранение изменений в объекте app
await app.save();
}
// Очистка поля сообщения после отправки
ViewContext.data.message = undefined;
}
}
По итогу у нас получается что-то такое, естественно все стили и верстку можно настроить из ходя из потребностей и собственного чувства прекрасного.
