First Diplay
first diplay of data
This commit is contained in:
Thomas
@@ -37,7 +37,7 @@
|
||||
<v-spacer></v-spacer>
|
||||
</v-toolbar>
|
||||
<v-content>
|
||||
<v-container fluid fill-height>
|
||||
<v-container fluid >
|
||||
<v-slide-y-transition mode="out-in">
|
||||
<router-view></router-view>
|
||||
</v-slide-y-transition>
|
||||
@@ -53,20 +53,19 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'my-project',
|
||||
name: 'Météo app',
|
||||
data: () => ({
|
||||
clipped: false,
|
||||
drawer: false,
|
||||
fixed: false,
|
||||
items: [
|
||||
{ icon: 'fas fa-home', title: 'Welcome', to: '/' },
|
||||
{ icon: 'fas fa-lightbulb', title: 'Inspire', to: '/inspire' },
|
||||
{ icon: 'fas fa-leaf', title: 'RM', to: '/rm' }
|
||||
{ icon: 'fas fa-info-circle', title: 'About', to: '/about' }
|
||||
],
|
||||
miniVariant: false,
|
||||
right: true,
|
||||
rightDrawer: false,
|
||||
title: 'My awesome APP'
|
||||
title: 'Météo App'
|
||||
}),
|
||||
methods: {
|
||||
back () {
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<v-layout column justify-center>
|
||||
<v-flex>
|
||||
<img src="/static/v.png" alt="Vuetify.js" class="mb-5" />
|
||||
<blockquote class="text-xs-center">
|
||||
“First, solve the problem. Then, write the code.”
|
||||
<footer>
|
||||
<small>
|
||||
<em>—John Johnson</em>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -3,41 +3,27 @@
|
||||
<v-flex xs12 md4 offset-md1 class="text-xs-center centered">
|
||||
<img id="logo" class="logo" src="~@/assets/logo.png" alt="electron-vue">
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 class="text-xs-center centered">
|
||||
<img id="logo" class="logo" src="/static/v.png" alt="Vuetifyjs">
|
||||
<v-flex xs10 class="mt-3">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<p>Welcome to my météo app.</p>
|
||||
<p>Search for a city to display the weather</p>
|
||||
<v-text-field label="City" box v-model="city"></v-text-field>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn primary flat router @click="getWeather">Search</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex xs10 class="mt-3">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<p>Welcome to the Electron-vue + Vuetify template.</p>
|
||||
<p>Vuetify is a progressive Material Design component framework for Vue.js. It was designed to empower developers to create amazing applications. For more information on Vuetify, check out the <a href="https://vuetifyjs.com" target="_blank">documentation</a>. If you have questions, please join the official <a href="https://chat.vuetifyjs.com/" target="_blank" title="chat">discord</a>. Find a bug? Report it on the github <a href="https://github.com/vuetifyjs/vuetify/issues" target="_blank" title="contribute">issue board</a>.</p>
|
||||
<p>Thank you for developing with Vuetify and I look forward to bringing more exciting features in the future.</p>
|
||||
<div class="text-xs-right">
|
||||
<em><small>— John Leider</small></em>
|
||||
</div>
|
||||
<h1>{{temp}}°F</h1>
|
||||
<p>Min Temperature : {{ tempMin }}</p>
|
||||
<p>Max Temperature : {{ tempMax }}</p>
|
||||
<p>Humidity : {{ humidity }}</p>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn primary flat router to="/inspire">Continue</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex xs10 class="mt-4">
|
||||
<system-information></system-information>
|
||||
</v-flex>
|
||||
<v-flex xs10 class="mt-4">
|
||||
<v-card>
|
||||
<v-card-title class="headline">Docs</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pt-3 pb-3">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn class="link-btn" @click="open('https://vuejs.org/v2/guide/')">Vue</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn class="link-btn" @click="open('https://electron.atom.io/docs/')">Electron</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn class="link-btn" @click="open('https://vuetifyjs.com')">Vuetify</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
@@ -45,13 +31,43 @@
|
||||
|
||||
<script>
|
||||
import SystemInformation from './WelcomeView/SystemInformation'
|
||||
|
||||
import axios from 'axios'
|
||||
axios.defaults.baseURL = 'http://api.openweathermap.org/data/2.5'
|
||||
export default {
|
||||
name: 'welcome',
|
||||
components: { SystemInformation },
|
||||
data () {
|
||||
return {
|
||||
city: '',
|
||||
country: '',
|
||||
weatherDescription: '',
|
||||
temp: null,
|
||||
tempMin: null,
|
||||
tempMax: null,
|
||||
humidity: null,
|
||||
key: '863668499362fb4884ebd97229f3b26b',
|
||||
url: 'http://api.openweathermap.org/data/2.5/weather'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open (link) {
|
||||
this.$electron.shell.openExternal(link)
|
||||
},
|
||||
getWeather () {
|
||||
axios.get(this.url, {
|
||||
params: {
|
||||
q: this.city,
|
||||
appid: this.key
|
||||
}
|
||||
}).then(response => {
|
||||
console.log(response.data)
|
||||
this.temp = response.data.main.temp
|
||||
this.tempMax = response.data.main.temp_max
|
||||
this.tempMin = response.data.main.temp_min
|
||||
this.humidity = response.data.main.humidity
|
||||
}).catch(errors => {
|
||||
console.log(errors)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -69,9 +85,4 @@
|
||||
{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.link-btn
|
||||
{
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<v-layout row justify-center id="wrapper">
|
||||
<v-card>
|
||||
<v-card-title class="headline">About me</v-card-title>
|
||||
<v-card-text>
|
||||
<p>French 21 years old student/developer.</p>
|
||||
<p>Working on VueJs with Electron, Native-script this is a simple app for me to learn more about the real power of vuejs.</p>
|
||||
<p>Feel free to check out my social activity, this app is also available on my GitHub for Android and IOS</p>
|
||||
<v-btn icon href="https://github.com/Thomas-Philippot/" target="_blank">
|
||||
<v-icon class="mx-3">fab fa-github</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon href="https://gitlab.com/Thomas_philippot" target="_blank">
|
||||
<v-icon class="mx-3">fab fa-gitlab</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon href="https://twitter.com/Thomas_ph35" target="_blank">
|
||||
<v-icon class="mx-3">fab fa-twitter</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon href="https://stackoverflow.com/users/7667135/thomas?tab=profile" target="_blank">
|
||||
<v-icon class="mx-3">fab fa-stack-overflow</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<div class="text-xs-right">
|
||||
<em class="mr-1"><small>Thomas Philippot</small></em>
|
||||
<v-avatar
|
||||
:size="50"
|
||||
>
|
||||
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/20915442_1995801463988796_2991472233340304141_n.jpg?_nc_cat=0&oh=5bcf157a380176c6ce648f4b5499ee25&oe=5C0A496C" alt="avatar">
|
||||
</v-avatar>
|
||||
</div>
|
||||
<hr class="my-3">
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'rm'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<v-layout row wrap justify-center id="wrapper">
|
||||
<p>Coucou RM</p>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'rm'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -11,14 +11,9 @@ export default new Router({
|
||||
component: require('@/components/WelcomeView').default
|
||||
},
|
||||
{
|
||||
path: '/inspire',
|
||||
name: 'inspire',
|
||||
component: require('@/components/InspireView').default
|
||||
},
|
||||
{
|
||||
path: '/rm',
|
||||
name: 'rm',
|
||||
component: require('@/components/rm').default
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: require('@/components/about').default
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
|
||||
Reference in New Issue
Block a user