В офисе на странице списка таймеров вывести информацию суммарное время выполнения

Завершена

Проект: freecode.academy

Планируемый запуск: Дата начала: 01.03.2021Планируемое завершение: Дата завершения: 01.03.2021

Описание задачи

  1. Технология
    Требуемый уровень
  2. 2
    2
ПроектЗадачаСтатусДата постановкиНачалоКонецКто создал
freecode.academyВ офисе на странице списка таймеров вывести информацию суммарное время выполненияЗавершена24.02.2021 20:06:5301.03.2021 15:01:0001.03.2021 16:21:52
freecode.academyВ офисе на странице списка таймеров вывести информацию суммарное время выполненияЗавершена24.02.2021 20:06:5325.02.2021 16:17:1826.02.2021 18:14:09
Я правильно понимаю, что вывод должен быть примерно там где сейчас заголовок лог выполнения?
И не совсем понятно суммарное время моих проектов или всех которые там отображаются. Я так понимаю еще нет функционала по выбору только моих проектов, значит всех получается?
>> Я правильно понимаю, что вывод должен быть примерно там где сейчас заголовок лог выполнения?
Да. В принципе, в любом месте можешь вывести, не критично.

>> И не совсем понятно суммарное время моих проектов или всех которые там отображаются. Я так понимаю еще нет функционала по выбору только моих проектов, значит всех получается?

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

Думаю лучше здесь все-таки выводить после иконок.
Олег, ты совсем в другую степь полез. То общий каркас, при чем не самый оптимальный (я там экспериментирую).


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

Ты написал:

Суммарное время всех полученых записей. Там найди где они перечисляются в цикле и набиваются в шаблоны. Вот так же возьми, перечисли их и посчитай все время.

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

Второй вопрос по поводу места где они набиваются я правильно понимаю, что ты про этот код говорил:
projects={timer.Task.TaskProjects?.map((n) => n.Project) || []}

Просто на самой странице тоже есть map:
{timers.map((timer) => { return <OfficeTimersTimer key={timer.id} timer={timer} /> })}
Третий вопрос не понимаю, как мы результат должны получать через хук useState например или просто, нужно пременить js функцию после выполнения цикла и она все посчитает?

<< Первый вопрос есть ли какой-нибудь алгоритм, как приступать к выполнению задачи
Есть: Пришел, увидел, победил. Все как обычно...

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

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

На самом деле тебя разброс файлов вообще особо не должен волновать. Какая разница один это файл или много? Главное - с чего начать. А я говорил с чего - с папки /pages. С нее все начинается, там весь роутинг. А далее юзай активно F12 (для быстрого перехода к сущности). Встал курсором, нажал F12, Перешел к сущности. Оттуда практически наверняка будет куда-нибудь в src/pages, где конечный код страниц находится. Там будет первичное получение нужных данных, которые будут передаваться в какую-нибудь вьюху (View). Вложенность может быть какая угодно, но суть все равно будет одна и та же: это будут реакт-компоненты, которые выводят другие реакт-компоненты, передавая в них пропсы (props) и оперируя своими стейтами (state). Все. Там другого практически ничего нет. Все остальное локально внутри компонента. Вот еще раз: я уже выше говорил, что Сама страница здесь: https://github.com/freecode-academy/freecode.academy/blob/e8dc066e7a539e87d1a87e72ada36f059a32d291/src/pages/Office/Timers/View/index.tsx
Ты что, реально не можешь там найти цикл перечисления и набивки в шаблон таймеров?
{timers.map((timer) => { return <OfficeTimersTimer key={timer.id} timer={timer} /> })}
Это же всего три строчки. Что тут не ясно? Ты не понимаешь метода Array.map? Так зайди в уроки по JS и перепройди массивы.


Это основа. Практически все языки программирования держатся на трех китах: циклы, условия и еще что-то там. Если ты не понимаешь и не умеешь в if/else, то куда ты вообще можешь пойти? Если не понимаешь циклы (while, for и т.п.), то опять-таки, куда ты можешь пойти? Ты месяц делал покемонов, а в итоге простейшие операции с массивами не понимаешь? А знаешь почему? Помнишь этот мем?: "Отправили на экскурсию по заводу BMW, а потом заставляют наладить производство таких же машин". Вот ты посмотрел как кто-то там делает какой-то проект, от начала и до конца, так вот, даже если ты год потратишь и научиться по тому курсу делать этот проект с покемонами, то в лучшем случае ты научишься делать именно такие проекты с покемонами. А каков шанс на то, что к тебе придет заказчик и попросит вот ровно такой проект с покемонами? Даже если вот прям сильно такой же будет и ты сможешь его сделать на 90%, но не сможешь доделать оставшиеся 10%, то проект не сдан. Никто не примет проект со словами "Ну там осталось немного, найдите кого-нибудь, пусть доделает".

Я же на главной странице даже сделал ссылку для новеньких: https://freecode.academy/start/developers и главное там вот это:

Если вы решили изучить веб-программирование, мы попытаемся вам в этом помочь. Для этого разрабатывается и внедряется сразу несколько инструментов.
1. Тестовые онлайн-задания.
Данный раздел подходит для самостоятельного последовательного изучения основам веб-разработки. Рекомендуется следующая последовательность в изучении:
Для начала освоить
При чем лучше не последовательно полностью по курсу, а в первый день HTML и CSS, во второй JavaScript, в третий React, и далее по кругу. Реакт будет на первых парах сложен в восприятии, поэтому его можно в начале поменьше. Чувствуете, что ничего не понимаете - переключайтесь опять на HTML/CSS/JS. Все потому что Реакт, по сути, это JS+HTML - Переменные, свойства которых являются HTML-разметкой (очень условно, но близко к сути).
В каждом уроке есть вкладка Обсудить. Если вы зашли в нее и там нет еще ни одного сообщения, не стесняйтесь, смело пишите туда любые вопросы. Смысл данных уроков не в том, чтобы протестировать что вы умеете, а что нет (хотя и это тоже), а в том, чтобы вы научились чему-то новому, так что если что-то не ясно, обязательно спрашивайте. Все обсуждения попадают в общий блог Уроки.

Вот именно в такой последовательности. Ты должен знать основы JS обязательно. Прям каждый день по часу-два на эти уроки тратить, можно и по кругу, пока не почувствуешь уверенность в знаниях. А ты что сейчас делаешь? Не понял три строчки и пытаешься отъехать в то, что проект большой и запутанный? Нее, так дело не пойдет. Проблема явно не в проекте, а в знаниях и подходах.

Так вот, возвращаясь к задаче, ты мог бы для начала хотя бы сделать это:
// Обернуть цикл в мемо, чтобы при изменении массива посчитать актуальное время и сформировать актуальный список // Результатом выполнения функции будет объект с двумя свойствами const { totalTime, timersContent, } = useMemo(() => { // Счетчик общего времени let totalTime = 0; // Набить таймеры в шаблоны const timersContent = timers.map((timer) => { // Здесь посчитать затраченное время по таймеру и добавить в общий счетчик totalTime += ... return <OfficeTimersTimer key={timer.id} timer={timer} /> }) // Возвращаем объект с обеими переменными return { totalTime, timersContent, } }, []); // В шаблоне вывести <div> {totalTime} {timersContent} </div>

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

Вот тогда бы я понял, что локально ты в чем-то продвинулся... А вот потом уже будешь смотреть и в связи в файлах и т.п.
>> Второй вопрос по поводу места где они набиваются я правильно понимаю, что ты про этот код говорил:
projects={timer.Task.TaskProjects?.map((n) => n.Project) || []}
Просто на самой странице тоже есть map:
{timers.map((timer) => { return <OfficeTimersTimer key={timer.id} timer={timer} /> })}

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



А, и да, забыл сказать, о чем говорил уже не раз: для того, чтобы учиться, не обязательно только что-то самому создавать. Ведь можно и просто смотреть что делают другие и пытаться понять почему сделано так, что происходит и как происходит. Да, у меня тут есть сложные вещи, но есть и очень простые. Почаще заходи на страницу всех задач с пометкой "Нужна помощь": https://freecode.academy/tasks?needHelp=true, смотри те, что уже выполнены. Там, в своих задачах, я часто указываю ссылки на коммиты (Пометка Решение). Что может быть лучше? Вот тебе и задача с описанием, вот тебе и решение (как правило не особо большое). Бери, изучай.

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

// Скачиваем последние изменения git pull // Переключаемся в нужный коммит с созданием ветки git checkout commithash -b new_branch_name
К примеру, вот задача: https://freecode.academy/tasks/ckljv1vh67b8u0730duw8yph4


5f892c3b62d08884b953647c5327eeb1937756b5 - это хэш коммита. Ветку создаем так:

git checkout 5f892c3b62d08884b953647c5327eeb1937756b5 -b test_branch

Все, вот ты в бранче test_branch и ровно в этой точке. Запускай yarn dev, иди в код этих файлов и играйся с кодом.


// Набить таймеры в шаблоны const timersContent = timers.map((timer) => { // Здесь посчитать затраченное время по таймеру и добавить в общий счетчик totalTime += ... return <OfficeTimersTimer key={timer.id} timer={timer} /> })
Я правильно понимаю totalTime += ... считает сумму часов, а три точки ... это деструктуризация обращение к аргументу timer? Не совсем понимаю, как происходит суммирование времени время же - это не просто цифры, а имет свой формат, думал что его снчала надо преобразовать в unix time формат, а потом считать или пременить специальный метод, который все выполнит сам.
Олег, троеточие (деструктуризация) пишется только внутри объектов и массивов, то есть {...} и [...]. А здесь это было как в русском языке - "многоточие". То есть указание "продолжить свою логику". То есть имелось ввиду, что там ты напишешь свою логику для подсчета (ну, или выше, а там переменную передашь).

<< времени время же - это не просто цифры, а имет свой формат
Это зависит от того, чем является то, что ты называешь временем. Если ты имеешь строку типа "2021-01-01 23:59:59", то как тип, это вот та же строка и не более того. Это только можно рассчитывать на то, что она в себе имеет в качестве значения некую временную метку, но только рассчитывать, не более. От этого она временем не стала. А вот Объект Date - это уже самое что ни на есть время, то есть его можно таковым считать. Но оно не несет в себе форматирования. Форматирование - это операция, а вот временная метка - это значение. Очень важно понимать эти моменты.

Так вот, на счет твоего вопроса: я тебе почему постоянно говорю учить TypeScript? Вот приступишь к решению задачи, получишь переменную из объекта, и посмотри какого она вообще типа. Так вот, скорее всего она будет именно Date, а не script. То есть это будет именно объект даты.

Так вот, с датами можно выполнять математические и логические операции, так что stopedAt - createdAt вернет разницу в секундах (число). А moment используем как раз для форматирования. moment.utc(diff).format(format_string)

Доку по форматированию можешь посмотреть здесь: https://momentjs.com/docs/#/displaying/format/

Кстати, на том сайте, если открыть браузерную консоль, функция moment() доступна прям там. Можешь там же попробовать выполнить
moment.utc(10000).format('HH:mm:ss') "00:00:10"

Если я правиль понял в этом коде:
// Набить таймеры в шаблоны const timersContent = timers.map((timer) => { // Здесь посчитать затраченное время по таймеру и добавить в общий счетчик totalTime += ... return <OfficeTimersTimer key={timer.id} timer={timer} /> })
чтобы получить общую сумму просто нужно передать массив timer где у тебя стоит троеточие. Собственно, что я и попытался сделать, но когда я его туда добавил TS выдал ошибку Operator '+=' cannot be applied to types 'number' and 'Timer_Fragment'.ts(2365). Тогда я попробовал преоброзовать типы totalTime и timersContent тоже в Timer_Fragment, так у timer у нас тип Timer_Fragment и ты вроде выше писал, что с такими объектами можно манипулировать (если конечно правильно понял), но TS все равно выдает ошибку и такое ощущение, что он все-таки его не преоброзовал, так как выше в коде:
const { totalTime, timersContent, } = useMemo(() => { // Счетчик общего времени let totalTime = 0;

let totalTime = 0; все равно определяется, как number, пробовал разные способы, там в коде закоммитил, чтобы было видно, что пробовал, но в итоге не получилось.

Плюс в этом коде:

const { totalTime, timersContent, } = useMemo(() => { // Счетчик общего времени let totalTime = 0;
TS выдает ошибку All destructured elements are unused. Гуглил, но ничего вразумительного не смог найти, как исправить.

Отправил коммит:
Я вот даже и не припомню когда в последний раз видел, чтобы так упорно пытались натянуть сову на глобус...
Ты опять слишком много написал и слишком много всего попробовал, забыв сосредоточиться на самом важном... Давай в блиц вопрос-ответ. Отчвечай четко на каждый вопрос, не убегая в сторону.
// Здесь посчитать затраченное время по таймеру и добавить в общий счетчик totalTime += ...
Здесь totalTime какой тип имеет?

А оператор += что выполняет?
Прибавляет и приравнивает
Оператор присваивания присваивает левому операнду значение, основанное на значении правого операнда.
Тут это называют Сложением с присваиванием, что более правильно.

Если у нас переменная имеет тип number, то значение какого типа к ней можно прибавить? Перечисли все.
Соответсвенно number, так я пытался timer присваивает значение number там оно есть закомичено, но не все равно ошибка, потом решил сделать наоборот и превратить totalTime в Timer_Fragment.
А timer какой тип имеет?
(parameter) timer: Timer_Fragment
Тип Timer_Fragment равен типу number?
Скорей всего нет - это же разные типы, но точно не уверен.
Вот тут прям в шок вводишь... Какие значения могут быть присвоены переменной с типом number? Перечисли штук пять, любых.
number, Infinity, NaN, string, undefined
Нет, я не говорил перечисли типы, которые ты знаешь. Я сказал перечислить значения, которые могут быть присвоены переменной с типом number. То есть
const a: number = 5;
const b: number = 4.5;
и т.д.
А теперь пришли общую структуру типа Timer_Fragment


export type Timer_Fragment = { __typename?: 'Timer', id: string, createdAt: globalThis.Date, updatedAt: globalThis.Date, stopedAt?: Types.Maybe<globalThis.Date>, CreatedBy?: Types.Maybe<( { __typename?: 'User' } & UserNoNestingFragment )>, Task: ( { __typename?: 'Task', TaskProjects?: Types.Maybe<Array<{ __typename?: 'ProjectTask', id: string, createdAt: globalThis.Date, updatedAt: globalThis.Date, Project: ( { __typename?: 'Project', CreatedBy?: Types.Maybe<( { __typename?: 'User' } & UserNoNestingFragment )>, Resource?: Types.Maybe<{ __typename?: 'Resource', id: string, name?: Types.Maybe<string>, uri: string }> } & ProjectNoNestingFragment ) }>>, RelatedTo?: Types.Maybe<Array<( { __typename?: 'Task' } & TaskNoNestingFragment )>>, Reactions?: Types.Maybe<Array<( { __typename?: 'TaskReaction', CreatedBy?: Types.Maybe<( { __typename?: 'User' } & UserNoNestingFragment )> } & TaskReactionNoNestingFragment )>> } & TaskNoNestingFragment ) };


Вот. Похоже на то, что можно задать переменную типа const c: Timer_Fragment = 7.7?
Да вроде не похоже, здесь только строковые типы и массивы.
Тогда получается я не понимаю, что делает этот код .
timers: OfficeTimersTimerProps['timer'][]
Хотел попросить тебя прислать сюда значение хоть одной переменной timer, но скорее всего и с этим не справшись. Вот смотри.
{ "id": "cklpg34rka79j0730vf40r29q", "createdAt": "2021-02-28T17:46:25.372Z", "updatedAt": "2021-02-28T17:46:51.553Z", "stopedAt": "2021-02-28T17:46:51.542Z", "CreatedBy": { "id": "ckl7wgkss16zd0730e0fuwjuv", "createdAt": "2021-02-16T11:04:55.371Z", "updatedAt": "2021-02-23T12:29:18.405Z", "__typename": "User" }, "Task": { "id": "cklpg34rha79h0730tgyyyfax", "createdAt": "2021-02-28T17:46:25.372Z", "updatedAt": "2021-02-28T17:46:51.553Z", "name": "Выполнение задания \"Comment Your JavaScript Code\"", }, "__typename": "Timer" }
Вот смотри, это такая переменная (сильно урезанная, но все же). Как ты хотел это присвоить к числу?

>> Тогда получается я не понимаю, что делает этот код .
timers: OfficeTimersTimerProps['timer'][]

Этот код всего лишь говорит "Жду переменную timers, которая должна быть типом Массив типов OfficeTimersTimerProps['timer']".
А теперь вопрос: если переменная totalTime имеет тип number, а timer не является типом number (соответственно нельзя одно прибавить к другому), то почему ты вообще пытался эти две сущности сложить? На что рассчитывал? Какого эффекта ожидал? Что думал получить на выходе?
OfficeTimersTimerProps а здесь мы ей присваиваем Timer_Fragment. В итоге - это получается строка или массив или вообще объект?
На выходе, как всегда результат:)
>> В итоге - это получается строка или массив или вообще объект?
В итоге это получается массив Timer_Fragment. То есть Timer_Fragment[] это то же самое, что и Array<Timer_Fragment>, если тебе так понятней. Вопрос только в том, понимаешь ли ты в принципе, что такое массивы?
>> На выходе, как всегда результат:)

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

Олег, не до шуток. Какой результат ты ожидал? Что должно быть результатом?

Я думал он сложит этот массив и получит сумму.
А нужно складывать получается объекты массива timer?
Во-первых, timer - это не массив. Массив - это timers. Читать умеешь? А timer - это объект.
Во-вторых, даже если бы ты мог слошить массивы, то чтобы ты получил на выходе? Вот что?

> А нужно складывать получается объекты массива timer?

А в JS можно складывать объекты?
const Buldog = {weight: 13,}; const Nosorog = {rog: 1,} const BuldogPlusNosorog = Buldog + Nosorog;
Что получится?

Я имел ввиду эллементы массива.
А элементами массива что является?

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

Напомню, у тебя на входе переменная timers, являющаяся массивом, содержащим элементы типа Timer_Fragment, то есть ее тип Array<Timer_Fragment>. Перечисляя этот массив методом map(), у нас на каждой итерации входящий параметр - timer, являющийся элементом массива timers и он имеет тип Timer_Fragment.

Так на что ты рассчитывал, когда к переменной типа number пытался прибавить объект типа Timer_Fragment? На что? Как по-твоему должен был поступить компьютер и какой результат выдать?
Я его пытался привести к единому типу и рассчитывал получить сумму времени всех постов.
Каким образом ты планировал привести его к единому типу? С помощью какого механизма? Я тут не увидел ничего.

Вообще, справедливости ради, стоит заметить, что математические операции могут приводить к динамической смене типа. К примеру 1 + " волк" (то есть number + string) в результате даст строку "1 волк". Это есть суть "динамическая типизация", противоположность строгой типизации. TypeScript как раз и был создан, чтобы ввести строгую типизацию, чтобы избегать таких случаев. Потому что тот же BuldogPlusNosorog = Buldog + Nosorog на выходе даст "[object Object][object Object]", потому что в данном случае будет попытка выполнить BuldogPlusNosorog = Buldog.toString() + Nosorog.toString();

Так вот, когда ты пытался выполнить эту бессмыслицу, тебе TS сказал "Operator '+=' cannot be applied to types 'number' and 'Timer_Fragment'.ts(2365)", то есть он тебе очень конкретно сообщил, что нельзя объект прибавить к числу. И ты вместо того, чтобы подумать как сделать так, чтобы прибавлять число, стал думать о том, как число сделать не числом. Зачем так?

А теперь давай вернемся к постановке задачи. Было сказано: Надо на странице таймеров вывести суммарное затраченное время.

Так вот, каждая итерация у нас идет с объектом timer. Нам надо получить затраченное время. Так вот ответь, что является сутью "затраченное время" и как нам его вычислить из объекта timer?

И ты вместо того, чтобы подумать как сделать так, чтобы прибавлять число, стал думать о том, как число сделать не числом. Зачем так?

Так я таймер, тоже хотел сделать числом, я так и так пробовал. Просто так, как я еще не очень хорошо ориентируюсь в TS конструкциях я не до конца понял, что такое Timer_Fragment только сейчас понял, когда ты объяснил.

Так вот, каждая итерация у нас идет с объектом timer. Нам надо получить затраченное время. Так вот ответь, что является сутью "затраченное время" и как нам его вычислить из объекта timer?

Предполагаю, что нужно сложить все объекты timer в единный объект. Cложить все значения объектов timer в массиве timers?
<< Предполагаю, что нужно сложить все объекты timer в единный объект.

И что на выходе получить? Строку из кучи повторяющихся подстрок "[object Object]"? В любом случае, это опять неправильно и совсем не туда.

Еще раз читай внимательно: "Так вот ответь, что является сутью "затраченное время" и как нам его вычислить из объекта timer?".

Уточняю: я здесь употребил единичный объект timer. В текущй итерации он один и с ним только и работаем сейчас. Ни о каких массивах сейчас речи нет. Так что является сутью "затраченное время"? Как ты его можешь получить из объекта timer?

Возможно timer.id id каждого проекта, так как в нем получаем значение для каждого объекта timer в отдельности.
Получаем что-то, чтобы получить что-то, чтобы потом запросить что-то и там еще запросим что-то... Не слишком ли сложно? Опять ты в какую-то магию отправился.
Еще раз: как из текущего объекта timer вычислить затраченное время? Уточняю: ничего со стороны запрашивать не надо, никакие запросы выполнять не надо, никакие левые функции выполнять не надо. Все необходимое у нас уже есть в текущем объекте таймер. Так как вычислить "затраченное время"?
Если все в нем уже есть, как я и предполагал изначально, нужно просто его распарсить, чтобы получить тип number и присвоить totalTime.
Рука-лицо... Парсят строки, к примеру...

ОК, выражаясь твоими словами, как ты планируешь распарсить объект timer, чтобы получить тип number. Напиши здесь кодом. Это в одну строчку вполне уложиться можно.

var data = [{"test":3}]

var s = JSON.stringify(data);
var d = JSON.parse(s)[0].Spalte;
Где же ты дичи-то этой начитался? Где ты этому научился?

Во-первых, у тебя Spalte вообще отсутствует в исходных данных. У тебя data имеет тип Array<{test: number}>. Где ты там Spalte нашел, вообще не ясно.
Во-вторых, нафига объект приводить к строке, чтобы его обратно распарсить в объект и пытаться из него что-то получить? Даже если ты пытался на самом деле получить не Spalte, а тест, то твой код превращается вот в такое:

Все. Никаких stringify и parse.

В-третьих, какое это отношение имеет к объекту timer?

Ты так и не ответил на главный вопрос: что является сутью затраченного времени и как его вычислить? Отвечаю: затраченное время - это разнича между стартом таймера и остановом его. То есть дельта Конечного времени и Начального. Это, наверно, первые классы средней школы. Так вот, что в объекте таймера является начальным и конечным временем? Отвечаю:

- Начальное время - свойство createdAt
- Конечное время - свойство stopedAt

То есть для того, чтобы рассчитать затраченное время, достаточно было вычесть большее из меньшего, то есть
const diff = timer.stopedAt - timer.createdAt;
Все! Вот тебе разница в миллисекундах (то есть в тысячных секунды).

Единственное, вот если ты так прям напишешь, то TS ругнется на то, что stopedAt может отсутствовать. Это и логично. Ведь текущий таймер, пока не остановлен, не имеет значения stopedAt. Оно появится когда его остановят. То есть конечный подсчет будет выглядеть так:
const diff = (timer.stopedAt || new Date()) - timer.createdAt;
То есть если время останова отсутствует, указываем текущее время актуальное, таким образом даже в текущем таймере мы посчитаем сколько времени затрачено конкретно на текущий момент.

Все. И diff будет иметь тип number, и его можно присваивать к totalTime. Что здесь не ясно? Как можно было усложнить такую простую задачу?

{moment .utc(moment(timer.stopedAt).diff(moment(timer.createdAt))) .format('HH:mm:ss')}
Хоть здесь и используются moment(), суть от этого не меняется. Все равно высчитывается разность этих двух полей.

Добавить комментарий