Update to Vue3

[Bouni]

As Vue2 is in maintainance mode, it would be a good idea to update to Vue3 (despite I've never done that before and have no idea how much pain that is 😅)

[ModischFabrications]

Same problem here... I migrated to Svelte for the next project and didn't work with Vue again afterwards.
If I remember correctly there should me a migration tool, might be worth checking that one out. Probably won't fix everything, but it's a start.

[Bouni]

Yes, you're right, ther's a migration tool. I already watched a youtube video about it and it seems not all to hard to do.
I've never used svelte but have a few side projects done with vue3 and I really like it so far.
Is Svelte better that Vue?

[ModischFabrications]

Good question, better ask someone that knows vue better than me :D For me the workflow seems a bit better developed and more robust, especially with the full integration of sveltekit, but you do get fewer add-ons.

[Bouni]

I did some tests and its more of a pain in the rear than I expected. A lot of dependecies that require vue2 and do not have a suitable vue3 package. Especially the vue-bootstrap package (there's vue-bootstrap-next but its not production ready ....)

The frontend is not too complicated, so how do you like the idea of a complete rewrite in vue3 + vite + a nice frontend framework?

I always wanted to do a project with Naiveui

Let me know what you think about such a rewrite

[ModischFabrications]

Damn, too bad, guess we are stuck with Vue 2 then for the current development.
Not sure about the amount of work needed. I don't have much time, but you are obviously very welcome to contribute to the project. I'm open to new frontends, couldn't hurt to have an alternative. Do you want to do it here "in place" or start a completely fresh project?

[Bouni]

I'm not sure what way to go to be honest. I looked into naiveui a bit more and it seem a bit heavy for such a small project.
Maybe plain tailwindcss or something simmilar would absolutely sufficient!?

I guess I do a quick experiment in a branch and see if this works out.

Do you have anything you defenitely want to keep as it is now? These are the things I would like to change:

• vue2 -> vue3
• npm -> pnpm (way faster)
• vue-cli -> vite (also much faster)
• pinia (having a store could help with caching Offline cache #53)

[ModischFabrications]

Sorry, missed your question here during the deployments.

I heard good things of both pnpm and vite and vue3 is obvious, so no protest from me there. pinia I know nothing about, but I can't argue with the results if it works.

For "looks" I'm happy tailwind, I'm currently evaluating it in another private project and it seems easier than raw CSS while staying very flexible. I'm also open to more opiniated frameworks like https://daisyui.com/ , which could make it even easier, because there is little "new" styling needed here.

[Bouni]

Uhh, never heared of DaisyUI before but it looks very nice and lightweight 🤩
I did a few experiments with primevue/talwind and its not very intuitive so I probably do a new attempt with DaisyUI then.
But as always, this will take some time (kids take a lot of my spare time 😅)

[ModischFabrications]

No hurry, the current release seems stable :)

…

On Mon, 5 Feb 2024, 13:22 bouni, ***@***.***> wrote: Uhh, never heared of DaisyUI before but it looks very nice and lightweight 🤩 I did a few experiments with primevue/talwind and its not very intuitive so I probably do a new attempt with DaisyUI then. But as always, this will take some time (kids take a lot of my spare time 😅) — Reply to this email directly, view it on GitHub <#65 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGB2KOA7VPAO2ZA3GA2JBR3YSDFJ3AVCNFSM6AAAAABCIWPTE2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRWHA3TINRQGQ> . You are receiving this because you commented.Message ID: ***@***.***>

[Bouni]

I have a early draft (just a design skeleton, no functionality yet),

[ModischFabrications]

Great progress 👍🏻
My initial concerns:
Kerf: Tooltips or a small (i) might be better than the text preview, I would keep a sensible preset.
The new row should probably also be separated a bit better, I noticed that my way of building it inside the table is difficult to implement.
The solve button should probably also be larger.

Feel free to experiment with the layout, I can't say that my initial draft of the UI is great.

Adding import & export buttons might be useful as well.

[Bouni]

Yes, I noticed that but as I said this is more of a quick shot to see if Tailwind/DaisyUI feels right (and it does 😄 )

I'll post more screenshots as I progress. feel free to give thoughts so that we end up with a equaly godd or better UI than the current one!

Import/export is already on the list.

[Bouni]

Ok, I have a first version up and running that includes import of CSV data, export to PDF and export to CSV 🥳

This is imported from CSV:

Thats the Result:

That's what the exported CSV looks like: (Not ideal as it does not include the names but I strugle to find a good way to include that in an CSV ....)

An this is the exported PDF:

I plan to allow the user to include some metadata, such as project name, stock name and maybe some calculatiosn such as used material, efficency ...

That will then also be shown in the PDF (not sure how to put that into the CSV to be honest)

[ModischFabrications]

Great progress, I like the new layout! Colors are a bit muted and the low contrast for the text makes it a bit difficult to read, but that's something for a final pass at the end.

The import button might be better placed above, it's easy to mistake for an export. Putting the input over the table would also give a better reading direction now that I think about it.

Putting the names into the CSV is not that important. Human users will use the PDF anyway, I'm not actually sure what the use case for that one is.

More stats for the result is a good idea, but I'm not sure how big the impact for a user is. I thought about listing the cutoffs before, but I never really had a use for that.

I guess the PDF can be a simple copy of the output segment for now. Another idea might be to export something like a measurement list with the sums, so a user can mark the whole bar at once and cut sequentially. Not sure how the results can be used best, need to think about it.
Additional info should at least be a date and name/link to the tool. Name and author for the PDF could be requested in a simple popup, do check if/what the export lib writes into the PDF metadata.

[ModischFabrications]

Oh, and something to think about: I feel like the solver backend functionality could be implemented within the frontend with little effort and similar performance. Using something closer to the metal like web workers would probably beat it, but I haven't done something like that yet. Multi-threading will probably be a deciding factor.

This would decrease the complexity massively and allow hosting as a static page without any external dependencies. This could also enable usage as a SPA/PWA to be used offline. At first development I actually thought about building a native app but decided against it, but something like this should work everywhere without additional effort.