tmdinosaurcenter
/
tainacan-mobile
mirror of https://github.com/tainacan/tainacan-mobile.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pinea and login page

This commit is contained in:
joycitta-siqueira 2022-03-26 17:42:36 -03:00
parent f9af7c9e6a
commit 3d79352536
9 changed files with 189 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
package-lock.json generated
View File

@ -15,7 +15,9 @@
"@capacitor/status-bar": "1.0.8",
"@ionic/vue": "^6.0.0",
"@ionic/vue-router": "^6.0.0",
"axios": "^0.26.1",
"core-js": "^3.6.5",
"pinia": "^2.0.12",
"vue": "^3.2.21",
"vue-router": "^4.0.12",
"vuex": "^4.0.2"
@ -5266,6 +5268,14 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
"dev": true
},
"node_modules/axios": {
"version": "0.26.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
"integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
"dependencies": {
"follow-redirects": "^1.14.8"
}
},
"node_modules/babel-jest": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@ -8908,7 +8918,6 @@
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
"dev": true,
"funding": [
{
"type": "individual",
@ -14058,6 +14067,56 @@
"node": ">=0.10.0"
}
},
"node_modules/pinia": {
"version": "2.0.12",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.12.tgz",
"integrity": "sha512-tUeuYGFrLU5irmGyRAIxp35q1OTcZ8sKpGT4XkPeVcG35W4R6cfXDbCGexzmVqH5lTQJJTXXbNGutIu9yS5yew==",
"dependencies": {
"@vue/devtools-api": "^6.1.0",
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"@vue/composition-api": "^1.4.0",
"typescript": ">=4.4.4",
"vue": "^2.6.14 || ^3.2.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/pinia/node_modules/vue-demi": {
"version": "0.12.4",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.4.tgz",
"integrity": "sha512-ztPDkFt0TSUdoq1ZI6oD730vgztBkiByhUW7L1cOTebiSBqSYfSQgnhYakYigBkyAybqCTH7h44yZuDJf2xILQ==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/pirates": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@ -16943,7 +17002,7 @@
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
"integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==",
"dev": true,
"devOptional": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@ -22244,6 +22303,14 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
"dev": true
},
"axios": {
"version": "0.26.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
"integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
"requires": {
"follow-redirects": "^1.14.8"
}
},
"babel-jest": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@ -25003,8 +25070,7 @@
"follow-redirects": {
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
"dev": true
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
},
"forever-agent": {
"version": "0.6.1",
@ -28838,6 +28904,23 @@
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
},
"pinia": {
"version": "2.0.12",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.12.tgz",
"integrity": "sha512-tUeuYGFrLU5irmGyRAIxp35q1OTcZ8sKpGT4XkPeVcG35W4R6cfXDbCGexzmVqH5lTQJJTXXbNGutIu9yS5yew==",
"requires": {
"@vue/devtools-api": "^6.1.0",
"vue-demi": "*"
},
"dependencies": {
"vue-demi": {
"version": "0.12.4",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.4.tgz",
"integrity": "sha512-ztPDkFt0TSUdoq1ZI6oD730vgztBkiByhUW7L1cOTebiSBqSYfSQgnhYakYigBkyAybqCTH7h44yZuDJf2xILQ==",
"requires": {}
}
}
},
"pirates": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@ -30975,7 +31058,7 @@
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
"integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==",
"dev": true
"devOptional": true
},
"unicode-canonical-property-names-ecmascript": {
"version": "2.0.0",

2
package.json
View File

@ -17,7 +17,9 @@
"@capacitor/status-bar": "1.0.8",
"@ionic/vue": "^6.0.0",
"@ionic/vue-router": "^6.0.0",
"axios": "^0.26.1",
"core-js": "^3.6.5",
"pinia": "^2.0.12",
"vue": "^3.2.21",
"vue-router": "^4.0.12",
"vuex": "^4.0.2"

6
src/main.ts
View File

@ -3,7 +3,7 @@ import { createApp } from 'vue'
import App from './App.vue'
import BaseLayout from './components/base/BaseLayout.vue';
import router from './router';
//import store from './store';
import { createPinia } from 'pinia';
import { IonicVue } from '@ionic/vue';
@ -30,8 +30,8 @@ import './theme/core.css'; //importei do arquivo criado
const app = createApp(App)
.use(IonicVue)
.use(router);
// .use(store);
.use(router)
.use(createPinia());
app.component('base-layout', BaseLayout);

26
src/pages/ColletionsList.vue
View File

@ -7,7 +7,7 @@
>
</ion-loading>
<ion-list>
<ion-item v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
<ion-item v-for="collection of collectionsStore.collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
<ion-thumbnail slot="start">
<ion-img v-if="collection.thumbnail.thumbnail[0]" :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
<ion-img v-else :src="image" :alt="collection.name"></ion-img>
@ -19,6 +19,9 @@
</template>
<script lang="ts">
import {
useCollectionsStore
} from '../store/storeCollections';
import {
IonList,
IonItem,
@ -43,24 +46,15 @@ export default {
const image = computed (() => require('../assets/placeholder_square_small.png'))
const isOpenRef = ref(false);
const setOpen = (state: boolean) => isOpenRef.value = state;
return { image, isOpenRef, setOpen }
},
data() {
return {
collections: [],
};
let collectionsStore = useCollectionsStore();
return { image, isOpenRef, setOpen, collectionsStore }
},
created(){
this.setOpen(true)
fetch("https://rcteste.tainacan.org/wp-json/tainacan/v2/collections?perpage=4&orderby=modified")
.then((response) => response.json())
.then((data) => {
this.collections = data;
this.setOpen(false)
});
async created(){
this.setOpen(true);
await this.collectionsStore.fetchCollections();
this.setOpen(false);
},
}
</script>

109
src/pages/HomePage.vue
View File

@ -1,109 +0,0 @@
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-img width="80" height="80" :src="image" />
</ion-toolbar>
<ion-toolbar color="primary">
<ion-title> Coleções </ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-card v-for="collection of computedObj" :key="collection.id">
<ion-card-header>
<ion-card-title>{{ collection.name }} </ion-card-title>
</ion-card-header>
</ion-card>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonCard,
IonCardHeader,
IonCardTitle,
IonImg,
} from '@ionic/vue';
import { computed, defineComponent } from 'vue';
export default defineComponent({
components: {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonCard,
IonCardHeader,
IonCardTitle,
IonImg
},
setup(){
const image = computed (() => require('../assets/logo.png'))
return {
image,
}
},
data() {
return {
collections: [],
limit: 4,
};
},
created(){
fetch("https://rcteste.tainacan.org/wp-json/tainacan/v2/collections")
.then((response) => response.json())
.then((data) => {
this.collections = data;
});
},
computed:{
computedObj(){
return this.limit ? this.collections.slice(0,this.limit) : this.collections
}
},
});
</script>
<style scoped>
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container a {
text-decoration: none;
}
</style>

18
src/pages/ItemsList.vue
View File

@ -6,7 +6,7 @@
message="Carregando..."
>
</ion-loading>
<ion-item v-for="item of items" :key="item.id">
<ion-item v-for="item of collectionsStore.items" :key="item.id">
<ion-label v-if="item.title"> {{ item.title }} </ion-label>
<ion-label v-else>Item não possui título</ion-label>
</ion-item>
@ -14,6 +14,9 @@
</template>
<script lang="ts">
import {
useCollectionsStore
} from '../store/storeCollections';
import {
IonItem,
IonLabel,
@ -31,7 +34,8 @@ export default {
setup() {
const isOpenRef = ref(false);
const setOpen = (state: boolean) => isOpenRef.value = state;
return { isOpenRef, setOpen }
let collectionsStore = useCollectionsStore();
return { isOpenRef, setOpen, collectionsStore }
},
data() {
return {
@ -40,14 +44,10 @@ export default {
};
},
created(){
async created(){
this.setOpen(true)
fetch(`https://rcteste.tainacan.org/wp-json/tainacan/v2/collection/${this.collectionId}/items?perpage=12&orderby=modified`)
.then((response) => response.json())
.then((data) => {
this.items = data.items;
this.setOpen(false)
});
await this.collectionsStore.fetchItems(this.collectionId)
this.setOpen(false)
},
}
</script>

68
src/pages/MuseumsLogin.vue
View File

@ -5,57 +5,57 @@
<ion-img width="10" height="10" alt="Logo Tainacan" :src="image" />
</ion-item>
<ion-item>
<ion-label position="stacked" color="primary">Link do museu</ion-label>
<ion-input
v-model="linkMuseu"
name="linkMuseu"
placeholder="URL do Museu"
autofocus="true"
id="urlMuseum"
type="text"
spellcheck="false"
autocapitalize="off"
required
></ion-input>
name="urlMuseum"
v-model.trim="urlMuseum"
required = "true"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked" color="primary">Login</ion-label>
<ion-input
v-model="username"
name="username"
type="text"
spellcheck="false"
autocapitalize="off"
required
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked" color="primary">Senha</ion-label>
<ion-input v-model="password" name="password" type="password" required></ion-input>
</ion-item>
</ion-list>
<ion-button type="submit">ACESSAR</ion-button>
</ion-list>
<ion-button @click="login">ACESSAR</ion-button>
</form>
</template>
<script lang="ts">
import {
useCollectionsStore
} from '../store/storeCollections';
import {
IonImg,
IonList,
IonItem,
IonInput,
} from '@ionic/vue';
import { computed } from 'vue';
export default {
props: ['pageTitle', 'pageDefaultBackLink'],
components: {
IonImg,
IonList,
IonItem,
IonInput,
},
data(){
return {
urlMuseum: '',
}
},
setup(){
const image = computed (() => require('../assets/logoLogin.png'))
return { image }
const image = computed (() => require('../assets/logoLogin.png'));
let collectionsStore = useCollectionsStore();
return { image, collectionsStore }
},
methods: {
login(){
this.collectionsStore.urlMuseum = this.urlMuseum;
this.$router.push('/collections');
}
}
}
</script>

40
src/store/storeCollections.ts Normal file
View File

@ -0,0 +1,40 @@
import { defineStore } from 'pinia';
import axios from 'axios'; //substitui o fetch
const useCollectionsStore = defineStore('collections', {
state () {
return {
collections: [],
items: [],
urlMuseum: '',
}
},
actions: {
async fetchCollections() {
try {
const response = await axios.get(`https://${this.urlMuseum}/wp-json/tainacan/v2/collections?perpage=4&orderby=modified`);
this.collections = response.data;
} catch (err) {
this.collections = [];
console.error('Erro no carregamento das coleções:', err);
return err;
}
},
async fetchItems(collectionId :string) {
try {
this.items = [];
const response = await axios.get(`https://${this.urlMuseum}/wp-json/tainacan/v2/collection/${collectionId}/items?perpage=12&orderby=modified`);
this.items = response.data.items;
} catch (err) {
this.items = [];
console.error('Erro no carregamento das coleções:', err);
return err;
}
}
}
})
export {
useCollectionsStore
}

2
src/theme/variables.css
View File

@ -79,5 +79,5 @@ http://ionicframework.com/docs/theming/ */
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;
--ion-input-color: var(--ion-color-primary-contrast); /* verificar */
--ion-input-background: var(--ion-color-primary); /* verificar */
}