README.md

# geocontrib-frontend

## Project setup
```
npm install
```

### Préparation des variables d'environnement
Créer un fichier .env à la racine du projet puis ajouter les variables comme indiquer dans l'exemple ci-dessous (à adapter en fonction de l'environnement d'exploitation).


```
BASE_URL=/geocontrib/
NODE_ENV=development

```

### Configuration par le config.json

```json
{
    "BASE_URL":"/geocontrib/",
    "DOMAIN":"/geocontrib/",
    "VUE_APP_LOCALE":"fr-FR",
    "VUE_APP_APPLICATION_NAME":"GéoContrib",
    "VUE_APP_APPLICATION_ABSTRACT":"Application de saisie d'informations géographiques contributive",
    "VUE_APP_APPLICATION_FAVICO":"/geocontrib/favicon.ico",
    "VUE_APP_LOGO_PATH":"/geocontrib/img/logo-neogeo-circle.png",
    "VUE_APP_DJANGO_BASE":"",
    "VUE_APP_DJANGO_API_BASE":"/geocontrib/api/",
    "VUE_APP_CATALOG_NAME": "Datasud", => renseigne le nom du catalogue dans le bouton importer depuis le catalogue
    "VUE_APP_IDGO": true, => si le bouton importer depuis le catalogue doit être affiché ou pas
    "VUE_APP_RELOAD_INTERVAL": 15000,
    "VUE_APP_DISABLE_LOGIN_BUTTON":false,
    "VUE_APP_LOGIN_URL":"",
    "DEFAULT_BASE_MAP":{
        "SERVICE": "https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
        "OPTIONS": {
            "attribution": "&copy; contributeurs d'<a href='https://osm.org/copyright'>OpenStreetMap</a>",
            "maxZoom": 20
        }
    },
    "DEFAULT_MAP_VIEW" : {
        "center": [47.0, 1.0],
        "zoom": 4
    },
    "GEOCODER_PROVIDERS" : {
        "ADDOK": "addok",
        "NOMINATIM": "nominatim",
        "PHOTON": "photon"
    },
    "SELECTED_GEOCODER" : {
        "PROVIDER": "addok"
    }
}
```


### Compiles and hot-reloads for development

Pour éviter les problèmes de Cors en dév, (car backend sur serveur différent de frontend, différent en prod car même serveur), on utilise un proxy qui s'occupe de renseigner les CORS: https://github.com/garmeeh/local-cors-proxy#local-cors-proxy  

**À installer avant de lancer le serveur !**  
```
npm install -g local-cors-proxy
```

La commande serve lance les deux serveurs en parallèle dans le même terminal.
```
npm run serve
```
**Pour tester les fonctionnalités d'import il faut activer redis-server et celery !** 
Si redis et celery sont déjà installé, ouvrir un terminal et démarrer redis.
```
redis-server
```
Ouvrir un autre terminal dans le répertoire du projet backend et activer l'environnement virtuel, puis démarrer celery
```
celery -A config worker -l info
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).  

---
## Docker

Lancer un build
```
npm run build
```
Créér une image docker
```
docker-compose build
``` 
puis 
```
docker-compose push
```
Aller sur la VM geocontrib, (demander l'accès si besoin), aller dans ```/opt/geocontrib/[user]``` et ensuite :
```
docker-compose pull
```
et
```
docker-compose up -d
```
---
## Notes

### Version
Node => v14.18.2
### Changement par rapport au projet django
- Base.html => App.vue
- Découpage en composants

### Divers
- Afin de garder la même structure de pages que les templates originaux dans Django et aller vite, on utilise Vue-frag qui permet d'avoir plusieurs éléments html à la racine du template d'un compposant (comme les fragments dans React), sans avoir à ajouter une div wrapper qui pourait modifier le style (si on a une classe parente avec du flex par exemple).