[Feature] Trades spreadsheet linked to each user

Intro (current state)

We have a development in progress that was shared by @pacman, which we put on hold to prioritize the general foundation, organization, and development of our data.

That spreadsheet could be linked to our data in Budibase or a similar tool (preferably self-hosted) to mix the info directly with the community profiles.

What are we looking for?

The spreadsheet should update automatically in Budibase or a similar application, which would also allow us to work with our own DBs (Postgres).

Data to get started

https://docs.budibase.com/docs/docker-compose

It is very simple to install with Docker Compose; it installs everything at once, and at most, you will need to edit the proxy if you use one.

github.com/somos-criptonautas/mytrades

With more info in the repository and @pacman who will be able to answer questions and send upgrades from this post :slight_smile:

2 Likes

Perdón por la demora, sí cualquier consulta es bienvenida, el mismo esta realizado en vuejs, quedo en stand by por el motivo que comenta @satonotdead , la verdad que se podría haber realizado en reactjs o mismo javascript puro también, pero bueno no me considero experto en ninguna de las 2, soy un mero entusiasta en la materia (vuejs y reactjs). En principio la info se guarda en su navegador y por lo que recuerdo quedo el tema de cálculos pendientes para el caso (utils/calcOPM), que como se ve están en archivos independientes, mismo alguien que no sepa javascript lo puede interpretar y compartir.

Abrazo.

2 Likes

Qué haría falta para sacarlo de Vue y trasladarlo a Javascript? Hay herramientas para hacerlo de manera relativamente automática?

La base de Criptonautas intenta estar cerca de lo más moderno, privado y desarrollado a nivel “comunidad”. Y ahí veo que los frameworks sobre Javascript tienen un chingo más de support.

Desde ya que la base suma muchĂ­simo! Pero toca continuar, para que tenga cercanĂ­a con nuestra realidad actual.

Si eso lo que tiene de malo de usar un framework o librería, quedas atado a su metodología, nose con exactitud si hay algo como para pasarlo a javascript puro, pero viendo el código no debería ser mucho lio armarlo, luego me fijo bien, de basé seria javascript puro con css puro o seguir usando bootstrap como css base ¿? Entendería que css puro pero usando bootstrap no es tan intrusivo ya que se usan clases que se asignan en el html nada mas, el dia de mañana se pueden cambiar por unas propias.

Javascript y CCS estarĂ­a bien, porque no tenemos nada en Boostrap (y casi todo migrĂł para Tailwind pero tienen muchas clases que no se usan y sobre-carga todo de gusto).

Si querés empezar con el CSS, podés tomar la base desde acá:

Y de paso esto puede ser Ăştil para el resto del cĂłdigo:

1 Like

We have added a simple tool that might help:

https://ai-code-translator.vercel.app/

Thanks! In principle, I was thinking of building it from scratch, maybe I’ll reuse the existing pure JavaScript code. Since I’m not using Bootstrap and instead using CSS for responsiveness (I’ll also add the CSS you sent me), I need to take a good look at it and implement a save option right from the start, because the last time I made it with multiple options, it got complicated. I’ll just use what you sent me and that’s it. I’m figuring out how to approach it—whether to keep everything on one page or separate each screen into different HTML files. I looked into making it a PWA so it can be installed, and for anyone interested, this link explains that methodology/pattern: https://web.dev/learn/pwa/

1 Like

I’ve started working on it. Basically, I’m going to use Bootstrap without JS, and once I have that set, I’ll rename the CSS classes by adding -custom so it’s easier to adapt later; otherwise, I’ll spend more time on CSS and HTML than on adding the pure JavaScript.

As for the data, I’ll see about saving it in the browser’s localStorage instead of IndexedDB.

1 Like

As I mentioned, it is gradually coming together.

  • The idea is to add a dark mode, but for now, I am sticking with light.
  • I still need to add the Admin section, which will mainly be used to, for example, modify the mode, upload or download data, and a few other things.
  • As seen in the image, the form to load a trade is only shown if you click on + trade or if you are editing one; otherwise, it only shows the table with the information.
  • In the upper part of the table, I still need to add the totalizers that were there, as well as a way to filter the data.
  • …

Once the above is done, I will upload it to the repo, although we would have to delete what exists first.

Oh, and the reason why I went back to using Bootstrap (though without using any JS dependencies)…

Best.

3 Likes

I’ll be uploading progress updates bit by bit. I’ve added the bar I mentioned to filter trades or perform searches, along with the totalizers for AVG Return, AVG Hits, MAT, FK, and messages. We’ll need to double-check the calculations for those later on.

2 Likes

Updating…

  • Data filtering applied, admin section added with data import and export, and I added the ability to replicate trades.

  • I am working on data filtering via search, making sure it adapts well to mobile. I’ll leave the dark theme for later, and I think after that I’ll upload it so you can test it to see if the calculations are correct. Some are, but I’m in doubt about others, for example, the MAT and F.Kelly (FK), as well as the ones for each trade.

Hi, great that you’re working on it. Thanks!

Do we have those changes on GitHub?

Hi! Yes, I’m working on it whenever I can. Not yet, I’ll send it over by Monday, if not sooner, so that it’s ready.

  • Added the ability to search by “per” and “comment” data.
  • Added the mobile view.
  • I still need to do the dark theme and I’m looking into adapting it to be installable (PWA) so it doesn’t require an internet connection to use.
  • Then, maybe later, [I’ll handle] data validations so that where a number is required, users can only input numbers, and things like that.

Cheers.

1 Like

New update.

  • Added the dark theme (still need a few touch-ups)
  • I’m missing the PWA part, but I might leave that for later so I don’t drag this out too much.

And to wrap things up, checking the behavior, everything is on just one page, meaning an index.html and its respective style.css and app.js.

Best!

2 Likes

Great, thanks!!

But please, keep in mind that if we don’t see it on GitHub, it’s as if it doesn’t exist :sweat_smile:

You can link your account in your profile and we could eventually work on the app from here and GitHub simultaneously.

No problem at all! Regarding the previously associated repo, it can be deleted and a new one created with the same name; however, it’s not letting me do that at the moment.

Thanks.

Hello! Here is your initial repo (to which you have exclusive access):

And here are the contributions to the community :slight_smile:

I’m adding info about something we won’t be implementing, as we already discussed, which is using Bootstrap (!)

Why we don’t use Bootstrap (and prefer Tailwind)

https://www.codeleaks.io/tailwind-vs-bootstrap/

3 reasons to abandon bootstrap in 2021

Ah, okay! Yes, in the original, I can edit/delete/create another, etc.

As for whether to use one or the other, honestly, Tailwind is more customizable, and Bootstrap is more like having things already made. You can customize Bootstrap too, of course, but that’s more for an expert frontend developer or someone who specializes in it. In my case, I used Bootstrap because it’s the one I know best, and using native CSS or Tailwind takes time to learn (I’ll take a look at Tailwind later to see how it is). But for the meantime, what we have works well enough to get the functionality going, and the CSS can always be changed later.

I compared the CSS for both (I only use Bootstrap’s CSS, it’s just one file); the Tailwind CSS file is 355kb and Bootstrap is 228kb. Although, in Tailwind’s favor, it finished in 3.25ms compared to Bootstrap’s 3.51ms (in both cases locally).

Best,

2 Likes

Me olvide de agregar..