Sapphire

I fixed saving data to the local storage. I tried to implement something to make the user input into the 'break for' and 'every' interval boxes remove any letters they input and only keep the numbers, however to due to how firefox and safari work (likely related to the Bugzilla link from the previous devlog) my method doesn't work on those browsers whereas chromium doesn't even need my method it just works. I just removed all of the code and added a text label to tell the user to only enter the number. The bug won't affect client server browser applications so I believe thats why it's marked as wontfix but for what I was trying to do implementing what I wanted seems impossible, I think Mozilla is trying to kill local only websites (running html css and js locally only not from a server or from static servers that only serve the files like GitHub pages) but I don't have the expertise to prove it but I am starting to believe that Chromium are actually the good guys. If it wasn't for them you would be able to make way more better programs that work without internet or from github pages and you wouldn't have to pay for server costs since github pages hosts the files for free. Reminder: Google pays Mozilla and owns a cloud server platform. My conspiracy theory is coming together... I hereby recommend Ungoogled-Chromium to anyone reading this

Now my program uses addEventListener instead of onchange but it didn't fix having to exit the textbox to update so I also made it constantly re run the script every 360ms as well which is indeed called debouncing. I tried some things to make it so they can only enter numbers in the minutes input boxes one of the worked. Well actually it works in chromium but not safari and firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1398528 status: wontfix ??? opened 8 years ago ???

Added error checking so it shows a comment if the break interval is longer than the every input, added type casting to the two inputs and added text to signify it should be in minutes, added some comments and todos and refactored code a bit, added a space between minutes and the text after it which shows the work amount.

Next i want to try the JS way to call the function that calculates the work interval, instead of using onchange in html since right now it only updates text after you exit the text box (shown in video) but I want it to be like password boxes on other websites, it updates live as you are still typing (with a small delay so it doesn't flicker as you are still making changes I think it's called debounce), also users can enter letters even though in the html I put type=number (which would work if I was using a server since it won't submit the form but this thats not how it works for how i'm doing it which is local js only and no backend code). Also I changed the live server extension settings to refresh the page when I save the files instead of on every change.

Made it so that when break length and every (how often the break should be) are entered or changes, it calculates and shows how long you will be working for to make it clear that the every input is the length including the break so for example every 60 minutes you will have a break for 10 minutes therefore you will be working for 50 minutes.

The goal right now is to get to a point where you can add that break and a 1 hour break every four hours at the same time so during the 3 hours of work you work in 3 50/10minutes sections but then take a long break for 1 hour which overrides the 50/10 timer (assuming0-8=sleep this leads to 10 hours of work and 6 hours of break spread out through the day for example to eat 3 meals and take a shower before bed during the 1 hour breaks and to stretch/exercise during the shorter breaks)

Also hopefully I will implement a feature to do a case opening for which stretch/exercise/activity you will be doing during your break (optional)

Made it so that the inputs from the add break form save to localStorage and they have ids based on the number of breaks that exist so they can be individually referenced but now I have to create logic to tell if a previous break has been delete

Removed some stuff because I realised I need to learn the JS basics so I can do what I want in my other project The White Room, but I was skipping ahead to the Canvas API and Trigonometry.

Added a canvas and white border to the canvas 500x500px to try draw an analogue clock using JS. Also removed the progress bars and just stored the time in variables instead

Can access submitted form data from JS (this example just prints them in console)

Now the progress bars update automatically. Shown: minute hand and second hand incrementing

Updated main.js so that the three progress parts are set to the current value on page refresh. Video shows me refreshing the page and the seconds hand progress bar updating

Set up live server, and split it into index.html, main.js and, styles.css.

Clicking the progress bars adds text to the end

Initial HTML file started, also made <body2> with a horizontal rule (<hr>) above it to test things out but it will be removed later

Tried to fix JS but failed and then just removed all JavaScript code from the template and going to work on a different project to increase my JavaScript power level

Added auto calculate details per 100g if serving unit is grams.

However when editing items it only works for the first item so I need to fix that, also the same issue with the serving units dropdown. JavaScript needs updating

Updated inventory to make it not show servings if there is 0 servings but now I realise that if you have 0 servings in your inventory that means you have none, so now items that are updated to have 0 servings are deleted from your inventory

rearranged add product and edit product forms to have serving first so that I can next implement automatically calculate calories and macros per 100g if serving size is grams, 50 Hours milestone

-Added more heading subtext to explain what each heading does and

-Made serving unit a dropdown with an option for other (and gram(s) and unit(s) and if it is other it adds a text box to enter a custom unit, this is so it knows when you used grams and all grams products have the same serving unit (the user might put g/gram/grams but all should be under one serving unit this way that does happen)

In the last devlog I forgot to mention I changed some headings (Add item template -> Save product), simpler to understand.

Fixed no store name yet to show unspecified instead of not having a heading.

Refactored some code and implemented Shopping List feature in full with quantity of that item the user prefers to purchase and display a total cost to by groceries at each store. WE ARE BACK IN BUSINESS (bug: if no name is set it should show unspecified but it shows no heading) GN!

Update read me to add a lot of to dos, now I can move on to refactoring my code

Updated edit food form to prefill values and to fix a spelling error.
README.md progress

Refactored code and removed some code the shopping list feature no longer works.

Worked on README to add some currently implemented features and some to be added features so that I know what I should be doing next after each feature is complete.

Also installed WakaTime extension for Figma to start planning how the pages will look I'll do this after all the backend features are finished and all the page elements are already on the front end

Plan:
- Finish updating README.md to be extremely detailed feature list and planned feature list
- Final code refactor
- Start implementing all the features in the readme
- Once done, start working in Figma to make every page's completed designs
- Implement CSS and update HTML in a way that different stylesheets can be added then start just working through every feature in order
- Share program with Slack #the-white-room to get feedback for changes or different stylesheets
- Update program
- Ship

Added a planned quantity to purchase and made it so that shopping list is seperated by store name and total cost for buying the shopping list is calculated, however the form to update quantity doesn't work yet

I used some AI for the features in this devlog but I am not happy with the outcome, I am going to remove a lot of code tomorrow and then re implement these same features, using AI kills the joy of programming this project for me and made me restart it last time when i tried making it in electron I'm going to make sure all my code is commented and i'm going to research software development methodologies and project management instead of a todo.md and doing random stuff using AI i'm going to make a proper plan for this project and do it right and end up with a high quality code base that supports hacking (modifications by the user to make it work how they want it to work) as it will be easy to understand thanks to the comments.

TODO you don't have to read this part:

remove slop code, research software development methodologies and project planning methods, pick my methods, read all my code again and comment it and actually understand it the make my plan and just start following the plan

Made it so that price per serving is calculated automatically is price per item and servings per item is available and save it rounded to 2 decimal places (like money) and display it in shopping list if items are out of stock

Fixed logic error where some rows in DB weren't being deleted and it was affecting/effecting which locations were displayed as having items even though there was no items a h3 was shown with a location name.

Update the shopping list item templating loop to fix it showing purchase location even if it wasn't said refer to 3 examples in image

Updated the kitchen inventory to add support for price per item (like one barcode scan at the shop) and servings per item (how many servings you get when you buy pay for one item) and this can also be used to calculate price per serving to fill it in for you but it doesn't do that yet, I also added it to show these two pieces of data if the item template is in your shopping list and what store you buy it from (as well as it's name) and I want to do this to add shopping lists to be sorted by store name and then show the total bill per store to buy all those items and the total for all stores, in the future this could also allow a feature which allows you to plan recipes in advance which will be able to calculate total cost for groceries and eaten calories and macros in advance

did a lot of other stuff, i should've been adding more dev logs because I don't remember everything but I removed some css to make it more minimal again even though it isn't dark mode anymore but that makes more sense since it is called the WHITE room after all, I also made my code more organised and neater and added comments to make it easier to hide indented sections when i'm not working on them so I can easily find code, I also tried to implement something but then removed all of it's code and am going to try again later

im going to add all these ideas to the TODO.md file now

I added the shopping list feature as well as price per item and servings per item as most products contain multiple servings, and the user wants to know that more as that is what they will see in the store. Trying macOS and ungoogled-chromium (and using VSCodium instead of VSCode)

Added temporary CSS for items that are expired and to make tools a different colour and corrected the order that items are sorted by to make it ingredients with the oldest use by date's first and then tools also sorted by use by date so tools are at the end.

Added location to items that exist so you know where to find them and displayed them by location and add location to edit and add item to inventory forms and backend code to make it actually save and fetch data from the database.

Added edit inventory item button
Added delete inventory item button
Fixed add item to inventory form to allow serving size to be a float (1dp)

Fixed edit food form in food diary page, and also the totals widget to make progress bars hidden if the user doesn't have a goal for them.

Just renamed secret.md to TODO.md and it's icon changed in VSCode that's cool
Edited TODO.md a bit, now its bed time though

Added music to Food Diary and Inventory page
Added music to Tasks page, it's otherwise empty
Added edit item template and delete item template forms and buttons that work with code in backend to execute the SQLite commands for them

not shown in video: delete item template button, it does work

Removed a comment for an error I fixed before
Added some temporary CSS dark mode for evening/night time development.
Work on secret.md (planning and todo), figured out what's missing from Kitchen Inventory page (apart from CSS)

Added buttons to toggle the two forms on the Kitchen Inventory page and make them hidden by default

Made it so that food items show up first in the current inventory list
made it so that tools shows with a different background colour
Made the start of a readme.md file
updated to do lists and added some comments

Wrote some planned future features for food diary in secret.md and cleaned it up a bit it helps keep me organised,
then I updated the schema and started adding the route for /food/inventory and it's template which now contains the form to add item templates as well as instances of items to inventory,
and display a list of items in inventory and their number of servings and useby date if it has one
I also changed three icons to different placeholders

I need to add way more stuff

Added quantity input for form that works in back end to and it makes you round to 1 decimal place. This is so perfect!

I think food diary is almost done I will try to brain storm any missing ideas for later but start work on the kitchen inventory system for now since some of it's features are prerequisites for food diary's advanced features.

Added the delete meal and edit meal buttons and made them work in backend too.

Pure white beauty, it works. You can now edit and delete added foods. I just need to add edit and delete buttons to the meals to change their name or if more than one meal exists to delete meals, and a quantity input when adding a food, so you can input the values of one egg for example but then put quantity 3 to save the values for 3 eggs

Water tracker works now and I think I did other stuff too but I don't remember
good night
To-do:
-buttons to edit and delete meals and food entries,
-quantity button when adding food to multiply inputs,

The widget showing the totals works
The add meal button works
The add food button works
The program correctly calculates and displays the total calories and macros and water

I just need a way to:
-add and subtract from the daily water value,
-buttons to edit and delete meals and food entries,
-quantity button when adding food to multiply inputs,

Hid the three buttons that don't do anything yet.
Brang back progress bars widget but now it uses the user's actual data for water need to add the backend code for calories and macros.
Added a lot of backend code added to get data and pass it to the food diary front end.
Updated db schema.

Removed old dev logs from planning stage and trying mid-lectron and mid-ri (tauri) and trying to do it all in a single html file (sadly not possible unless I use IndexedDB instead of SQLite, in which case it won't be portable whereas now you can just copy and paste the database.db to a new device or to back up the file)

The add meal button works now but the add food doesn't do anything yet
Now I will make the add food button show a form and then make it save to db

The back end now passes the meal names to the front end and shows them in a div with id = their mealID. (passed to front end: todaysMealIDs, todaysMealNames, allEatenFoods)
Now I need to:
- Make the add meal button save a new meal to database and reload the page
- Add an Add Food button and form that saves the eaten food to database under the correct meal ID and then reload the page
- Show eaten foods under the correct meal name
- Fix the widget that is currently hidden so that it uses the database values to calculate the progress bars for calories and macros and water

Finished the back end code to get the required data from the database but now I need to update the front end to have forms to upload and remove from db and then back end to save the data in front end forms.

Update the progress bars, they will now show how much you've had and if you have a target set it will also show a progress bar. Currently no CSS and it doesn't read from the database it is just a dictionary with imaginary values.

Updated setup page and settings page to add new inputs and to make the settings page to allow you to change your initial inputs from the setup page which opened the first time you opened the app.

Updated backend database creation code as well as added a new settings button in the frontend, it has the same placeholder image as the other hyperlinks in the dashboard page.

Finished planning and then adding the tables into SQL.
Added placeholder images for dashboard icons.
I just need to add the forms in frontend and then add backend code to save submitted data from those forms to the correct tables.

(schema in image is wrong)

Figured out what to do next:
finish updating the init db function to add the new tables after I finish planning the schema,
then add the forms to input the values to them,
then make a function that stores all relevant data from db in a dictionary so I can easily pass it to the html template

For this devlog I added some progress bars and passes the calorie values for the bar as a dictionary from python, I commented the other bars for macros.

Added this minimal css and in the backend trying to add more tables to the database but struggling, I'm going to plan the schema in markdown and then implement it today

Making very good progress with flask. I have added a base template html, a login page which saves the user name to the database as well as a dashboard page which has 10 image hyperlinks that will be app icons for the 10 planned features currently no icons have been made. As shown in the video there is also logic to make sure the user doesn't add extra user's to the database and redirects to the dashboard if they have already completed setup. I should've used flask from the start

I have decided to cease development of this project and re-make it but as a website not an electron app and without using AI and add comments in my code and links to documentation because using Claude to do like half the project made it no fun and I don't understand the code and it doesn't support BSDs whereas a website version would. It still works it just doesn't have all the features I planned on but all the most important base features are here.

Added quantity so you can input the stats of an item once but you can add multiple of that item. Added serving size and serving unit fields for food and also each time you add a food it saves to the database and when entering the food name it shows a list of those foods and if you select them it automatically fills their information for you. Also added Price and Store fields which will also be saved, this is in preparation for a future feature where you can have saved recipes and meals and a shopping list and inventory management system for your kitchen so you know what dishes you can make and make it easy to add dishes you frequently make the same way to your eaten food for the day. You can also add purchase data and use by date to remind you to use certain ingredients/foods and perhaps implement an LLM that can see what foods you have in stock and their use by dates AND your calorie and macro targets and since it has the foods macros and calories it can write you the whole recipe in the exact way to aim for your targets and you just follow the recipe.

Not shown in image:
- View charts page where you can track weight, bodyfat percentage and grip strength (lbs) and it makes graphs of them over time and you can even add backdated data points as well as edit data points and delete them.

• The setup button goes back to the initial page where the program used to start. Now if you are new it still starts there first but otherwise it loads straight to tracking.html and you have to press that button to change your goals.

I am happy with the progress but this time I used Claude 4 Sonnet and it literally did everything in just a few prompts and well it was very impressive but very boring so from now on I want to use less/no AI when coding and just want to get this project complete and do something else instead and not use electron next time.

Uses SQLite instead of local storage and updated the tracking page, not done yet just some updates to tracking page left and a charts page to visualise saved tracked data. Very happy with progress

Slight changes in HTML/CSS and removed all JS and trying to setup SQLite but I am struggling

Initialised the project and set up some basic HTML, CSS and JS to have the setup page when the user first opens the program to input their current stats and their current calorie and macro targets.

Added readme which includes build instructions for all 3 platforms and a releases .deb file for Debian based Linux users to be able to easily demo the program

Devlog was broken so I have a lot of changes in one devlog, not my fault:

Added anti-css.
Added 8 buttons, one of which is randomly picked to actually worked the other eight are fake.
(The button takes you to the tasks page)
Added tasks page which has a modal where you can add a task
Tasks are saved to local storage
Tasks are part on an unordered list <ul>
Added done task button that has an demotivating message
Added productivity meter that will never go above 3%
Added back button to go back to the start page
Added ugly hard to read heading that says statistically you won't do most of these

Final update

Complete

Completed electron tutorial and made an simple HTML page show up, emojis don't render.