`@todo`

design phase
- #164
implementation phase
- #227
implement-test phase
components
- #224
- #225
- #226
ui elements
- #217
- #96
- #53

`@todo`

plan - add/edit - step: swarm key

`@todo`

plan - add/edit - step: input title

`@todo`

`@info`

Help mode in PLANS

v18-4

plan list

map

performance chart

actions example

Previous design

Plan summary list

Map

actions

`@todo`

`@info`

...

`@todo`

plan - add/edit - step: publish

`@todo`

user-switch-account-enter-password

`@todo`

design phase
- #135
implementation phase
- #177

`@todo`

`@info`

for PLANS

Sort by

Name
Feeds
Chunks
Price
Start date
End date
Data size
Location

for USER

Sort by

Id
Earned
Spent
Price
Newest timestamp
Oldest timestamp

for JOBS

Sort by

Id
Earned
Size
Newest timestamp
Oldest timestamp

`@todo`

plan - add/edit - step: data config - substep: schedule

`@todo`

[UI] Account action

No account

create new account
import account

Account created/imported

create new account
import account
transfer
edit account
remove account
switch accounts

`@todo`

`@info`

...

plan - add/edit - step: duration

`@todo`

plan - dashboard - performance chart

`@todo`

`@info`

Repo 📂

https://github.com/datdot-ui/icon

user - add new account - option

`@todo`

`@info`

Repo 📂

currently datepicker and calendar header are joined in one repo
https://github.com/datdotorg/datdot-ui-datepicker

map

Dark color - display how many data hosting nearby regions on map
White color - currently host region
Zoom in +
Zoom out -

plan - add/edit - step: data config - substep: select feeds & chunks

`@todo`

`@info`

Repo 📂

https://github.com/datdotorg/datdot-ui-button
https://github.com/datdot-ui/link

plan - add/edit - step: plan name

`@todo`

finish design
start implementing

`@todo`

user-add-new-account-import-account-account-information

`@todo`

user - add new account - create new account

`@todo`

plan - add/edit - step: data config

`@todo`

`@info`

THIS ELEMENT has been merged with the dropdown #71

// datdot-ui-filter
require('datdot-ui-button')

Repo 📂

https://github.com/datdot-ui/filter

for PLANS

Filter by

Name
Swarm
Feeds
Chunks
Price
Start date
End date
Data size
Location

Filter option

Repo

https://github.com/datdotorg/datdot-ui-filter-option

Important issue

string compare failed in Safari
From data entry

let optionList = { unchecked: [], checked: ['Available', 'Not available', 'Hypercore', 'Hyperdrive', 'Cabal']}

Option button

const option = filterOption({page, flow, name: 'filter-option', data: optionList.checked}, optionProtocol('filter-option'))

function optionProtocol (name) {
....
....
// get type 'unchecked' or 'checked' to check from and currentValue are equality.
if (type === 'unchecked') {
      // handle chekced status
      const result = optionList.checked.reduce( (acc, currentValue) => {
      if (from === currentValue) {
            const index = optionList.checked.indexOf(from)
            optionList.unchecked.push(from)
            optionList.checked.splice(index, 1)
      }
      acc = optionList.checked
      return acc
}, [])

if (type === 'checked') {
      // handle unchecked status
      const result = optionList.unchecked.reduce( (acc, currentValue) => {
      if (from === currentValue) {
            const index = optionList.unchecked.indexOf(from)
            optionList.checked.push(from)
            optionList.unchecked.splice(index, 1)
      }
      acc = optionList.checked
      return acc
}, [])

This code line is an issue to cause compare failed on Safari

from === currentValue

even change === to == is failed too

option == from

Chrome

Safari

Chrome result

Safari result

Even I do console.log(typeof from, typeof currentValue)
This is what've I got

I've tried many ways with different pattern in JavaScript

let optionList = { unchecked: [], checked: ['Available', 'Not available', 'Hypercore', 'Hyperdrive', 'Cabal']}
optionList.checked.findIndex( option => option === from ) // -1
optionList.splice( optionList.checked.indexOf(from), 1) // it is worked fine in Codepen.io

Solution

Refactor entry data structure

const data = [
        {id: 1, status: "Available", active: true}, 
        {id: 2, status: "Not available", active: false}, 
        {id: 3, status: "Hypercore", active: true},
        {id: 4, status: "Hyperdrive", active: false},
        {id: 5, status: "Cabal", active: true}
    ]

Use id to compare with button's index

src/index.js

// get lits
    optionListRender(data).then( buttons => {
        buttons.map( (item, i) => { 
            const li = bel`<li>${item}</li>`
            // need to set an id to button for toggle using, because Safari cannot compare body or from (string issue)
            item.setAttribute('id', i+1)
            optionList.append(li) 
        })
        return buttons
    })

make new function to toggle check

demo/demo.js

function actionToggleCheck (message) {
...
...
      data.map( item => { 
            // * better to use return item for add more conditions
            if (item.id === body ) item.active = !item.active 
            return item
        })

It is still failed when I refactored the data structure and test again via item.status and body

typeof item.status and typeof body are all string, somehow it is failed to compare string in Safari.
item.status.localeCompare(body) is also return -1, only 0 is matched

Conclusion

Use regex.test(string) to compare from existed array instead of comparing string by from to fix issue on Safari

let options = optionList.map( item => { 
    // * better to use return item for add more conditions
    if (item.id === body ) item.active = !item.active
    if (/^Available/.test(item.status) && item.active ) on = online(data)
    if (/^Not available/.test(item.status) && item.active ) off = offline(data)
    return item
}).map( item => {
    if (/core/i.test(item.status) && item.active) {
            let arr = data.filter( obj => /core/i.test(obj.type))
            return result.push(...arr)
    }
    if (/drive/i.test(item.status) && item.active) {
            let arr = data.filter( obj => /drive/i.test(obj.type)) 
            return result.push(...arr)
    }
    if (/cabal/i.test(item.status) && item.active) {
            let arr = data.filter( obj => /cabal/i.test(obj.type))
            return result.push(...arr)
    }
    return item
})

SCREEN: work

`@todo`

user - transfer

`@todo`

https://github.com/datdotorg/web-component-demo

[UI] Plan - plan list

Plan list

Plan card information

swarm identicon
plan status & plan name
account
payment total price
feeds
chunks & data size
start datetime
selected location
end datetime

Selected plan card

Plan action

play
pause
edit
remove

[UI] Month selector

`@todo`

`@info`

Repo

currently datepicker and calendar header are joined in one repo
https://github.com/datdotorg/datdot-ui-datepicker

datdot-webapp-components

`@todo`

`@info`

[UI] Plan - line chart

Line chart

actions
- hourly
- daily
- weekly
- yearly
line charts
chart label

plan - activity

`@todo`

user - transactions activity

`@todo`

SCREEN: apps

`@todo`

user-add-new-account-import-account

`@todo`

[UI] Tab

`@todo`

`@info`

Repo 📂

https://github.com/datdotorg/datdot-ui-tab

[UI] Range slider

`@todo`

`@info`

Repo 📂

https://github.com/datdotorg/datdot-ui-range-slider

Notes

(by @fionataeyang)

Slide range is part of performance form when the user needs to use slide range to select what the numbers they would be like to share via their computer. And slide range would be combined with number input together that it has a decimal.

user-add-new-account-prove-seed-phrase

`@todo`

user-add-new-account-seed phrase

`@todo`

plan - add/edit - step: data config - substep: location

`@todo`

user - add new account - make account

`@todo`

finish design
start implementing

[UI] Day selector - single

`@todo`

`@info`

Repo

https://github.com/datdotorg/datdot-ui-timeline-days

datdotorg / datdot-ui Goto Github PK

datdot-ui's People

Contributors

Stargazers

Watchers

Forkers

datdot-ui's Issues

@todo

@todo

@todo

@todo

@todo

@info

Help mode in PLANS

v18-4

plan list

map

performance chart

actions example

Previous design

Plan summary list

Map

Map

actions

@todo

@info

@todo

@todo

@todo

@todo

@todo

@info

for PLANS

for USER

for JOBS

@todo

@todo

No account

Account created/imported

@todo

@info

@todo

@todo

@todo

@info

Repo 📂

@todo

@todo

@info

Repo 📂

map

@todo

@todo

@info

Repo 📂

@todo

@todo

@todo

@todo

@todo

@todo

@todo

@todo

@todo

@info

Repo 📂

for PLANS

Filter option

Repo

Important issue

Chrome result

Safari result

Solution

Conclusion

@todo

@todo

Plan list

Plan card information

Selected plan card

@todo

`@todo`

`@todo`

`@todo`

`@todo`

`@todo`

`@info`

`@todo`

`@info`

`@todo`

`@todo`

`@todo`

`@todo`

`@todo`

`@info`

`@todo`

`@todo`

`@todo`

`@info`

`@todo`

`@todo`

`@todo`

`@info`

`@todo`

`@todo`

`@info`

`@todo`

`@todo`

`@info`

`@todo`

`@todo`

`@todo`

`@todo`

`@todo`

`@todo`

`@todo`

`@todo`

`@todo`

`@info`

`@todo`

`@todo`

`@todo`

`@info`

`@todo`

`@info`

`@todo`

`@todo`

`@todo`

`@todo`

`@todo`

`@info`

`@todo`

`@info`

`@todo`

`@todo`

`@todo`

`@todo`

`@todo`