11 Commits
v1.0 ... v1.1

10 changed files with 92 additions and 38 deletions

View File

@@ -15,10 +15,26 @@ Die Autoren des Projekts warnen vor den Schäden, die Alkohol anrichtet, und üb
Alle Cocktailrezepte dienen nur zur Information. Alle Cocktailrezepte dienen nur zur Information.
Bei der Erstellung dieses Projekts wurden keine Food-Blogger, Barkeeper oder Programmierer geschädigt. Bei der Erstellung dieses Projekts wurden keine Food-Blogger, Barkeeper oder Programmierer geschädigt.
## Download ## Releases
- [Android Release APK](android/app/release/app-release.apk) Übersicht aller [Releases](/releases). Downloade die App von dort.
- [Android Debug APK](android/app/build/outputs/apk/debug/app-debug.apk)
- Version 1.1
- Favourisieren aus Shake-Sicht möglich
- Logo auf Startseite
- kleine Verbesserungen und Bugfixes
- Version 1.0
- grundlegende Funktionen implementiert
- editieren nicht möglich
## Open Bugs, Issues & ToDos
- Shake: Scroll-to-top funktioniert nicht
- New Cocktail
- Zutat verschwindet bei hinzufügen einer neuen Reihe
- Edit Cocktails
- Cocktail Zutat zeigen
- Speichern ermöglichen
- API Key
- Key nicht gespeichert
## Quellen und Bibliotheken ## Quellen und Bibliotheken
- die [CocktailDB](https://www.thecocktaildb.com/) API; der eigene API Schlüssel kann in der App gespeichert werden - die [CocktailDB](https://www.thecocktaildb.com/) API; der eigene API Schlüssel kann in der App gespeichert werden

Binary file not shown.

Binary file not shown.

View File

@@ -12,12 +12,15 @@
<meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-tap-highlight" content="no" />
<link rel="shortcut icon" type="image/png" href="<%= BASE_URL %>img/favicon.ico" /> <link rel="shortcut icon" type="image/png" href="/img/favicon.ico" />
<link rel="favicon" type="image/png" href="/img/favicon.ico?" />
<link rel="icon" type="image/png" href="/img/icon.png?" />
<link rel="manifest" href="/manifest.json">
<!-- add to homescreen for ios --> <!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Cocktail Shaker App" /> <meta name="apple-mobile-web-app-title" content="Cocktail Shaker App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="rgb(202, 0, 152)" />
</head> </head>
<body> <body>

View File

@@ -1,27 +1,25 @@
{ {
"name": "cocktail-shaker", "name": "cocktail-shaker",
"short_name": "CS", "short_name": "CS",
"description": "shake your way to a new cocktail",
"theme_color": "#4DBA87", "theme_color": "#4DBA87",
"icons": [{ "icons": [{
"src": "./img/favicon.ico", "src": "./img/favicon.ico",
"sizes": "32x32", "sizes": "32x32",
"type": "image/png", "type": "image/png"
"purpose": "maskable"
}, },
{ {
"src": "./img/icon.png", "src": "./img/icon.png",
"sizes": "32x32", "sizes": "32x32",
"type": "image/png", "type": "image/png"
"purpose": "maskable"
}, },
{ {
"src": "./img/splash.png", "src": "./img/splash.png",
"sizes": "128x128", "sizes": "128x128",
"type": "image/png", "type": "image/png"
"purpose": "maskable"
} }
], ],
"start_url": ".", "start_url": "/",
"display": "standalone", "display": "standalone",
"background_color": "#000000" "background_color": "rgb(202, 0, 152)"
} }

View File

@@ -15,22 +15,22 @@ const routes = [{
path: '', path: '',
redirect: '/tabs/Shake' redirect: '/tabs/Shake'
}, },
{
path: 'Shake',
component: () => import('@/views/Shake.vue')
},
{ {
path: 'Shake/:id', path: 'Shake/:id',
component: () => import('@/views/ViewCocktail.vue') component: () => import('@/views/ViewCocktail.vue')
}, },
{ {
path: "New", path: 'Shake',
component: () => import('@/views/NewCocktail.vue') component: () => import('@/views/Shake.vue')
}, },
{ {
path: "New/:id", path: "New/:id",
component: () => import('@/views/EditCocktail.vue') component: () => import('@/views/EditCocktail.vue')
}, },
{
path: "New",
component: () => import('@/views/NewCocktail.vue')
},
{ {
path: 'Cocktails', path: 'Cocktails',
component: () => import('@/views/Cocktails.vue') component: () => import('@/views/Cocktails.vue')

View File

@@ -9,8 +9,7 @@
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-title size="large" <ion-title size="large"
>Cocktaillist >Cocktails {{ cocktails ? "#" + cocktails.length : "please restore" }}</ion-title
{{ cocktails ? "#" + cocktails.length : "#0" }}</ion-title
> >
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>

View File

@@ -2,13 +2,13 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>{{ mode }} Cocktail</ion-title> <ion-title>New Cocktail</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content :fullscreen="true"> <ion-content :fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-title size="large">{{ mode }} Cocktail</ion-title> <ion-title size="large">New Cocktail</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
@@ -150,7 +150,6 @@
<script> <script>
import { useStorage } from "@/composables/useStorage"; import { useStorage } from "@/composables/useStorage";
//import router from "@/router";
import glassJson from "../data/glasses.json"; import glassJson from "../data/glasses.json";
import ingredientJson from "../data/ingredients.json"; import ingredientJson from "../data/ingredients.json";
import unitJson from "../data/units.json"; import unitJson from "../data/units.json";
@@ -217,7 +216,6 @@ export default {
}, },
data() { data() {
return { return {
mode: "New", //"Edit"
cocktail: { cocktail: {
name: null, name: null,
ingredients: [{ amount: 0, unit: "ml", ingredient: null }], ingredients: [{ amount: 0, unit: "ml", ingredient: null }],

View File

@@ -22,14 +22,18 @@
Shake your phone <br /> Shake your phone <br />
to get a Cocktail to get a Cocktail
</h1> </h1>
<ion-button color="success" expand="block" @click="doShake()"
>Start shaking</ion-button
>
<ion-img <ion-img
class="image-icon" class="start-icon"
:src="`${publicPath}img/glasses/Martini.svg`" :src="`${publicPath}img/icon.png`"
alt="CocktailShaker" alt="CocktailShaker"
></ion-img> ></ion-img>
<ion-button
size="large"
color="success"
expand="block"
@click="doShake()"
>Start shaking</ion-button
>
</div> </div>
<!-- Show cocktail --> <!-- Show cocktail -->
@@ -80,10 +84,28 @@
<div class="buttonContainer"> <div class="buttonContainer">
<!--Take Photo --> <!--Take Photo -->
<ion-button color="secondary" @click="takePhoto(chosenCocktail)"> <ion-button color="secondary" @click="takePhoto(chosenCocktail)">
<ion-icon :icon="camera"></ion-icon> <ion-icon :icon="camera" slot="icon-only"></ion-icon>
</ion-button>
<!--Favourise Cocktail -->
<ion-button
color="success"
@click="doFavouriseCocktail(chosenCocktail)"
>
<ion-icon
v-if="chosenCocktail.favourite == true"
slot="icon-only"
:icon="star"
class="icon-star-true"
></ion-icon>
<ion-icon
v-else
slot="icon-only"
:icon="star"
class="icon-star-false"
></ion-icon>
</ion-button> </ion-button>
<!--Next Cocktail--> <!--Next Cocktail-->
<ion-button color="success" @click="doShake()" <ion-button color="primary" @click="doShake()"
>Shake again</ion-button >Shake again</ion-button
> >
</div> </div>
@@ -109,7 +131,7 @@ import {
IonButton, IonButton,
IonImg, IonImg,
} from "@ionic/vue"; } from "@ionic/vue";
import { camera } from "ionicons/icons"; import { camera, star } from "ionicons/icons";
export default { export default {
name: "Shake", name: "Shake",
components: { components: {
@@ -148,11 +170,17 @@ export default {
}, },
}, },
setup() { setup() {
const { takePhoto } = useStorage(); const { takePhoto, favouriseCocktail } = useStorage();
const doFavouriseCocktail = async (cocktail) => {
favouriseCocktail(cocktail);
};
return { return {
camera, doFavouriseCocktail,
takePhoto, takePhoto,
camera,
star,
}; };
}, },
}; };
@@ -203,4 +231,16 @@ ion-img.bigimage {
ion-button { ion-button {
margin: 10px; margin: 10px;
} }
.icon-star-false {
color: rgb(0, 0, 0);
}
.icon-star-true {
color: rgb(255, 238, 0);
}
.start-icon{
margin: auto;
max-width: 80%;
height: auto;
border-radius: 5%;
}
</style> </style>