forked from sagi/seepur
74 lines
1.9 KiB
Vue
74 lines
1.9 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<nav class="level">
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<p class="subtitle">
|
|
<i class="fa fa-users"></i> My Connections
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-right">
|
|
<!-- <div class="level-item">
|
|
<a href="#" class="button is-success">
|
|
<i class="fa fa-plus"></i> Add a new Child
|
|
</a>
|
|
</div>-->
|
|
<div class="level-item">
|
|
<a href="#" class="button is-primary">
|
|
<i class="fa fa-plug"></i> Connect to a child
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="card m-b-lg">
|
|
<div v-for="connection in connections" :key="connection.id">
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-48x48">
|
|
<img :src="connection.avatar" alt="Placeholder image" class="is-rounded is-avatar" />
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<p class="title is-4">{{connection.name}}</p>
|
|
<p class="subtitle is-6">@code</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="columns">
|
|
<div class="column" v-for="user in connection.linkedUsers" :key="user.id">
|
|
<ChildAvatar :child="user" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import ChildAvatar, { IChildAvatar } from "../components/child_avatar.vue";
|
|
import Services from "../../services/index";
|
|
let connections = [];
|
|
|
|
export default {
|
|
name: "Home",
|
|
components: {
|
|
ChildAvatar
|
|
},
|
|
beforeCreate() {},
|
|
async created() {
|
|
this.connections = await Services.ApiService.getConnections();
|
|
// console.dir(connections);
|
|
},
|
|
data() {
|
|
return {
|
|
connections
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|