Weight x time or distance

package.json

@@ -41,6 +41,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-sizeme": "^3.0.1",
+    "react-text-tokenizer": "^1.0.3",
     "recharts": "^2.1.2",
     "semver": "^7.3.2",
     "source-map-explorer": "^2.5.2",

public/changelog.txt

@@ -1,3 +1,12 @@
+- 2.27.0 : 2024-03-14
+        + !! Added posibility to log Distance & Time !!
+        * suggested by @recuna NEW importer: progressionapp
+        * fixed responsivness of importer's table on smaller screens
+        * fixed hevyapp & strongapp importers to use this new format 
+        * improve journal save operation ui feedback
+        * added "no content" ui if jrange has no weight x reps data.
+        * lots of other tweaks and fixed I found during the development of the new format.
+
 - 2.26.7 : 2024-03-06
         * Round estimated values (~1RMs and Unit change) to nearest multiple of 5.
         * for SBD Rank, calculate 1RM using the same formula as the server, since it gives more realistic estimations.

public/faq.json

@@ -62,7 +62,7 @@
     },
     {
         "q":"¿How do I log cardio?", 
-        "a":"You can use @[shortcut:user-tags:custom user tags]. On a new line in your log, type the @ symbol, followed by the name of the tag then \":\" and the value."
+        "a":"You do it the same way you log an exercise. Type the name of the exercise prefixed by the # symbol and on a new line type the time and optionally a comment. Like so:<br/><pre>#Static bike\n10min just a quick session\n</pre><br/>The format for the time is the same as the values admited by duration @[shortcut:user tags]"
     },
     {
         "q":"Custom user tags", 

src/App.js

@@ -51,6 +51,7 @@ import { FollowOnX } from './componentes/twitter';
 import { VisualPreferencesSwitcher } from './componentes/VisualPreferencesSwitcher';
 import { SwipeableDrawer } from './componentes/SwipableDrawer';
 import { ServiceWorkerStatusDisplay } from './componentes/service-worker-status-ui';
+import GitHubButton from 'react-github-btn'
 
 window.fetch = (url, config)=>{
     return fetchPolyfill(url, config)
@@ -80,6 +81,7 @@ const DonatePage = lazy(()=>import(/*webpackChunkName: "donate" */"./pages/Donat
 const AboutPage = lazy(()=>import(/*webpackChunkName: "about" */"./pages/AboutPage"))  
 const JournalSideBar = lazy(() => import(/* webpackChunkName: "jbase" */'./componentes/journal/side-bar.js'));
 const VideosPage = lazy(() => import(/* webpackChunkName: "videos" */'./pages/Videos')); 
+const PersonalRecordsPage = lazy(() => import(/* webpackChunkName: "personal-records" */'./pages/PersonalRecords'));
 
 /**
  * Utility... creates a basic layout.
@@ -91,61 +93,14 @@ const useStyles = makeStyles( theme=>({
     root: { 
             display:"block", 
 
-    }, 
-
-    // menubar: {
-    //     width:80,
-    //     position:"fixed",
-    //     zIndex:1, 
-    //     minHeight:"100vh",
-    //     marginLeft:-80,
-    //     transition:"margin-left .1s ease-out",
-    //     display:"flex",
-    //     justifyContent:"center",
-    //     background:theme.palette.background.default,
-    //     borderRight:"2px solid #333",
-
-    //     "&.opened": {
-    //         marginLeft:0
-    //     },
-    // },  
-
-    // sidebar: {
-    //     width:300, 
-    //     position:"fixed",
-    //     zIndex:1,
-    //     top:0,
-    //     right:0,
-    //     marginRight:-300,
-    //     minHeight:"100vh", 
-    //     background:theme.palette.background.default,
-    //     transition:"margin-right .1s ease-out",
-    //     borderLeft:"2px solid #333",
-    //     "&.opened": {
-    //         marginRight:0
-    //     },
-    // },
-
-
+    },   
 
 
     [ theme.breakpoints.up("lg") ]: {
         root: {
             display:"grid",
             gridTemplateColumns:"1fr 3fr 1fr"
-        },
-        // menubar: { 
-        //     position:"relative", 
-        //     width:"100%",
-        //     marginLeft:0, 
-        //     justifyContent:"end",
-        //     borderRight:"none"
-        // },
-        // sidebar: {
-        //     position:"relative",
-        //     width:"100%",
-        //     borderLeft:"none"
-        // },
+        }, 
         content: {
             borderRight:"1px solid rgba(0,0,0,0.1)",
             borderLeft:"1px solid rgba(0,0,0,0.1)"
@@ -181,57 +136,13 @@ function App() {
                 <DMsWindow/>
                 <ExercisesModal/> 
                 <TrackPageView/>
-
-                {/* <Router> 
-                <NavBar />  
-                <GLobalNotificationSpace />
-                <Home/>
-
-
-                <Route path="/" component={TrackPageView}/>
 
-                <Suspense fallback={<LinearProgress />}>
-                    <Switch> 
-                        <Route path="/settings" component={SettingsPage} />
-                        <Route path="/color" component={ColorThemePage} /> 
-                        <Route path="/about" component={AboutPage}/> 
-
-                        <Route path="/videos" component={VideosPage}/> 
-                        <Route path="/faq" component={HelpPage}/> 
-                        <Route path="/terms-of-service" component={TermsOfServicePage}/> 
-                        <Route path="/privacy-policy" component={PrivacyPolicyPage}/> 
-                        <Route path="/donate" component={DonatePage}/> 
-                        <Route path="/signup" component={SignupPage}/>
-                        <Route path="/login" component={LoginPage}/>
-                        <Route path="/community-stats/:filtermask([\w-]+)?" component={CommunityStats} />   
-                        <Route path="/journal/:uname" component={JournalBase} />  
-                        <Route path="/changelog" component={ChangelogPage} />   
-                        <Route path="/sbd-stats" component={SBDStatsPage} />
-
-                        <Route path="/following">
-                            <MainBanner/>
-                            <ActivityFeed type="following" />
-                        </Route>
-
-                        <Route path="/">
-                            <MainBanner/>
-                            <GuestLandingPage/>
-                            <Home activator/>  
-                        </Route>
-                    </Switch>
-                </Suspense> 
-
-
-            </Router>   
-
-            */}
                 <div className={ cls.root }>
                     <div className={ cls.menubar }>  
                             <MainMenuDrawer/>
                     </div>
 
-                    <div className={ cls.content }> 
-
+                    <div className={ cls.content }>  
                             {/* <Home /> */}
                             <Suspense fallback={<LinearProgress />}>
                                 <Switch>
@@ -251,7 +162,8 @@ function App() {
                                     <RoutePage path="/settings" sessionOnly  component={SettingsPage} Icon={SettingsIcon} title="Settings"/>
                                     <RoutePage path="/messages" sessionOnly component={PageMessages} />
                                     <RoutePage path="/notifications" sessionOnly component={PageNotifications} /> 
-                                    <RoutePage path="/changelog" component={ChangelogPage} title="Changelog" Icon={ScheduleRoundedIcon}/>  
+                                    <RoutePage path="/changelog" component={ChangelogPage} title="Changelog" Icon={ScheduleRoundedIcon}/>
+                                    <Route path="/journal/:uname/personal-records--:eid(\d+)" component={PersonalRecordsPage}/>
                                     <Route path="/journal/:uname" component={JournalBase} /> 
                                     {/* <RoutePage path="/color" sessionOnly component={ColorThemePage} title={false}/>  */}
                                     <Route path="/terms-of-service" component={TermsOfServicePage}/> 
@@ -311,7 +223,11 @@ const AppSideBar = ()=>{
                             </Box>
 
                             <Box padding={1} paddingTop={5} textAlign="center" maxWidth={250}>
-                                <FollowOnX/>
+
+                                <div style={{ display:"flex", justifyContent:"center"}}>
+                                    <FollowOnX/> &nbsp;
+                                    <GitHubButton href="https://github.com/bandinopla/weightxreps-client" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star bandinopla/weightxreps-client on GitHub">Star</GitHubButton>
+                                </div>
                                 <Typography variant="caption">
                                     <a href="/changelog"><strong>{`v${metadata.buildMajor}.${metadata.buildMinor}.${metadata.buildRevision} `}</strong> (<TimeAgoDisplay time={metadata.when} />)</a>
                                     &nbsp;&nbsp;| <a href="/terms-of-service">Terms</a> | <a href="/privacy-policy">Privacy</a>

src/codemirror/LogTextEditor.js

@@ -12,6 +12,7 @@ import { TAG_STYLES } from "./tag-parsing";
 import { TAG_START_OF_DEFINITION_REGEXP } from "../user-tags/data-types";
 import Fuse from 'fuse.js';
 import { JLogTokenizer } from "../componentes/journal/tokenizer";
+import { WxDoT_JeditorErow2Text } from "../componentes/journal/erow-render-WxDoT";
 const searcher = new Fuse([], { findAllMatches:true })
 
 require('codemirror/addon/hint/show-hint');
@@ -73,6 +74,12 @@ const useStyles = makeStyles( theme=>({
         "& .cm-weight": {
             color:"#FF7900"
         },
+        "& .cm-time": {
+            color:"#B5942F"
+        },
+        "& .cm-distance": {
+            color:"#FF59C3"
+        },
 
         "& .cm-rep": {
             color:"#00BBF9"
@@ -82,6 +89,12 @@ const useStyles = makeStyles( theme=>({
             color:"#F15BB5"
         },
 
+        "& .cm-setComment": {
+            color:"#359FF4",
+            fontStyle:"italic",
+            backgroundColor:"#E8F4FD"
+        },
+
         "& .cm-RPE": { 
             color:"#40916c", 
             textShadow:"1px 1px #ccc"
@@ -501,6 +514,12 @@ const __convertJEditorDataToText = (value, usekg, utags) => {
                         //
                         .reduce( (out,set)=>{ 
 
+                            if( set.type!=0 )
+                            {
+                                out.push( set );
+                                return out;
+                            }
+
                             var prev                = out.slice(-1)?.[0];
                             var prevSet             = prev?.sameWeight?.slice(-1)[0] || prev?.sameRep?.slice(-1)[0] || prev; 
                             var prevIsCompressed    = Array.isArray( prev?.sameWeight || prev?.sameRep );
@@ -576,15 +595,18 @@ const __convertJEditorDataToText = (value, usekg, utags) => {
                             }
 
                             return out; 
-                        } ,[])
+                        } ,[])  
 
                         //
                         // render...
                         //
                         .forEach( set=> {
-
-
-                            //console.log("********",set)
+
+                            if( set.type>0 )
+                            {
+                                out.push( (set.v? _setToString(set, usekg) + " x " : "") + WxDoT_JeditorErow2Text( set ))
+                                return;
+                            }
 
                             //
                             // nos fijamos si es una version "W,W,W" o solo "W"

src/codemirror/tag-parsing.js

@@ -217,7 +217,8 @@ export const TAG_CODEMIRROR_TOKENS = config => ({
                     line:stream.lineOracle.line,
                     from: 0,
                     to: stream.string.length,
-                    message:"Invalid format, expecting something like: tag name:123 "
+                    message:"Invalid custom tag format, expecting something like: @ tagName : 123 ",
+                    errorLine: stream.string
                 });
 
                 state.lastEblock    = null;

src/componentes/ContentPageWrapper.js

@@ -42,7 +42,7 @@ export const ContentPage = (props) => {
 /** 
  * @param {ContentPageProps} param0  
  */
-const PageLayout = ({ title, Icon, Child, ...rest }) => {
+export const PageLayout = ({ title, Icon, Child, ...rest }) => {
 
     let location = useLocation(); 
     let menuItem = MENU.findLast( (m,i)=>m.goto?.length>1 && location.pathname.indexOf( m.goto )==0 );
@@ -65,6 +65,6 @@ const PageLayout = ({ title, Icon, Child, ...rest }) => {
         <Box padding={2} borderBottom="1px dashed #444" >
             <Typography variant="h4">{ Icon && <Icon /> } {title ?? "???"}</Typography>
         </Box> 
-        <Child {...rest}/>
+        { Child ? <Child {...rest}/> : rest.children }
     </>
 }

src/componentes/barra-canvas.js

@@ -190,7 +190,7 @@ export function CanvasBar({ weight, reps, FallbackTo }) {
 
         metrics.plateX = metrics.barStart;  
 
-        drawPlatesForWeight(ctx, metrics, weight, isDarkMode? "#000" : reps===0? "#f00" : null );
+        drawPlatesForWeight(ctx, metrics, weight, isDarkMode? "#111" : reps===0? "#f00" : null );
 
         //#region Reps Label
         const lbl = reps===0? ":(" : reps>1? "x"+reps.toString() : null;
@@ -217,5 +217,5 @@ export function CanvasBar({ weight, reps, FallbackTo }) {
         return <FallbackTo weight={weight} reps={reps}/>
     }
 
-    return <canvas width="138" height="25" ref={ref} style={{maxWidth:"100%"}}></canvas>;
+    return <canvas width="138" height="25" ref={ref} style={{maxWidth:"100%", opacity:!weight || weight<20?0.3:1}}></canvas>;
 }

src/componentes/barras.js

@@ -12,7 +12,7 @@ function BarraOld({ weight, reps }) {
         return <><img src={FireIcon} style={{maxWidth:12}}/> <strong>A LOT</strong> <img src={FireIcon}style={{maxWidth:12}}/></>;
     }
 
-    return <i className={"bar i"+n} style={{ backgroundImage:"url("+flags_img_src+")", opacity:n<0?0.5:1 }}>
+    return <i className={"bar i"+n} style={{ backgroundImage:"url("+flags_img_src+")", opacity:weight<20?0.5:1 }}>
         { reps && <b style={{backgroundColor:"rgba(0,0,0,0.5)", color:"white", padding:4}}>x{reps}</b>}</i>
 }  
 

src/componentes/calendario.js

@@ -317,7 +317,7 @@ export default function({ ymd, rangeHighlight, widthInWeeks, onClickDay }) {
 
 
 
-export function CalendarGrid({ data, hasMoved, weeks, days, onClickMove, onClick, FDOW, onChangeFDOW }) {
+export function CalendarGrid({ data, hasMoved, weeks, days, onClickMove, onClick, FDOW, onChangeFDOW, cantSelectIfNoData }) {
 
     const classes = useStyles();
 
@@ -408,7 +408,7 @@ export function CalendarGrid({ data, hasMoved, weeks, days, onClickMove, onClick
                 </div>
 
                 { new Array(weeks).fill(0).map( (_,week_i)=>(<div key={"week"+week_i} style={{width:w+"%"}}>
-                    { new Array(days).fill(0).map( (_,day_i)=>(<div key={"day"+day_i} style={{paddingBottom:1, paddingRight:1}}><Cell {...data[d++]} onClick={onClick} /></div>) ) }    
+                    { new Array(days).fill(0).map( (_,day_i)=>(<div key={"day"+day_i} style={{paddingBottom:1, paddingRight:1}}><Cell {...data[d++]} onClick={onClick} cantSelectIfNoData={cantSelectIfNoData}/></div>) ) }    
                 </div>) ) }
 
                 <div className={classes.menu}>
@@ -426,9 +426,9 @@ export function CalendarGrid({ data, hasMoved, weeks, days, onClickMove, onClick
 }
 
 
-const Cell = ({ ymd, hasData, num, month, pinned, highlighted, onClick })=>(
+const Cell = ({ ymd, hasData, num, month, pinned, highlighted, onClick, cantSelectIfNoData })=>(
     //onClick(ymd)
-    <ButtonBase key={ymd} focusRipple onClick={()=>onClick(ymd, hasData)} className={"cell m"+(month%2)+" " + ( hasData && "hasData")+" "+(pinned && " pinned")+" "+(highlighted && " highlighted") }>
+    <ButtonBase key={ymd} disabled={cantSelectIfNoData && !hasData} focusRipple onClick={()=>onClick(ymd, hasData)} className={"cell m"+(month%2)+" " + ( hasData && "hasData")+" "+(pinned && " pinned")+" "+(highlighted && " highlighted") }>
          {num} 
     </ButtonBase>);