Спортивная программа fitplotter (js)

[karaul]

Прошу высказаться физкультурников-программистов

https://github.com/karaul/fitplotter

По ссылке выше текст на английском, а по ссылкам ниже по-русски в свободной форме
Мотивация и начало работы
http://maraforum-2.ru/viewtopic.php?f=6&t=3477
Развитие проекта
http://maraforum-2.ru/viewtopic.php?...=3301&start=20

Спасибо.

[рони]

karaul,
по программе высказаться не могу, но дело хорошее.

[karaul]

Похоже, что марафонцев среди js программистов столько же, сколько программистов среди бегунов. Мало.

Но вот Искандер Ядгаров - звезда Московского Марафона - он же программист.

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

[karaul]

karaul,
по программе высказаться не могу, но дело хорошее.

у меня в программе есть связанные списки. Поля списка оси y зависят от того выбора списка оси х. Правда, такие вещи я писал еще в 1993, на ДОСовсом FoxPro

[karaul]

Никто не пишет, а хочется поговорить

(1) При входе на форум глюки при автоподстановке пароля из гугл-хромовского менеджера паролей. Пришлось запрашивать воостановление пароля. И так уже второй раз.

(2) Хочется получить совет по реализации программы. Делается для себя, вспомнить навык и выучить новое, чтобы другим было не стыдно показать и предложить для работы. Коммерческого интереса нет.

Подробно. В моем спортивном архиве данные о 10 лет занятий, 37500км, несколько тысяч файлов. Каждый файл - это трек пробежки с записью GPS координат, пульса, темпа бега, частота шагов (каденс) и прочее из спортивных часов. На рисунке во вложении пример того что в файлах

Я сделал форму для анализа данных записанных в файле, см. стартовое сообщение. Вот кстати, онлайн версия

https://karaul.github.io/fitplotter/

если интересно поиграть с онлайн-версией, FIT файл для анализа можно взять из https://github.com/karaul/fitplotter/tree/main/examples

файл проекта
https://github.com/karaul/fitplotter

Теперь мне хочется прикрутить к этому делу оболочку - таблицу из имен файлов и реперных данных из каждого файла (день, расстояние, средние и проч). Все файлы хранятся в одной директории на моей машине. Эта директория почти ежедневно пополняется. Мне хочется иметь таблицу вроде этой
https://www.runningahead.com/logs/4e...1eca8/workouts
Так чтобы щелкнув по строке таблицы я мог открыть из директории соответствующий файл и посмотреть график. Потом щелкнуть по другой строке и открыть на том же графике 2ой файл и сравнить. (Или на новом поле, но это неважно)

Непонятно как сделать таблицу. Прикручивать базу данных? Я сделал подобное на питоне, там у меня просто за каждый год csv файл, который регулярно дописывается, все работает. Теперь хочется на JS, но чтобы было не кустарно, как на питоне, а согласно имеющимся практикам, и практики заодно выучить. Предполагается что программа работать будет локально, если удастся потом сделать выход в внешний мир, как получилось с fitplotter, то совсем хорошо.

По моему разумению - это стандартная задача. Я нашел несколько описаний как это делается, например
https://closebrace.com/tutorials/201...ss-and-mongodb

Хочется знать - это правильное решение когда элементы хранения - файлы на диске? Мне кажется можно сделать проще.

Спасибо за обсуждение.

PS: В качестве благодарности могу надавать советов как правильно бегать.

[рони]

karaul,
на всякий случай, пример создания таблицы с возможностью сортировки
https://javascript.ru/forum/misc/777...tml#post509074

[voraa]

Предполагается что программа работать будет локально

По моему разумению - это стандартная задача. Я нашел несколько описаний как это делается, например
https://closebrace.com/tutorials/201...ss-and-mongodb

А это уже не локально. Это уже сервер, хоть и установленный на том же компьютере.
Ставить для этого ноду с монго - стрельба из пушки по воробьям. Ну если только хочется поучиться работать с этим.

Но с другой стороны без сервера обойтись трудно. Javascript не может на автомате читать файлы с локального компьютера без явного указания пользователем файла, через стандартное диалоговое окно Open File.
Только если попробовать поизвращаться - подключать эти файлы через <script>, и делать их как JSON, или просто комментарий и потом парсить текстовое содержимое.

[karaul]

Спасибо за обсуждение

Изменил нечитаемый пароль выданную гуглем на более человеческое - гугл-хромовский менеджер начал работалть

рони спасибо за код, да именно это я и хочу. Надо просто добавить контроль для открытия карты и графиков. Как лучше: двойной щелчок по строке или отдельная колонка с кнопкой?

voraa спасибо за идею. Интересно, комментарий на тысячи строк. А есть пример такой реализации?

В качестве главной цели мне хочется чтобы программа прижилась в нашем спортивном клубе. Там не программисты, но про текстовый файл поймут. И возможность в т.ч. самому править файл заголовков (если что пошло не так), дописывая туда имя файла c свежей тренировкой выглядит просто и привлекательно. Человек понимает что делает и чувствует себя хозяином своей машины, программы на ней, и управляет своими данными. А необходимость шаманства с настройкой sqlite или mongodb и настройкой сервера людей оттолкнет. Можно сделать две версию, простую для людей, и правильную с БД (для себя - поучиться работать с БД).

[рони]

или отдельная колонка с кнопкой?

[voraa]

А есть пример такой реализации?

Ну с комментариями это я поторопился.
Это прокатывало, когда произвольные данные надо было помещать в
<script>
/*
Тут произвольные данные
*/
</script>

Но для внешних файлов набросал такой примерчик

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <title> LOAD DATA </title>
</head>
<style>
#out {
	position:relative;
	width: 300px;
	height:400px;
	overflow-y:auto;
	border: 1px red solid;
}
</style>
<body >
<pre id=out></pre>
<button id=rd1>read1</button>
<button id=rd2>read2</button>
<button id=rd3>read3</button>

<script>
var data;
const read = (fn) => {
	const uf = './data/'+ fn;
	const sf = document.createElement('script');
	return new Promise (res => {
		sf.onload = () => {
			sf.remove();
			res(data)
		}
		sf.src = uf;
		document.head.append(sf)
	})
}
document.getElementById('rd1').addEventListener('click', async () => {
	const text = await read('file1.dat')
// Тут какая то обработка. Пока так
	document.getElementById('out').textContent += text;
})
document.getElementById('rd2').addEventListener('click', async () => {
	const text = await read('file2.dat')
// Тут какая то обработка. Пока так
	document.getElementById('out').textContent += text;
})
document.getElementById('rd3').addEventListener('click', async () => {
	const text = await read('file3.dat')
// Тут какая то обработка. Пока так
	document.getElementById('out').textContent += text;
})
</script>
</body>
</html>

В директории с этим файлом создайте поддирескторию data
И в нее три файла
file1.dat

data=`
Это файл file1.dat
12345
67890
09876
54321
`;

file2.dat

data=`
Это файл file2.dat
qwert
yuiop
asdfg
hjklz
`;

file3.dat

data=`
Это файл file3.dat
йцуке
нгшщзх
фывап
ролджэ
`;

В этих файлах между первой строкой
data=`
и последней
`;
Могут размещаться произвольные текстовые данные, которые можно получить и потом как то обрабатывать