Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Спортивная программа fitplotter (js) (https://javascript.ru/forum/project/81934-sportivnaya-programma-fitplotter-js.html)

karaul 26.02.2021 00:17

Мда, незадача

Написал
const queryString = window.location.search;//href;
const urlParams = new URLSearchParams(queryString);
const fitfilename = urlParams.get('file')
console.log(fitfilename);				
document.getElementById('myfile').value = fitfilename;

и получил (ниже 113 = 5 строка выше)
<main.js:113 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.   >


Конечно, о таких вещах надо знать из систематического образования. А не хватая случайные знания из сети

karaul 26.02.2021 03:43

Первая версия fitplotter работала с http server (http-server-static.js) потому что я не понимал как читать файлы с диска и не мог коректно импортировать в скрипт парсер. Сервер нужен для разрешения импорта и работал через node.eхe. Потом я подсмотрел у других, как без сервера можно обойтись, и с радостью выбросил node.exe из инсталляции. Программа стала работать онлайн.

Получается что теперь надо вернуться к тому что было. Имя файла из таблицы посылать на сервер, т.к. только сервер может прочитать этот файл не включая диалога и не вовлекая юзера. А дальше возникает два варианта:

(1) возвращать двоичное содержание файла чтобы его парсил клиент или
(2) возвращать распарсенное содержание в виде объектов, по которым строится график

Как лучше ?

Просто я видел вопросы в сети - люди маялись с получением blob от сервера, он приходил испорченным

voraa 26.02.2021 07:51

Конечно лучше, пусть сервер этим занимается.
Может даже лучше, если заранее распарсить все и хранить на сервере уже текстовый вариант, что бы не приходилось при каждом запросе делать одно и тоже.

karaul 26.02.2021 17:12

Вы правы, если проект получит развитие, то надо так сделать.

Пока решил не есть слона целиком и попробовал простейшее решение. Посадил XMLHttpRequest на кнопку из таблицу, отправил на сервер путь к файлу, там считал в fs, послал назад, получил бинарные внутренности которые тут же распарсил на клиенте для проверки. Заработало.

function plotdata(e) {
	var filename = e.target.id;
	console.log(filename);
	var xhr = new XMLHttpRequest();
	xhr.onload = httpRequestfoo;
	xhr.open('GET', filename, true);
	xhr.responseType = 'arraybuffer'
	xhr.onerror = function (e) {
           console.log(error(xhr.statusText));
        };
	xhr.send(null);
}

function httpRequestfoo() {
  if (this.readyState  === 4) {
	if (this.status === 200) {
   	var blob = new Uint8Array(this.response);
	fitParser.parse(blob, function (error, data) {
	    if (error) {
		console.error(error);
	    } 	else {
            // data - распарсенное содержание
	console.log(data);
	}
   });
  }			
  }		
}

karaul 26.02.2021 22:21

Cделал проект публичным

https://github.com/karaul/fitalyser

скриншоты
https://github.com/karaul/fitalyser/...er/screenshots
mainWindow.JPG - таблица занятий, fitplotterWindow.JPG- окно анализа.

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

Визуально надо ещё потрудится над таблицей, но прототип работает как было задумано.

Таблицу должен приготовить сам юзер. Это *.csv файл в котором прописаны пути к файлам тренировок. У меня такая таблицы есть, для в конце проекта может сделаю командную утититу которая бы по маске *.fit сама генерировала такую таблицу в заданной директории.

karaul 04.03.2021 19:22

прошу помощь, кажется опять я не знаю какого то секрета полишинеля

есть главное приложение main

/main/index.html

которое вызывает форму form изнутри main

windowFitplotter = window.open('./form/index.html)/

/main/form/index.html

Все работает, так и должно быть, main - главный, form - подчинененный и внутри main

Теперь я хочу чтобы form и main были на одном уровне

/main/index.html
/form/index.html

и делаю вызов windowFitplotter = window.open('./../form/index.html)/
(добавлено "/../" - чтобы уйти на уровень выше)

Но по прежнему происходит вызов изнутри
/main/form/index.html
и "/../" в игноре

Неправильно (bad practice) помещать form на том же уровне что и main? или что с настройками моего сервера, который игнорирует "/../" ?

Дело в том что form является независимым от main и к нему должен быть доступ сверху , и я не хочу вставлять form в main. Но при изменении кода внутри form, я не хочу каждый раз копировать файлы из независимой form под крышу main
cp form/* main/form/*

Как правильно поступать в таком случае ?


PS: включил подсказку форума changelog программы

Table ordering is implemented. It turns by clicking on the head of the column, thanks to rony from Russian javascript.ru/forum;

https://github.com/karaul/fitalyser/...r/CHANGELOG.md

karaul 04.03.2021 19:44

вроде здесь написанo, сервер игнорирует

https://en.wikipedia.org/wiki/Direct...aversal_attack

Directory traversal in its simplest form uses the ../ pattern.

voraa 05.03.2021 13:14

Цитата:

Сообщение от karaul
Как правильно поступать в таком случае ?

Можно сделать на сервере отдельный алиас для form
Что бы обращаться к нему /form/intex.html

Можно также иметь один каталог /form
но настраивать к нему разные алиасы.

Не знаю, каким сервером вы пользуетесь, но в аппаче это делается сравнительно легко
Например у меня есть сейчас 2 проекта
Они находятся (винда)
d:\works\catalog
d:\works\graph
есть общая библиотека (js)
d:\works\libjs

В конфиге аппача пишу

Alias /catalog/libjs "d:/works/libjs"
Alias /catalog "d:/works/catalog"

Alias /graph/libjs "d:/works/libjs"
Alias /graph "d:/works/graph"

Библиотека одна
Из catalog я обращаюсь к ней ./libjs/
так же из /graph - ./libjs/

karaul 05.03.2021 14:46

voraa,

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

pathname = pathname.replace(/GOUP/g, '/../');

Cпасибо за волшебное слово аlias - теперь понятно как делать правильно

karaul 08.03.2021 17:15

Новый улучшайзинг. Чего-то фундаментального не знаю.

Добавлена кнопка загрузки данных с внешнего независимого сайта - это элементы URL и download по ссылке

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

Исполняется такой код (схематично)

fileUrl = "https://connect.garmin.com/proxy/download-service/files/activity/";
// id = xxxxxxxx  mist be provided bу user
var downloadUrl = fileUrl + id;
window.location.href = downloadUrl;
// now there appears save as dialog


Приходит двоичный файл и на его прием появляется системный диалог save as. Я файл сохраняю, а потом открываю его как локальный. Всё работает.

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

Как сделать так тобы диалог save as не открывать, но данные получить

Я попробовал заменить window.location.href = downloadUrl который приводит к диалогу на XMLHttpRequest типа (сроки 13-25 чтобы создать свой диалог)
let id = document.getElementById('downloadURL').value.split("/").slice(-1);
		let  downloadUrl = fileUrl + id;
		//console.log(downloadUrl);
		// to download the current id 
		//window.location.href = downloadUrl;
		let xhr = new XMLHttpRequest();			
		xhr.onload = function (e) {
			if (this.readyState  === 4) {
				if (this.status === 200) {
					const blob = new Uint8Array(this.response);
					//parseBLOB(blob);
					// [url]https://stackoverflow.com/questions/22724070/prompt-file-download-with-xmlhttprequest[/url]
					let fileName = 'test.zip';
					window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
					window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
						fs.root.getFile(fileName, { create: true }, function (fileEntry) {
							fileEntry.createWriter(function (fileWriter) {
								fileWriter.addEventListener("writeend", function () {
									window.location = fileEntry.toURL();
								}, false);
								fileWriter.write(blob, "_blank");
							}, function () { });
						}, function () { });
					}, function () { });					
				 }			
				 if (this.status === 404) {
					 const  filename = document.getElementById("files").value;
					 errorNoFile("status 404",filename, 1);	
				 }
			}			 
		};


и оказалось что так нельзя
index.html:1 Access to XMLHttpRequest at 'https://connect.garmin.com/proxy/download-service/files/activity/6277409729' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


Какие еще способы, как получить данные ? Эти данные сайт мне посылает сразу же, когда я просто ввожу в адрес сайта downloadUrl - появляется диалог - но как их перехватить в программе ?

Спасибо


Часовой пояс GMT +3, время: 14:14.