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

Collections and items lists

This commit is contained in:
joycitta-siqueira 2022-03-14 19:40:37 -03:00
parent eea039613a
commit af450dc6c4
16 changed files with 2812 additions and 2255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -1,2 +1,2 @@
# tainacan-mobile
The Tainacan mobile app for easily insert and edit items.
tainacan-mobile
The Tainacan mobile app for easily insert and edit items.

2
capacitor.config.ts
View File

@ -2,7 +2,7 @@ import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'tainacan-mobile',
appName: 'tainacanteste',
webDir: 'dist',
bundledWebRuntime: false
};

2
ionic.config.json
View File

@ -1,5 +1,5 @@
{
"name": "tainacan-mobile",
"name": "tainacanteste",
"integrations": {
"capacitor": {}
},

4595
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@ -1,5 +1,5 @@
{
"name": "tainacan-mobile",
"name": "tainacanteste",
"version": "0.0.1",
"private": true,
"scripts": {
@ -10,19 +10,21 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@capacitor/app": "1.1.0",
"@capacitor/core": "3.4.0",
"@capacitor/app": "1.1.1",
"@capacitor/core": "3.4.3",
"@capacitor/haptics": "1.1.4",
"@capacitor/keyboard": "1.2.1",
"@capacitor/status-bar": "1.0.7",
"@capacitor/keyboard": "1.2.2",
"@capacitor/status-bar": "1.0.8",
"@ionic/vue": "^6.0.0",
"@ionic/vue-router": "^6.0.0",
"core-js": "^3.6.5",
"vue": "^3.2.21",
"vue-router": "^4.0.12"
"vue-router": "^4.0.12",
"vuex": "^4.0.2"
},
"devDependencies": {
"@capacitor/cli": "3.4.0",
"@capacitor/cli": "3.4.3",
"@ionic/lab": "3.2.11",
"@types/jest": "^27.0.2",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

51
src/components/base/BaseLayout.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-img width="80" height="80" :src="image" />
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button :default-href="pageDefaultBackLink"></ion-back-button>
</ion-buttons>
<ion-title> {{ pageTitle }} </ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<slot />
</ion-content>
</ion-page>
</template>
<script>
import {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonBackButton,
IonButtons,
IonImg,
} from '@ionic/vue';
import { computed } from 'vue';
export default {
props: ['pageTitle', 'pageDefaultBackLink'],
components: {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonBackButton,
IonButtons,
IonImg,
},
setup(){
const image = computed (() => require('../../assets/logo.png'))
return {
image,
}
}
}
</script>

8
src/main.ts
View File

@ -1,6 +1,9 @@
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 { IonicVue } from '@ionic/vue';
@ -22,10 +25,15 @@ import '@ionic/vue/css/display.css';
/* Theme variables */
import './theme/variables.css';
import './theme/core.css'; //importei do arquivo criado
const app = createApp(App)
.use(IonicVue)
.use(router);
// .use(store);
app.component('base-layout', BaseLayout);
router.isReady().then(() => {
app.mount('#app');

48
src/pages/ColletionsList.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<base-layout page-title="Collections List">
<ion-list>
<ion-item v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
<ion-thumbnail slot="start"> <!-- verificar se existe a imagem de fato -->
<ion-img :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
</ion-thumbnail>
<ion-label> {{ collection.name }} </ion-label>
</ion-item>
</ion-list>
</base-layout>
</template>
<script>
import {
IonList,
IonItem,
IonImg,
IonThumbnail,
IonLabel,
} from '@ionic/vue';
import BaseLayout from '@/components/base/BaseLayout.vue';
export default {
components: {
IonList,
IonItem,
IonImg,
IonThumbnail,
IonLabel,
BaseLayout
},
data() {
return {
collections: [],
};
},
created(){
fetch("https://museucasadahera.acervos.museus.gov.br/wp-json/tainacan/v2/collections?perpage=4&orderby=modified")
.then((response) => response.json())
.then((data) => {
this.collections = data;
});
},
}
</script>

109
src/pages/HomePage.vue Normal file
View File

@ -0,0 +1,109 @@
<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>

36
src/pages/ItemsList.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<base-layout page-title="Items List" page-default-back-link="/collections">
<ion-item v-for="item of items" :key="item.id">
<ion-label> {{ item.title }} </ion-label>
</ion-item>
</base-layout>
</template>
<script>
import {
IonItem,
IonLabel,
} from '@ionic/vue';
import BaseLayout from '@/components/base/BaseLayout.vue';
export default {
components: {
IonItem,
IonLabel,
BaseLayout
},
data() {
return {
items: [],
collectionId: this.$route.params.id,
};
},
created(){
fetch(`https://museucasadahera.acervos.museus.gov.br/wp-json/tainacan/v2/collection/${this.collectionId}/items`)
.then((response) => response.json())
.then((data) => {
this.items = data.items;
});
},
}
</script>

13
src/router/index.ts
View File

@ -1,16 +1,19 @@
import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import HomePage from '../views/HomePage.vue'
import ColletionsList from '../pages/ColletionsList.vue';//futuro login
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home'
redirect: '/collections'
},
{
path: '/home',
name: 'Home',
component: HomePage
path: '/collections',
component: ColletionsList
},
{
path: '/collections/:id',
component: () => import('../pages/ItemsList.vue')
}
]

4
src/theme/core.css Normal file
View File

@ -0,0 +1,4 @@
ion-toolbar{
--background: var(--ion-color-primary);
--color: var(--ion-color-primary-contrast);
}

111
src/theme/variables.css
View File

@ -3,77 +3,62 @@ http://ionicframework.com/docs/theming/ */
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
--ion-color-primary: #298596;
--ion-color-primary-rgb: 41,133,150;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #247584;
--ion-color-primary-tint: #3e91a1;
/** secondary **/
--ion-color-secondary: #3dc2ff;
--ion-color-secondary-rgb: 61, 194, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #36abe0;
--ion-color-secondary-tint: #50c8ff;
--ion-color-secondary: #4ea2ad;
--ion-color-secondary-rgb: 78,162,173;
--ion-color-secondary-contrast: #000000;
--ion-color-secondary-contrast-rgb: 0,0,0;
--ion-color-secondary-shade: #458f98;
--ion-color-secondary-tint: #60abb5;
/** tertiary **/
--ion-color-tertiary: #5260ff;
--ion-color-tertiary-rgb: 82, 96, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #4854e0;
--ion-color-tertiary-tint: #6370ff;
--ion-color-tertiary: #76c6cc;
--ion-color-tertiary-rgb: 118,198,204;
--ion-color-tertiary-contrast: #000000;
--ion-color-tertiary-contrast-rgb: 0,0,0;
--ion-color-tertiary-shade: #68aeb4;
--ion-color-tertiary-tint: #84ccd1;
/** success **/
--ion-color-success: #2dd36f;
--ion-color-success-rgb: 45, 211, 111;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #28ba62;
--ion-color-success-tint: #42d77d;
--ion-color-success: #2dd36f;
--ion-color-success-rgb: 45,211,111;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-shade: #28ba62;
--ion-color-success-tint: #42d77d;
/** warning **/
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255, 196, 9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255,196,9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
/** danger **/
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235, 68, 90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235,68,90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
/** dark **/
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34, 36, 40;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146,148,156;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
/** medium **/
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146, 148, 156;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244,245,248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0,0,0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
/** light **/
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 245, 248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}
@media (prefers-color-scheme: dark) {

67
src/views/HomePage.vue
View File

@ -1,67 +0,0 @@
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
}
});
</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>

1
tsconfig.json
View File

@ -1,6 +1,7 @@
{
"compilerOptions": {
"target": "esnext",
"noImplicitThis": false,
"module": "esnext",
"strict": true,
"jsx": "preserve",