From 20c266394fb68ab302e8173ca4b9b8a77cf0558a Mon Sep 17 00:00:00 2001 From: "Luis S. Ruisinger" Date: Tue, 12 Jul 2022 18:20:38 +0200 Subject: [PATCH 01/13] Fixing background of input field --- frontend/src/components/ItemModel.vue | 78 ++++++++++++++++----------- frontend/src/styling/navbar.scss | 6 ++- 2 files changed, 52 insertions(+), 32 deletions(-) diff --git a/frontend/src/components/ItemModel.vue b/frontend/src/components/ItemModel.vue index 34ac7fa..4a84e71 100644 --- a/frontend/src/components/ItemModel.vue +++ b/frontend/src/components/ItemModel.vue @@ -38,14 +38,18 @@ +
+ -
- - +
+
+ + +
@@ -215,20 +219,42 @@ body{ background-color: darkcyan; } +/* navbar-background */ + +.nav-background{ + position: fixed; + left: 0; + top: 0; + z-index: 3; + background: darkcyan; + width: 100vw; + height: 15vh; +} + /* input field styling */ -.inputField-header { +.field-header-box{ z-index: 3; position: fixed; + width: 100vw; + height: 5vh; + left: 0; + top: 10vh; + display: grid; + align-content: center; + justify-content: center; +} + +.inputField-header { + position: relative; + z-index: 5; width: 20vh; - left: 50%; - transform: translateX(-50%); + height: 3vh; } .newItemName { z-index: 3; position: relative; - top: -65.5vh; // 0,65 of height left: 0; width: 100%; height: 100%; @@ -293,9 +319,11 @@ body{ position: absolute; top: 80%; left: 50%; - + width: 0; + height: 0; font-size: 20px; margin-left: 30px; + border: 1px solid black; } .item-list{ @@ -317,9 +345,7 @@ body{ font-family: Montserrat, sans-serif; list-style: none; background: darkslategrey; - box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.6); display: flex; - padding: 100px; width: 300px; } @@ -394,21 +420,25 @@ body{ } } -@media (max-width: 2299px) { +@media (max-width: 2100px) { .item-list{ - grid-template-columns: repeat(4, 2vh); + grid-template-columns: repeat(7, 2vh); + } + + .item{ + right: 4.1vw; } } @media (min-width: 2100px) { .item-list{ - grid-template-columns: repeat(5, 2vh); + grid-template-columns: repeat(8, 2vh); } } @media (min-width: 2560px) { .item-list{ - grid-template-columns: repeat(6, 2vh); + grid-template-columns: repeat(8, 2vh); } } @@ -441,7 +471,6 @@ body{ row-gap: 50px; column-gap: 230px; - grid-template-columns: repeat(4, 2vh); .item{ width: 200px; @@ -515,19 +544,6 @@ body{ cursor: pointer; } } - - @media (min-width: 1440px) { - - .item-section{ - - font-size: 40/3 px; - margin-left: 24px; - } - - .item-list{ - grid-template-columns: repeat(9, 2vh) - } - } } diff --git a/frontend/src/styling/navbar.scss b/frontend/src/styling/navbar.scss index 15b39f9..ca1be6b 100644 --- a/frontend/src/styling/navbar.scss +++ b/frontend/src/styling/navbar.scss @@ -35,15 +35,17 @@ } .divider{ + position: relative; flex-grow: 1; border-bottom: 0.1vh solid black; margin: 5px; - + top: 2vh; } .menu-icon { position: relative; padding: 0.5vh 0.5vh; + top: 2vh; cursor: pointer; z-index: 1; display: none; @@ -81,7 +83,9 @@ } .logo{ + position: relative; padding: 0.5vh 0.5vh; + top: 2vh; } .logo:hover { From 4359d26982aefd40462c24c3974cac97e94e557a Mon Sep 17 00:00:00 2001 From: Karthik Vempati Date: Sun, 17 Jul 2022 17:14:49 +0200 Subject: [PATCH 02/13] Change to const --- frontend/src/components/ItemModel.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ItemModel.vue b/frontend/src/components/ItemModel.vue index a093284..686cbff 100644 --- a/frontend/src/components/ItemModel.vue +++ b/frontend/src/components/ItemModel.vue @@ -115,12 +115,12 @@ const Items = { methods: { addItem: function () { - var value = this.newItem && this.newItem.trim() + const value = this.newItem && this.newItem.trim(); if (!value) { return } - var components = value.split(' ') + const components = value.split(' '); api.createNew(components[0], parseInt(components[1].replace(/[^\d.]/g, '')), From 2b8eab1f1607d3b9e51a1ddd2a8a36893fca453e Mon Sep 17 00:00:00 2001 From: Karthik Vempati Date: Sun, 17 Jul 2022 17:13:30 +0200 Subject: [PATCH 03/13] Preliminary recipe page Vuetify go brr --- .../controller/RecipeSearchController.java | 2 +- frontend/package.json | 8 +- frontend/public/index.html | 2 + frontend/src/Api.js | 8 +- frontend/src/App.vue | 4 +- frontend/src/components/ItemModel.vue | 3 + frontend/src/components/RecipeModel.vue | 546 ++++++++++++++++++ frontend/src/main.js | 7 +- frontend/src/plugins/vuetify.js | 11 + frontend/yarn.lock | 78 ++- 10 files changed, 656 insertions(+), 13 deletions(-) create mode 100644 frontend/src/components/RecipeModel.vue create mode 100644 frontend/src/plugins/vuetify.js diff --git a/backend/src/main/whattocook/controller/RecipeSearchController.java b/backend/src/main/whattocook/controller/RecipeSearchController.java index 59a3eec..426ddd8 100644 --- a/backend/src/main/whattocook/controller/RecipeSearchController.java +++ b/backend/src/main/whattocook/controller/RecipeSearchController.java @@ -17,7 +17,7 @@ import java.util.List; @RestController() @BasePathAwareController() public class RecipeSearchController { - private final int nextRecipes=10; + private final int nextRecipes=12; private final int nextRecipesForOneRandom = 20; @Autowired diff --git a/frontend/package.json b/frontend/package.json index b8f949e..11bef88 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,7 +12,8 @@ "core-js": "^3.8.3", "vue": "^2.6.14", "vue-router": "^4.0.15", - "vuejs-logger": "^1.5.5" + "vuejs-logger": "^1.5.5", + "vuetify": "^2.6.7" }, "devDependencies": { "@babel/core": "^7.12.16", @@ -20,10 +21,13 @@ "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", + "deepmerge": "^4.2.2", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "node-sass": "^7.0.1", - "sass-loader": "^13.0.0", + "sass": "~1.32", + "sass-loader": "^13.0.2", + "vue-cli-plugin-vuetify": "^2.5.1", "vue-template-compiler": "^2.6.14" }, "eslintConfig": { diff --git a/frontend/public/index.html b/frontend/public/index.html index 3632c28..4753fba 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -8,6 +8,8 @@ <%= htmlWebpackPlugin.options.title %> + +
diff --git a/frontend/src/components/RecipeModel.vue b/frontend/src/components/RecipeModel.vue new file mode 100644 index 0000000..7bfcc72 --- /dev/null +++ b/frontend/src/components/RecipeModel.vue @@ -0,0 +1,546 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/main.js b/frontend/src/main.js index 4b37061..0f343ce 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -1,5 +1,6 @@ import Vue from 'vue' import App from './App' +import vuetify from '@/plugins/vuetify' // path to vuetify export Vue.config.productionTip = false @@ -22,4 +23,8 @@ new Vue({ el: '#app', template: '', components: { App} -}); \ No newline at end of file +}); + +new Vue({ + vuetify, +}).$mount('#app') \ No newline at end of file diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js new file mode 100644 index 0000000..184a2d4 --- /dev/null +++ b/frontend/src/plugins/vuetify.js @@ -0,0 +1,11 @@ +// src/plugins/vuetify.js + +import Vue from 'vue' +import Vuetify from 'vuetify' +import 'vuetify/dist/vuetify.min.css' + +Vue.use(Vuetify) + +const opts = {} + +export default new Vuetify(opts) \ No newline at end of file diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 395e6b7..06f2543 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2284,7 +2284,7 @@ charcodes@^0.2.0: resolved "https://registry.npmmirror.com/charcodes/-/charcodes-0.2.0.tgz" integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ== -chokidar@^3.5.3: +"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3: version "3.5.3" resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -2773,6 +2773,11 @@ deepmerge@^1.5.2: resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz" integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ== +deepmerge@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" + integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== + default-gateway@^6.0.3: version "6.0.3" resolved "https://registry.npmmirror.com/default-gateway/-/default-gateway-6.0.3.tgz" @@ -3994,6 +3999,11 @@ inherits@2.0.3: resolved "https://registry.npmmirror.com/inherits/-/inherits-2.0.3.tgz" integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw== +interpret@^1.0.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e" + integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA== + ip@^1.1.5: version "1.1.8" resolved "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz" @@ -4028,7 +4038,7 @@ is-ci@^1.0.10: dependencies: ci-info "^1.5.0" -is-core-module@^2.5.0, is-core-module@^2.8.1: +is-core-module@^2.5.0, is-core-module@^2.8.1, is-core-module@^2.9.0: version "2.9.0" resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.9.0.tgz" integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A== @@ -4908,6 +4918,14 @@ nth-check@^2.0.1: dependencies: boolbase "^1.0.0" +null-loader@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/null-loader/-/null-loader-4.0.1.tgz#8e63bd3a2dd3c64236a4679428632edd0a6dbc6a" + integrity sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg== + dependencies: + loader-utils "^2.0.0" + schema-utils "^3.0.0" + oauth-sign@~0.9.0: version "0.9.0" resolved "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz" @@ -5619,6 +5637,13 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" +rechoir@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384" + integrity sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw== + dependencies: + resolve "^1.1.6" + redent@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz" @@ -5742,6 +5767,15 @@ resolve-from@^4.0.0: resolved "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz" integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== +resolve@^1.1.6: + version "1.22.1" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177" + integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw== + dependencies: + is-core-module "^2.9.0" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" + resolve@^1.10.0, resolve@^1.14.2: version "1.22.0" resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz" @@ -5821,14 +5855,21 @@ sass-graph@4.0.0: scss-tokenizer "^0.3.0" yargs "^17.2.1" -sass-loader@^13.0.0: - version "13.0.0" - resolved "https://registry.npmjs.org/sass-loader/-/sass-loader-13.0.0.tgz" - integrity sha512-IHCFecI+rbPvXE2zO/mqdVFe8MU7ElGrwga9hh2H65Ru4iaBJAMRteum1c4Gsxi9Cq1FOtTEDd6+/AEYuQDM4Q== +sass-loader@^13.0.2: + version "13.0.2" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.0.2.tgz#e81a909048e06520e9f2ff25113a801065adb3fe" + integrity sha512-BbiqbVmbfJaWVeOOAu2o7DhYWtcNmTfvroVgFXa6k2hHheMxNAeDHLNoDy/Q5aoaVlz0LH+MbMktKwm9vN/j8Q== dependencies: klona "^2.0.4" neo-async "^2.6.2" +sass@~1.32: + version "1.32.13" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.13.tgz#8d29c849e625a415bce71609c7cf95e15f74ed00" + integrity sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA== + dependencies: + chokidar ">=3.0.0 <4.0.0" + schema-utils@^2.6.5: version "2.7.1" resolved "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz" @@ -5892,7 +5933,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0: resolved "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== -semver@^7.2.1, semver@^7.3.4, semver@^7.3.5: +semver@^7.1.2, semver@^7.2.1, semver@^7.3.4, semver@^7.3.5: version "7.3.7" resolved "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz" integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g== @@ -5999,6 +6040,15 @@ shell-quote@^1.6.1: resolved "https://registry.npmmirror.com/shell-quote/-/shell-quote-1.7.3.tgz" integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw== +shelljs@^0.8.3: + version "0.8.5" + resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c" + integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow== + dependencies: + glob "^7.0.0" + interpret "^1.0.0" + rechoir "^0.6.2" + side-channel@^1.0.4: version "1.0.4" resolved "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz" @@ -6620,6 +6670,15 @@ verror@1.10.0: core-util-is "1.0.2" extsprintf "^1.2.0" +vue-cli-plugin-vuetify@^2.5.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.5.1.tgz#6a3ee80c6e8d09b634ec7705422573f2ee0bc7e7" + integrity sha512-OcZ8/bqf84yTbQN+PyRf+8Wvr8czg+u5J4JGVx+Lq5ytsBxTgIUIZ/oMO7j+bd9WCjiKid2l9gZbQYjZABw2+g== + dependencies: + null-loader "^4.0.1" + semver "^7.1.2" + shelljs "^0.8.3" + vue-eslint-parser@^8.0.1: version "8.3.0" resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz" @@ -6693,6 +6752,11 @@ vuejs-logger@^1.5.5: es6-object-assign "1.1.0" vue "2.6.11" +vuetify@^2.6.7: + version "2.6.7" + resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.6.7.tgz#9c6fb7d20e1c4b07417084cbe5996c2dadf099df" + integrity sha512-1XxCv6mt1UsKaW7rqow0hF/jOw1ijT/fHH9euWLHgSVIcPAx8D2AY5ihTCBbMmV53Hj/YD0DUvzyk6cM/OGHvw== + watchpack@^2.3.1: version "2.3.1" resolved "https://registry.npmmirror.com/watchpack/-/watchpack-2.3.1.tgz" From 2c8f5d76dc164e0425f93fc624cf445f76825305 Mon Sep 17 00:00:00 2001 From: Karthik Vempati Date: Sun, 17 Jul 2022 17:27:11 +0200 Subject: [PATCH 04/13] Fix units for backend --- backend/src/main/whattocook/models/Unit.java | 5 +++-- backend/src/test/java/items/ItemTests.java | 20 ++++++++++---------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/backend/src/main/whattocook/models/Unit.java b/backend/src/main/whattocook/models/Unit.java index ed37377..0743e0c 100644 --- a/backend/src/main/whattocook/models/Unit.java +++ b/backend/src/main/whattocook/models/Unit.java @@ -1,6 +1,7 @@ package whattocook.models; public enum Unit { - GRAMMS, - MILLILETERS + g, + ml, + units } diff --git a/backend/src/test/java/items/ItemTests.java b/backend/src/test/java/items/ItemTests.java index ff27ce7..a2a9ccf 100644 --- a/backend/src/test/java/items/ItemTests.java +++ b/backend/src/test/java/items/ItemTests.java @@ -29,14 +29,14 @@ final class ItemTests { @Test public void saveTest() { - Item item = new Item("kartoffel", Unit.GRAMMS, 5000); + Item item = new Item("kartoffel", Unit.g, 5000); itemRepository.save(item); assertTrue(itemRepository.existsById(item.getId())); } @Test public void findByIDTest() { - Item item = new Item("tortillias", Unit.GRAMMS, 5000); + Item item = new Item("tortillias", Unit.g, 5000); itemRepository.save(item); assertEquals(item, itemRepository.findById(item.getId()).get()); } @@ -49,7 +49,7 @@ final class ItemTests { @Test public void findByNameTest(){ - Item item = new Item("tortillias", Unit.GRAMMS, 5000); + Item item = new Item("tortillas", Unit.g, 5000); itemRepository.save(item); assertEquals(item, itemRepository.findByName(item.getName()).get()); } @@ -57,11 +57,11 @@ final class ItemTests { @Test public void findAllTest() { List savedItems = new ArrayList(); - savedItems.add( new Item("nachos", Unit.GRAMMS, 5000)); - savedItems.add( new Item("wurst", Unit.GRAMMS, 5000)); - savedItems.add( new Item("schinken", Unit.GRAMMS, 5000)); - savedItems.add( new Item("brokkoli", Unit.GRAMMS, 5000)); - savedItems.add( new Item("eiscreme", Unit.GRAMMS, 5000)); + savedItems.add( new Item("nachos", Unit.g, 5000)); + savedItems.add( new Item("wurst", Unit.g, 5000)); + savedItems.add( new Item("schinken", Unit.g, 5000)); + savedItems.add( new Item("brokkoli", Unit.g, 5000)); + savedItems.add( new Item("eiscreme", Unit.g, 5000)); itemRepository.saveAll(savedItems); @@ -71,7 +71,7 @@ final class ItemTests { @Test public void deleteTest() { - Item item = new Item("elefantenfuß", Unit.GRAMMS, 5000); + Item item = new Item("elefantenfuß", Unit.g, 5000); itemRepository.save(item); assertEquals(item, itemRepository.findById(item.getId()).get()); itemRepository.delete(item); @@ -80,7 +80,7 @@ final class ItemTests { @Test public void updateTest() { - Item item = new Item("schokoküsse", Unit.GRAMMS, 5000); + Item item = new Item("schokoküsse", Unit.g, 5000); itemRepository.save(item); long itemCount = itemRepository.count(); item.setQuantity(4574); From 2a2d945b59f52ff76ec79626dd836a2ee9493f8e Mon Sep 17 00:00:00 2001 From: Karthik Vempati Date: Sun, 17 Jul 2022 20:12:03 +0200 Subject: [PATCH 05/13] Fix item input yeah --- frontend/src/components/ItemModel.vue | 119 ++++++++++++++++++-------- 1 file changed, 85 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/ItemModel.vue b/frontend/src/components/ItemModel.vue index 3dbed94..2ac4c71 100644 --- a/frontend/src/components/ItemModel.vue +++ b/frontend/src/components/ItemModel.vue @@ -35,14 +35,67 @@
-
- - -
+ + + + + + + + + + + + + + +

Unit

+ + + + units + + + + g + + + + ml + + + + + + + + + + + + +
+ + @@ -87,6 +140,8 @@ const Items = { return { items: [], newItem: '', + newQuantity: 0, + newUnit: '', editedItem: null, loading: true, error: null, @@ -112,29 +167,29 @@ const Items = { return this.activeUser ? this.activeUser.email : '' }, inputPlaceholder: function () { - return this.activeUser ? this.activeUser.given_name + ', what do you want to add?' : 'What needs to be added' + return this.activeUser ? this.activeUser.given_name + ', What do you want to add?' : 'What needs to be added?' } }, methods: { addItem: function () { - const value = this.newItem && this.newItem.trim(); - if (!value) { + const addableItem = this.newItem && this.newItem.trim(); + const addableQuantity = parseInt(this.newQuantity); + const addableUnit = this.newUnit; + if (!addableItem) { return } - const components = value.split(' '); - - api.createNew(components[0], - parseInt(components[1].replace(/[^\d.]/g, '')), - components[1].replace(/[0-9]/g, '') === 'ml' ? 'MILLILETERS' : "GRAMMS" + api.createNew(addableItem, + addableQuantity, + addableUnit ).then((response) => { this.$log.debug("New item created:", response); this.items.push({ id: response.data.id, - name: components[0], - quantity: parseInt(components[1].replace(/[^\d.]/g, '')), - unit: components[1].replace(/[0-9]/g, '') === 'MILLILETERS' ? 'ml' : 'g' + name: addableItem, + quantity: addableQuantity, + unit: addableUnit }) }).catch((error) => { this.$log.debug(error); @@ -167,10 +222,6 @@ export default Items - - - -