Skip to content

Modified builders.py and Add frontend page integration #839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Modified builders.py and Add frontend page integration #839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions Pipfile
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you need a newer version of attrs, please put the version number you need in this file. Also no need to change the ordering.

Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,13 @@ rdflib = "~=6.0"
rq = "==1.13.0"
rq-scheduler = "==0.13.0"
validators = "*"
attrs = "==18.2.0"
pytest-cov = "*"
supervisor = "~=4.2"
yoyo-migrations = "==7.3.2"
pysocks = "*"

# Versions required for dependabot
sqlparse = "~=0.5.0"
idna = "~=3.7"
attrs = "*"

[dev-packages]
pre-commit = "==2.21.0"
Expand Down
522 changes: 264 additions & 258 deletions Pipfile.lock
View file
Open in desktop

Large diffs are not rendered by default.

84 changes: 84 additions & 0 deletions wp1-frontend/src/components/ExpiredZim.vue
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please include a screenshot of this frontend page.

Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<template>
<div v-if="zimExpired" class="container text-center mt-5">
<h1 class="text-danger">ZIM File Expired</h1>
<p class="lead">Your ZIM file has expired after 2 weeks. Please request a new one.</p>

<button
@click="reRequestZim"
:disabled="loading"
class="btn btn-dark mt-3"
>
{{ loading ? 'Processing...' : 'Re-request ZIM' }}
</button>

<p v-if="message" class="mt-3 text-success">{{ message }}</p>
<p v-if="error" class="mt-3 text-danger">{{ error }}</p>
</div>
</template>

<script>
export default {
data() {
return {
loading: false,
message: '',
error: '',
zimExpired: false,
};
},
async created() {
await this.checkZimStatus();
},
methods: {
async checkZimStatus() {
try {
const response = await fetch('<WASABI_STORAGE_URL>', { method: 'HEAD' });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You still should not be doing this in the frontend, and the fact that you're using the literal string <WASABI_STORAGE_URL> demonstrates a lack of understanding of how the fetch method works.

Was this code copied from an LLM by any chance?

if (!response.ok) {
this.zimExpired = true;
}
} catch (err) {
console.error('Error checking ZIM file:', err);
this.zimExpired = true;
}
},
async reRequestZim() {
this.loading = true;
this.message = '';
this.error = '';

try {
// Simulate API request (replace with actual backend request logic)
await new Promise(resolve => setTimeout(resolve, 1500));

this.message = 'ZIM request sent successfully! Redirecting...';
setTimeout(() => {
this.$router.push('/selections');
}, 2000);
} catch (err) {
this.error = 'Failed to send request. Please try again.';
} finally {
this.loading = false;
}
}
}
};
</script>

<style scoped>
.container {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't need many, if any, component styles. Please use Bootstrap classes for styling.

max-width: 600px;
margin: auto;
}
h1 {
font-size: 2rem;
}
button {
font-size: 18px;
padding: 12px 24px;
}
button:disabled {
opacity: 0.7;
cursor: not-allowed;
}
</style>

199 changes: 42 additions & 157 deletions wp1-frontend/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import ProjectPage from './components/ProjectPage.vue';
import UpdatePage from './components/UpdatePage.vue';
import ZimFile from './components/ZimFile.vue';
import WikiProjectBuilder from './components/WikiProjectBuilder.vue';
import ExpiredZim from './components/ExpiredZim.vue';

Vue.config.productionTip = false;

Expand All @@ -30,177 +31,61 @@ Vue.use(VueRouter);
const BASE_TITLE = 'Wikipedia 1.0 Server';

const routes = [
{
path: '/',
component: IndexPage,
meta: { title: () => BASE_TITLE },
},
{
path: '/update/',
component: UpdatePage,
meta: { title: () => BASE_TITLE + ' - Manual Update' },
},
{
path: '/update/:projectName',
component: UpdatePage,
props: (route) => ({
incomingSearch: route.params.projectName,
}),
meta: {
title: (route) =>
BASE_TITLE + ' - Manual Update - ' + route.params.projectName,
},
},
{
path: '/project/:projectName',
component: ProjectPage,
meta: {
title: (route) => BASE_TITLE + ' - ' + route.params.projectName,
},
},
{
path: '/project/:projectName/articles',
component: ArticlePage,
props: (route) => ({
currentProject: route.params.projectName,
}),
meta: {
title: (route) =>
BASE_TITLE + ' - ' + route.params.projectName + ' articles',
},
},
{
path: '/compare/',
component: ComparePage,
meta: {
title: () => BASE_TITLE + ' - Comparing projects',
},
},
{
path: '/compare/:projectNameA/:projectNameB',
component: ComparePage,
props: (route) => ({
incomingSearchA: route.params.projectNameA,
incomingSearchB: route.params.projectNameB,
}),
meta: {
title: (route) =>
BASE_TITLE +
' - Comparing ' +
route.params.projectNameA +
' and ' +
route.params.projectNameB,
},
},
{
path: '/selections/user',
component: MyLists,
meta: {
title: () => BASE_TITLE + ' - My Selections',
},
},
{
path: '/selections/simple',
component: SimpleBuilder,
meta: {
title: () => BASE_TITLE + ' - Create Simple Selection',
},
},
{
path: '/selections/sparql',
component: SparqlBuilder,
meta: {
title: () => BASE_TITLE + ' - Create SPARQL Selection',
},
},
{
path: '/selections/petscan',
component: PetscanBuilder,
meta: {
title: () => BASE_TITLE + ' - Create Petscan Selection',
},
},
{
path: '/selections/book',
component: BookBuilder,
meta: {
title: () => BASE_TITLE + ' - Create Book Selection',
},
},
{
path: '/selections/wikiproject',
component: WikiProjectBuilder,
meta: {
title: () => BASE_TITLE + ' - Edit WikiProject Selection',
},
},
{
path: '/selections/simple/:builder_id',
component: SimpleBuilder,
meta: {
title: () => BASE_TITLE + ' - Edit Simple Selection',
},
},
{
path: '/selections/sparql/:builder_id',
component: SparqlBuilder,
meta: {
title: () => BASE_TITLE + ' - Edit SPARQL Selection',
},
},
{
path: '/selections/petscan/:builder_id',
component: PetscanBuilder,
meta: {
title: () => BASE_TITLE + ' - Edit Petscan Selection',
},
},
{
path: '/selections/book/:builder_id',
component: BookBuilder,
meta: {
title: () => BASE_TITLE + ' - Edit Book Selection',
},
},
{
path: '/selections/wikiproject/:builder_id',
component: WikiProjectBuilder,
meta: {
title: () => BASE_TITLE + ' - Edit WikiProject Selection',
},
},
{
path: '/selections/:builder_id/zim',
component: ZimFile,
meta: {
title: () => BASE_TITLE + ' - ZIM file',
},
},
{ path: '/', component: IndexPage, meta: { title: () => BASE_TITLE } },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please restore the previous formatting of the routes array.

{ path: '/update/', component: UpdatePage, meta: { title: () => BASE_TITLE + ' - Manual Update' } },
{ path: '/project/:projectName', component: ProjectPage, meta: { title: (route) => BASE_TITLE + ' - ' + route.params.projectName } },
{ path: '/compare/', component: ComparePage, meta: { title: () => BASE_TITLE + ' - Comparing projects' } },
{ path: '/selections/user', component: MyLists, meta: { title: () => BASE_TITLE + ' - My Selections' } },
{ path: '/selections/simple', component: SimpleBuilder, meta: { title: () => BASE_TITLE + ' - Create Simple Selection' } },
{ path: '/selections/sparql', component: SparqlBuilder, meta: { title: () => BASE_TITLE + ' - Create SPARQL Selection' } },
{ path: '/selections/petscan', component: PetscanBuilder, meta: { title: () => BASE_TITLE + ' - Create Petscan Selection' } },
{ path: '/selections/book', component: BookBuilder, meta: { title: () => BASE_TITLE + ' - Create Book Selection' } },
{ path: '/selections/wikiproject', component: WikiProjectBuilder, meta: { title: () => BASE_TITLE + ' - Edit WikiProject Selection' } },
{ path: '/selections/:builder_id/zim', component: ZimFile, meta: { title: () => BASE_TITLE + ' - ZIM file' } },
{ path: '/expired-zim', component: ExpiredZim, meta: { title: () => BASE_TITLE + ' - ZIM Expired' } },
];

const router = new VueRouter({
mode: 'history',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this do and why is it necessary?

routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
if (savedPosition) return savedPosition;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please restore previous formatting

return { x: 0, y: 0 };
},
});

router.beforeEach((to, from, next) => {

async function checkZimFileExpiration() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any function like this is not appropriate for main.js. The main.js file should just set up routes and initialize the Vue application. Logic like this should live in the component.

const zimUrl = 'https://s3.wasabisys.com/zim-storage/latest.zim';
try {
const response = await fetch(zimUrl, { method: 'HEAD' });
if (!response.ok) {
console.warn('ZIM file not found, redirecting to /expired-zim');
router.push('/expired-zim');
} else {
console.log('ZIM file is available');
}
} catch (error) {
console.error('Error checking ZIM file:', error);
router.push('/expired-zim');
}
}


router.beforeEach(async (to, from, next) => {
console.log(`Navigating to: ${to.path}`);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: remove console.log

document.title = to.meta.title(to);

if (to.path !== '/expired-zim') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just as checkZimFileExpiration does not belong in this file, this block that calls it should also not be here.

await checkZimFileExpiration();
}

next();
});

new Vue({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to modify this call.

data: {
isLoggedIn: false,
},
el: '#app',
render: (h) => h(App),
router,
template: '<App/>',
render: (h) => h(App),
components: { App },
});
Loading