mirror of
https://github.com/bellingcat/auto-archiver-setup-tool.git
synced 2026-06-20 09:28:36 +03:00
Initial working version
This commit is contained in:
Logan Williams
76
src/components/DocCard.vue
Normal file
76
src/components/DocCard.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<v-card class="doc">
|
||||
<v-card-title>{{ doc.name }}</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="doc-timestamp">
|
||||
Created: {{ new Date(doc.timestamp).toLocaleString() }}
|
||||
</div>
|
||||
<div class="doc-archived">
|
||||
Last archived:
|
||||
{{
|
||||
doc.lastArchived
|
||||
? new Date(doc.lastArchived).toLocaleString()
|
||||
: "never"
|
||||
}}
|
||||
</div>
|
||||
<div class="doc-id">ID: {{ doc.sheetId }}</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-col>
|
||||
<v-btn :href="doc.url" target="_blank"
|
||||
>Open sheet
|
||||
<v-icon>mdi-open-in-new</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-btn>Archive now</v-btn>
|
||||
</v-col>
|
||||
<v-dialog width="500" v-model="dialog" persistent :retain-focus="false">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-col class="text-right">
|
||||
<v-btn color="red lighten-2" right v-bind="attrs" v-on="on"
|
||||
>Stop archiving</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<v-card-title>Stop archiving "{{ doc.name }}"? </v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
This will stop archiving the sheet, but will not delete the sheet or
|
||||
any of its data from your Google Drive.
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn @click="dialog = false" color="primary">Cancel</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="red" text @click="remove"> Stop archiving </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DocCard",
|
||||
props: {
|
||||
doc: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
remove() {
|
||||
this.dialog = false;
|
||||
this.$store.dispatch("removeDoc", this.doc.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
30
src/components/DocList.vue
Normal file
30
src/components/DocList.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<div class="text-h5 mt-5 mb-3" v-if="docs.length > 0">
|
||||
Your auto-archiver documents
|
||||
</div>
|
||||
<v-row v-for="doc in docs" :key="doc.sheetId">
|
||||
<v-col>
|
||||
<DocCard :doc="doc" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocCard from "@/components/DocCard.vue";
|
||||
|
||||
export default {
|
||||
name: "DocList",
|
||||
components: {
|
||||
DocCard,
|
||||
},
|
||||
computed: {
|
||||
docs() {
|
||||
return this.$store.state.docs;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br />
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-cli documentation</a
|
||||
>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>babel</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>router</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>eslint</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
||||
>Forum</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
||||
>Community Chat</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
||||
>Twitter</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-router</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>vue-devtools</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-loader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/awesome-vue"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>awesome-vue</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HelloWorld",
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
28
src/components/NavBar.vue
Normal file
28
src/components/NavBar.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<v-app-bar style="flex-grow: 0" class="text-no-wrap">
|
||||
<v-toolbar-title>Bellingcat auto archiver setup tool</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col class="nav-wrapper">
|
||||
<v-btn v-if="!user" @click="$store.dispatch('signin')">Sign In</v-btn>
|
||||
<span class="user" v-if="user">
|
||||
{{ user.email }}
|
||||
</span>
|
||||
<v-btn v-if="user" href="#" @click="$store.dispatch('signout')"
|
||||
>Sign Out</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NavBar",
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.user;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
49
src/components/Profile.vue
Normal file
49
src/components/Profile.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div
|
||||
class="card horizontal"
|
||||
style="max-width: 400px; margin: 0 auto"
|
||||
v-if="user"
|
||||
>
|
||||
<div class="card-image" style="margin-top: 25px; margin-left: 10px">
|
||||
<img
|
||||
:src="user.photoURL"
|
||||
style="
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid #333;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
<p>
|
||||
name: <strong>{{ user.displayName }}</strong
|
||||
><br />email:<strong>{{ user.email }}</strong
|
||||
><br />uid: <strong>{{ user.uid }}</strong> <br />provider:
|
||||
<strong class="teal-text">{{
|
||||
user.providerData[0].providerId
|
||||
}}</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProfileView",
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.user;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user