Экспорт отформатированных записей для PowerUp — GSoC в Systers

Я никак не мог редактировать и поддерживать базу данных PowerUp без посторонней помощи.

Сначала я просто смотрел на то, что уже было. Я надеялся найти приложение, которое, по сути, делало то, что я хотел. Я был очень близок к тому, чтобы попытаться взломать Twine в соответствии со своими потребностями, но потом я наткнулся на GoJS.

GoJS — это многофункциональная библиотека JavaScript для реализации пользовательских интерактивных диаграмм и сложных визуализаций в современных веб-браузерах и платформах.

Я слышал о нем раньше, но сам никогда им не пользовался. Я был действительно впечатлен большим количеством подробных примеров, которые они предоставили.

Один из примеров выглядел очень многообещающе, и в итоге он предоставил отличную основу для создания приложения, которое я задумал. Он начинался просто как картографический инструмент.

Он динамически загружал базу данных PowerUp прямо из репозитория git и размещал записи в виде подключенных узлов. Это было круто и все такое, но я понял, что мне действительно нужен лучший способ редактирования базы данных. Я совершенно точно не хотел тратить дни на прокрутку таблиц с сотнями записей только для того, чтобы найти неверное значение или исправить опечатку, поэтому я начал обновлять инструмент сопоставления, чтобы его можно было редактировать. Были некоторые повороты и повороты, но я смог довольно быстро собраться воедино благодаря GoJS.

HTML для этого довольно прочный. Вам просто нужен div для хранения холста.

<div id="diagramDiv"></div>

Настоящая магия происходит в шаблонах узлов. Видите ли, графики GoJS основаны на этих шаблонах, но самое приятное то, что к чему угодно можно привязать пользовательскую привязку.

let fieldTemplate =
    $(go.Panel, "TableRow",
        $(go.TextBlock, {
            margin: new go.Margin(0, 5),
            column: 1,
            font: "italic 11px sans-serif",
            alignment: go.Spot.Left,
            fromLinkable: false,
            toLinkable: false
          },
          new go.Binding("text", "name")
        ),
        $(go.TextBlock, {
            margin: new go.Margin(0, 5),
            width: 100,
            column: 2,
            font: "11px sans-serif",
            alignment: go.Spot.Left,
            wrap: go.TextBlock.WrapFit,
            editable: true
          },
          new go.Binding("text", "info").makeTwoWay()
        )
    );

Не потребовалось много времени, чтобы настроить шаблон, который охватывал бы все данные, необходимые для записи базы данных PowerUp, и сделать поля редактируемыми. Я добавил логику для управления связыванием, чтобы база данных не запуталась, и автоматизировала столько процессов, сколько могла придумать.

Теперь у меня был этот рабочий инструмент, где я мог редактировать и просматривать данные. Но мне приходилось вручную копировать/вставлять график JSON, если я хотел сохранить работу. Поэтому я начал добавлять эту панель инструментов внизу. Изначально в пример были включены кнопки, которые сохраняли и вызывали данные прямо в окне, а также функция Do Layout. Не так уж и далеко было просто сделать так, чтобы кнопка сохранения загружала отдельный файл JSON, а кнопка загрузки открывала диалоговое окно для выбора этого файла JSON.

Затем я просто продолжал добавлять функции, чтобы облегчить себе жизнь. Вы можете экспортировать файлы CSV, готовые для вставки в основную базу данных PowerUp, а также экспортировать PDF или SVG, чтобы упростить обмен прогрессом и идеями. Мелкие детали начали становиться ошеломляющими, на что указывали некоторые другие сестры. Они попросили некоторую документацию в приложении, поэтому я добавил простое меню с некоторыми инструкциями о том, как работает приложение.

Первоначально я планировал, что это будет только для меня, но потом я увидел, что уже существует проблема с github для предоставления документации и схемы для базы данных. Я подумал, что это может очень помочь в этом, поэтому я начал делиться этим с некоторыми людьми. С тех пор он получил действительно положительный прием. Я, конечно, планирую использовать его для управления своей работой, но это делает его гораздо более полезным, если он может быть полезен для всего проекта. (И, возможно, дальше…)

Проект можно посмотреть на Github. А живое демо можно посмотреть здесь.