Merge pull request #7 from karlomikus/develop

Merge next version
karlomikus · Nov 18, 2022 · db46313 · db46313
2 parents 4a3e242 + 20e3872
commit db46313
Show file tree

Hide file tree

Showing 32 changed files with 647 additions and 280 deletions.
diff --git a/.github/workflows/build-image.yml b/.github/workflows/build-image.yml
@@ -29,6 +29,6 @@ jobs:
         uses: docker/build-push-action@v3
         with:
           context: .
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
           push: true
           tags: kmikus12/salt-rim:latest, kmikus12/salt-rim:${{github.ref_name}}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,18 @@
+# v0.3.0
+## New
+- Support adding cocktail ingredient substitutes
+- Show ingredient varieties
+- Add "cl" as unit of measurement
+- New image uploading component
+- Add glass types updating
+
+## Misc
+- Meilisearch host server is now fetched from user endpoint
+- Update cocktail card styling
+- Truncate a lot of tags on cocktail card
+- Missing cocktail and ingredient images are now local to client
+- Add colorpicker to ingredient form
+
 # v0.2.1
 - Some fixes for ingredient modal
 - Fix image upload container on smaller devices

diff --git a/README.md b/README.md
@@ -41,8 +41,7 @@ Create a new config file in `public/config.js`, with the following content
 
 ``` js
 window.srConfig = {}
-window.srConfig.API_URL = "YOUR_BA_API_URL"
-window.srConfig.MEILISEARCH_HOST = "YOUR_MEILISEARCH_URL"
+window.srConfig.API_URL = "http://YOUR_BA_API_URL"
 ```
 
 4. Run the build commands
@@ -53,9 +52,26 @@ $ npm run build
 
 This will create a `dist/` folder with ready to use static files.
 
-## Docker compose
+## Docker
+
+Required environment variables:
+
+|Env Key|Value|Description|Example
+|-|-|-|-
+|API_URL|url|URL of your Bar Assistant server|http://bar-assistant.local
 
-    NOTE: Docker configuration for salt rim and bar assistant is still WIP, so anything can and will break.
+Image by default exposes port `8080`
+
+You can run docker image with the following command:
+
+```
+$ docker run -d \
+    -p 8080:8080 \
+    -e API_URL=http://BA_SERVER_URL \
+    kmikus12/salt-rim
+```
+
+## Docker compose
 
 Use the following `docker-compose.yml` template to get started with all services required to run Bar Assistant and Salt Rim.
 
@@ -66,7 +82,7 @@ services:
   meilisearch:
     image: getmeili/meilisearch
     environment:
-      - MEILI_MASTER_KEY=JwBO9HU24uBj0MQPonm5Ui8I8wBkKFwj6pjwkPZ2YjYzWIcyZu
+      - MEILI_MASTER_KEY=masterKey
       - MEILI_ENV=production
     ports:
       - 7700:7700
@@ -78,9 +94,9 @@ services:
     depends_on:
       - meilisearch
     environment:
-      - APP_URL=http://<YOUR_SERVER_IP>:8000
-      - MEILISEARCH_KEY=JwBO9HU24uBj0MQPonm5Ui8I8wBkKFwj6pjwkPZ2YjYzWIcyZu
-      - MEILISEARCH_HOST=http://meilisearch:7700
+      - APP_URL=http://YOUR_BA_API_SERVER_IP
+      - MEILISEARCH_KEY=masterKey
+      - MEILISEARCH_HOST=http://YOUR_MEILISEARCH_SERVER_IP
     volumes:
       - ba-storage:/var/www/cocktails/storage
     ports:
@@ -92,8 +108,7 @@ services:
       - meilisearch
       - bar-assistant
     environment:
-      - API_URL=http://<YOUR_SERVER_IP>:8000
-      - MEILISEARCH_HOST=http://<YOUR_SERVER_IP>:7700
+      - API_URL=http://YOUR_BA_API_SERVER_IP
     ports:
       - 8080:8080
 
@@ -110,14 +125,6 @@ email: [email protected]
 password: password
 ```
 
-Available ENV variables:
-
-|Env Key|Value|Description|
-|-|-|-
-|MEILI_MASTER_KEY|string|A random string use as a Meilisearch master key.|
-|BAR_ASSISTANT_URL|url|URL of your Bar Assistant server|
-|MEILISEARCH_URL|url|URL of your Meilisearch server|
-
 ## Contributing
 
 ``` bash

diff --git a/entrypoint.sh b/entrypoint.sh
@@ -3,7 +3,6 @@
 RUNTIME_ENV_CONFIG="
     window.srConfig = {};
     window.srConfig.API_URL = \"$API_URL\";
-    window.srConfig.MEILISEARCH_HOST = \"$MEILISEARCH_HOST\";
 "
 echo $RUNTIME_ENV_CONFIG > /app/dist/config.js
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "marked": "^4.1.1",
     "unitz": "^0.6.0",
     "vue": "^3.2.40",
+    "vue-accessible-color-picker": "^4.1.0",
     "vue-instantsearch": "^4.6.0",
     "vue-router": "^4.1.5",
     "vue-select": "^4.0.0-beta.5",

diff --git a/public/no-cocktail.jpg b/public/no-cocktail.jpg
diff --git a/public/no-ingredient.png b/public/no-ingredient.png
diff --git a/src/ApiRequests.js b/src/ApiRequests.js
@@ -72,6 +72,18 @@ class ApiRequests {
         return this.parseResponse(jsonResp);
     }
 
+    static async patchImage(id, formData) {
+        const jsonResp = await (await fetch(`${this.getUrl()}/api/images/${id}`, {
+            method: 'POST',
+            headers: new Headers({
+                'Authorization': 'Bearer ' + localStorage.getItem('user_token'),
+            }),
+            body: formData
+        })).json();
+
+        return this.parseResponse(jsonResp);
+    }
+
     static async fetchLoginToken(email, password) {
         const url = `${this.getUrl()}/api/login`
 
@@ -151,7 +163,7 @@ class ApiRequests {
     }
 
     static async fetchIngredientCategories() {
-        let jsonResp = await this.getRequest(`/api/ingredients/categories`);
+        let jsonResp = await this.getRequest(`/api/ingredient-categories`);
 
         return this.parseResponse(jsonResp);
     }
@@ -187,7 +199,7 @@ class ApiRequests {
     }
 
     static async favoriteCocktail(id) {
-        let jsonResp = await this.postRequest(`/api/cocktails/${id}/favorite`);
+        let jsonResp = await this.postRequest(`/api/cocktails/${id}/toggle-favorite`);
 
         return this.parseResponse(jsonResp);
     }
@@ -251,6 +263,12 @@ class ApiRequests {
 
         return this.parseResponse(jsonResp);
     }
+
+    static async fetchGlasses() {
+        let jsonResp = await this.getRequest(`/api/glasses`);
+
+        return this.parseResponse(jsonResp);
+    }
 }
 
 export default ApiRequests;
diff --git a/src/Auth.js b/src/Auth.js
@@ -22,7 +22,7 @@ class Auth {
         const user = this.getUser();
 
         return {
-            host: window.srConfig.MEILISEARCH_HOST,
+            host: user.search_host,//window.srConfig.MEILISEARCH_HOST,
             key: user.search_api_key,
         };
     }

diff --git a/src/Converter.js b/src/Converter.js
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -25,13 +25,6 @@
     --color-var-2: #FFF1E6;
     --color-var-3: #FDE2E4;
     --color-var-4: #E2ECE9;
-
-    --shadow-color: 350deg 28% 74%;
-    --shadow-elevation-medium:
-        0px 0.8px 1.1px hsl(var(--shadow-color) / 0.1),
-        0px 2.8px 3.7px -0.4px hsl(var(--shadow-color) / 0.16),
-        0px 5.9px 7.9px -0.7px hsl(var(--shadow-color) / 0.22),
-        0.1px 12.9px 17.2px -1.1px hsl(var(--shadow-color) / 0.28);
 }
 
 @media (max-width: 450px) {

diff --git a/src/assets/buttons.css b/src/assets/buttons.css
@@ -16,6 +16,7 @@
     vertical-align: middle;
     white-space: nowrap;
     text-decoration: none;
+    font-weight: 700;
 }
 
 .button:hover {

diff --git a/src/assets/forms.css b/src/assets/forms.css
@@ -2,40 +2,6 @@
     margin-bottom: 20px;
 }
 
-.form-group--image {
-    display: grid;
-    grid-template-columns: 1fr 3fr;
-    column-gap: 10px;
-}
-
-.form-group--image__image {
-    padding: 15px;
-    background: rgba(255, 255, 255, .5);
-    border-bottom: 2px solid var(--color-bg-dark);
-    border-radius: 5px;
-    text-align: right;
-}
-
-.form-group--image__image .button {
-    margin-top: 10px;
-}
-
-.form-group--image p {
-    margin-top: 20px;
-    text-align: right;
-}
-
-.form-group--image img {
-    max-width: 100%;
-    display: block;
-}
-
-@media (max-width: 500px) {
-    .form-group--image {
-        grid-template-columns: 1fr;
-    }
-}
-
 .form-label {
     display: block;
     display: block;
@@ -95,7 +61,7 @@ textarea.form-input,
 
 .form-input::placeholder,
 .form-select::placeholder {
-    color: #966d74;
+    color: #575051;
 }
 
 .form-actions {
@@ -115,6 +81,11 @@ textarea.form-input,
     color: #866269;
 }
 
+.form-input:disabled {
+    opacity: .8;
+    background: none;
+}
+
 @media (max-width: 450px) {
     .form-input,
     .form-select {

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -4,6 +4,7 @@
 @import "./dropdown.css";
 @import "./modal.css";
 @import "./glasses.css";
+@import "./tags.css";
 
 @import "vue-select/dist/vue-select.css";
 @import "vue-toast-notification/dist/theme-default.css";
@@ -63,24 +64,6 @@ main {
     z-index: 10;
 }
 
-.cocktail-tags {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    list-style: none;
-    padding: 0;
-    margin: 10px -3px -3px -3px;
-}
-
-.cocktail-tags li {
-    background-color: var(--color-tag);
-    color: var(--color-text);
-    border-radius: 4px;
-    margin: 3px;
-    padding: 2px 5px;
-    font-size: 12px;
-}
-
 .site-logo {
     display: flex;
     font-family: var(--font-accent);

diff --git a/src/assets/modal.css b/src/assets/modal.css
@@ -8,10 +8,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    /* display: flex;
-    justify-content: center;
-    align-items: center; */
+    background-color: rgba(26, 9, 17, 0.5);
     padding: 20px;
     z-index: 10;
 }