mdl29 / scratchy Goto Github PK

Ajouter un endpoint GET /api/room qui renvoie toutes les room.

Replace database.py in memory with mongo database using pymongo : https://pymongo.readthedocs.io/en/stable/

connaissant l'id d'une room, afficher la liste des messages.

Exemple d'utilisation du composant :

<messages v-bind:messages="messages"></messages>

<script>

//...
data: {
    messages: [
       {content: "Bonjour tata", author: "toto",  timestamp: 1618585021 },
        {content: "Salut toto", author: "tata",  timestamp: 1618585121 },
    ]
};
//...

</script>

Like the room, use mongoengine for users.

Make a better read me with some syntax

README.md :

• Explain the stack (back + front), add link to other readme in the project

server/README.md :

• Add docker-compose cmd : Done here : 7cc6366
• Move API documentation in doc folder

front/README.md :

• Add README file
• Add python server cmd

To enforce PEP8 coding style convention we should add a python linter to the backend code, such as Flake8 (might be the easiest one to add).

A github action that runs it could also be interesting, maybe this one : https://github.com/marketplace/actions/python-code-quality-and-lint

Usage :

<room-list v-bind:rooms="rooms" v-on:room-selected="displayRoom($event)"></room-list>

<script>

//...
rooms = [
   {
      "_id": {
            "$oid": "6071ac5176e5bd456a859d9d"
      },
      "description": "ma description",
      "title": "Room 1",
      "user": []
   },
   {
      "_id": {
            "$oid": "6071ac5176e5bd456a859d9d"
      },
      "description": "ma description",
      "title": "Room 2",
      "user": []
   }
]
//...

</script>

Event - Room Selected

$event is the selected room object

Need to add .vscode folder to .gitignore

Remove import database in user and message resources.

link to yamllint here

We can try to add this linter : https://pypi.org/project/html-linter/

Ajouter un endpoint GET /api/message qui renvoie tous les messages.

use insomnia export files with yalm format

• make insomnia file with all request and environment variables

• export this file in yaml format

• add commentary to make a better documentation

To prevent relative import add a package for the server.

• Clean up code structure
• Add setup.py
• Add entry point to start the server with a command scratchy-server (that will take advantage of the Flask CLI)

https://www.openapis.org/

Publish Scratchy REST API using Open API standard.

text editor should be renamed into message_editor (both the file and the code), the input should be changed to a styled textarea (to support multiline messages) and the css should be moved to a message_editor.css fil (in front/css). The final HTML should include links to both front/css/global.css and front/css/message_editor.css

• rename text_editor in message_editor
• change input to textarea (in template) as well as change css acordingly
• move css in files (part of the style is already in global.css)

add a profile image in user in the uml diagram fix all the mistakes

efficient and easy one: https://eslint.vuejs.org/

room have a users list but it's name is user instead of users

Replace ressources and datbase with mongo engine.
http://mongoengine.org/

• GET /api/message/{ID}
• POST /api/message
• DELETE /api/message
• GET /api/user/{ID}
• POST /api/user
• DELETE /api/user

Documentation :

• https://github.com/badges/shields

All sort of badges :

• https://shields.io/

Methods for REST API in scratchy service (javascript) for:

• Message

• User

• Room

Methods are:

• get by id

• update by id

• delete by id

• get all

Using axios

Then the linter we can use is : stylelint

Some articles about it :

• How to name css classes
• CSS Naming Conventions that Will Save You Hours of Debugging

Depends on : #121

Adding get and delete with mongoengine for room

make every pseudo unique

Like the room, use mongoengine for messages.

Mise en place de l'API Flask avec 1 ressource room, GET qui pour la room id:0 renvoi :

GET HTTP /api/room/0 :

{
  "id": 0,
  "title": "Mon premier salon",
  "description": "Salon de test",
  "users": []
}

add a put command to change data in database

curl --request GET
--url http://localhost:5000/api/user/60438da3a27c7d79a52e8aa9

Return json inside string

gather all components files in only one file

Apparently @yannis-mlgrn is already writing some css on #104 so this may not end up in the final product but i'd like to add my take on the style anyway, so i'll open a PR soon

Use case :

As a end user I need to choose my pseudo to use the app.
As a end user I would like to automatically create an account if the pseudo doesn't exists.
As a end user I would like to use the same account each time I use the app with the same pseudo.

We need a VueJS component that invites the user to type it's pseudo before using the app it should emit an event when the user wants to validate it's pseudo.

delete the model file

Interface qui affiche les détail d'une room.

En tant qu'utilisateur de scratchy, je suis pouvoir voir sur la page d'accueil les détail d'une room donnée c'est à dire : son nom, son ID, sa description et la liste des ID des utilisateurs présent dedans.

We wrote the model on a whiteboard last time, @landerneRPi as the export :

This should be added to a documentation folder in this repository. Model should be improved also.

Utiliser la librairie logging :
https://docs.python.org/fr/3/howto/logging.html

Clean logger exemple :

Add docker-compose file with mongoDB.

<message-editor v-on:send-message="api.sendMessage(roomId, $event)"></message-editor>

Events

send-message

La valeur de l'event c'est le contenu du message.

Front guys need a way to retreive a user using it's pseudo, will be used in the first version login (a bit like IRC).

We need a get endpoint : /api/user/?pseudo=totoPseudo that will return the corresponding profile of 404 if nothing is found.

Faire une maquette de l'interface d'une Room.
Décrire les différents composants VueJS qu'on va utiliser.

make a better css

Front App needs more structuration and macro visualisation, we need a first draft of the VueJS components organisation, Api related services and the model.

Model will be the same as the API and serveur site model.

This diagram should help developers understand what are the props/data/methods of the components.

Usage :

<user-list v-bind:users="users"></user-list>

<script>
//..
users = {
   {
     "_id": {
       "$oid": "607ae876f59d21d5a50ac3c9"
     },
     "pseudo": "mon pseudo",
     "user": "default",
     "roomsId": []
  },
  {
     "_id": {
       "$oid": "607ae876f59d21d5a50ac3c9"
     },
     "pseudo": "mon pseudo",
     "user": "default",
     "roomsId": []
  }
}
//..
</script>

Rename docker-composer.yaml into docker-compose.yaml to be docker-compose compliant (use default filename).

create a function that delete every data