Skip to content

Commit

Permalink
various fixes, skeleton for pack page
Browse files Browse the repository at this point in the history
  • Loading branch information
@3vorp
3vorp committed Jan 17, 2024
1 parent 2b09d12 commit 15e0b6f
Show file tree
Hide file tree
Showing 15 changed files with 438 additions and 311 deletions.
94 changes: 47 additions & 47 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
{
"name": "faithful-web-app",
"version": "1.0.0",
"description": "The official Web Application for the Faithful website.",
"main": "main.js",
"scripts": {
"dev": "nodemon main.js --watch .env --watch main.js",
"start": "pm2 start \"node main.js\" --name \"APP\"",
"watch": "browser-refresh main.js",
"prettier": "prettier \"{,!(node_modules)/**/}*.js\" --config .prettierrc --write",
"test:app": "env-cmd -f ./tests/.env.test node main.js",
"test:mocha": "mocha --recursive tests/**/*.test.js",
"nodemon:app:test": "nodemon --exec pnpm run test:app",
"nodemon:mock_server": "nodemon --exec node tests/mock_server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Faithful-Resource-Pack/App.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Faithful-Resource-Pack/App/issues"
},
"homepage": "https://github.com/Faithful-Resource-Pack/App#readme",
"dependencies": {
"axios": "^1.6.3",
"btoa": "^1.2.1",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"moment": "^2.30.1",
"node-domexception": "^2.0.1",
"node-fetch": "^3.3.2",
"node-localstorage": "^3.0.5",
"prettier": "^3.1.1",
"twin-bcrypt": "^2.1.1",
"url": "^0.11.3"
},
"devDependencies": {
"@types/express": "^4.17.21",
"chai": "^5.0.0",
"cors": "^2.8.5",
"env-cmd": "^10.1.0",
"mocha": "^10.2.0",
"nodemon": "^3.0.2",
"puppeteer": "^21.6.1"
}
"name": "faithful-web-app",
"version": "1.0.0",
"description": "The official Web Application for the Faithful website.",
"main": "main.js",
"scripts": {
"dev": "nodemon main.js --watch .env --watch main.js",
"start": "pm2 start \"node main.js\" --name \"APP\"",
"watch": "browser-refresh main.js",
"prettier": "prettier \"{,!(node_modules)/**/}*.js\" --config .prettierrc --write",
"test:app": "env-cmd -f ./tests/.env.test node main.js",
"test:mocha": "mocha --recursive tests/**/*.test.js",
"nodemon:app:test": "nodemon --exec pnpm run test:app",
"nodemon:mock_server": "nodemon --exec node tests/mock_server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Faithful-Resource-Pack/App.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Faithful-Resource-Pack/App/issues"
},
"homepage": "https://github.com/Faithful-Resource-Pack/App#readme",
"dependencies": {
"axios": "^1.6.3",
"btoa": "^1.2.1",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"moment": "^2.30.1",
"node-domexception": "^2.0.1",
"node-fetch": "^3.3.2",
"node-localstorage": "^3.0.5",
"prettier": "^3.1.1",
"twin-bcrypt": "^2.1.1",
"url": "^0.11.3"
},
"devDependencies": {
"@types/express": "^4.17.21",
"chai": "^5.0.0",
"cors": "^2.8.5",
"env-cmd": "^10.1.0",
"mocha": "^10.2.0",
"nodemon": "^3.0.2",
"puppeteer": "^21.6.1"
}
}
2 changes: 1 addition & 1 deletion pages/components/drop-zone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default {
<div v-else><slot name="label"></slot></div>
</label>
</div>
`,
`,
data() {
return {
isDragging: false,
Expand Down
2 changes: 1 addition & 1 deletion pages/components/multi-range-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default {
class="my-0 pt-0"
/>
</v-form>
`,
`,
data() {
return {
ranges: [],
Expand Down
72 changes: 36 additions & 36 deletions pages/components/quick-date-picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,42 +29,42 @@ export default {
},
},
template: `
<v-card
v-bind="$attrs"
:disabled="disabled"
:color="flat ? '' : 'rgba(0,0,0,0.165)'"
:flat="flat"
:class="['qd-datepicker', flat ? '' : 'pt-2 px-4 pb-4']"
:style="style"
>
<div class="font-weight-medium text--secondary mb-2" v-text="labels.year" />
<v-text-field
class="mt-0"
placeholder="Regular"
flat hide-details dense
type="number" :value="year"
:max="this_year" min="0"
v-on:input="(e) => newYear(e)"
></v-text-field>
<div class="font-weight-medium text--secondary my-2" v-text="labels.month" />
<v-row class="qd-months" dense>
<v-col cols="2" v-for='i in 12' :key="'qd-month-col' + i">
<v-btn :key="'qd-month-' + i" class="qd-month pa-0" block :color="i-1 == month ? 'primary' : ''"
:disabled="disabled" elevation="0" small @click="() => newMonth(i)" >
{{ upper_months[i-1] }}
</v-btn>
</v-col>
</v-row>
<div class="font-weight-medium text--secondary my-2" v-text="labels.day" />
<div class="qd-days">
<v-btn
v-for='i in 31' :key="'qd-day-' + i" class="qd-day px-0"
:color="i == day ? 'primary' : ''" rounded :text="i !== day"
:elevation="i == day ? 2 : 0" @click="() => newDay(i)"
:disabled="disabled || i > days_in_month" >{{ i }}</v-btn>
</div>
</v-card>
`,
<v-card
v-bind="$attrs"
:disabled="disabled"
:color="flat ? '' : 'rgba(0,0,0,0.165)'"
:flat="flat"
:class="['qd-datepicker', flat ? '' : 'pt-2 px-4 pb-4']"
:style="style"
>
<div class="font-weight-medium text--secondary mb-2" v-text="labels.year" />
<v-text-field
class="mt-0"
placeholder="Regular"
flat hide-details dense
type="number" :value="year"
:max="this_year" min="0"
v-on:input="(e) => newYear(e)"
></v-text-field>
<div class="font-weight-medium text--secondary my-2" v-text="labels.month" />
<v-row class="qd-months" dense>
<v-col cols="2" v-for='i in 12' :key="'qd-month-col' + i">
<v-btn :key="'qd-month-' + i" class="qd-month pa-0" block :color="i-1 == month ? 'primary' : ''"
:disabled="disabled" elevation="0" small @click="() => newMonth(i)" >
{{ upper_months[i-1] }}
</v-btn>
</v-col>
</v-row>
<div class="font-weight-medium text--secondary my-2" v-text="labels.day" />
<div class="qd-days">
<v-btn
v-for='i in 31' :key="'qd-day-' + i" class="qd-day px-0"
:color="i == day ? 'primary' : ''" rounded :text="i !== day"
:elevation="i == day ? 2 : 0" @click="() => newDay(i)"
:disabled="disabled || i > days_in_month" >{{ i }}</v-btn>
</div>
</v-card>
`,
data() {
return {
date: new Date(new Date(this.value).setHours(0, 0, 0, 0)),
Expand Down
3 changes: 3 additions & 0 deletions pages/contribution/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,9 @@ export default {
<!-- Search button -->
<v-btn block color="primary" @click="startSearch()" :disabled="searchDisabled" class="mt-5">{{ $root.lang().database.labels.search_contributions }}<v-icon right dark>mdi-magnify</v-icon></v-btn>
<div class="my-2 text-h5">{{ $root.lang().database.subtitles.contribution_result }}</div>
<v-list rounded v-if="search.search_results.length" two-line class="main-container mt-4">
<v-row><v-col :cols="12/listColumns" xs="1"
v-for="(contrib_arr, index) in splittedResults"
Expand Down
2 changes: 1 addition & 1 deletion pages/gallery/gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export default {
:textureID="modalTextureID"
:textureObj="modalTextureObj"
:contributors="loadedContributors"
:packToName="packToName"
:packToName="packToName"
:onClose="() => changeShareURL()"
></gallery-modal>
Expand Down
129 changes: 123 additions & 6 deletions pages/pack/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,127 @@
export default {
name: "pack-page",
template: `
<v-container>
<div class="text-h4 py-4">
{{ $root.lang().database.titles.packs }}
</div>
</v-container>
`,
<v-container>
<div class="styles" v-html="pageStyles"></div>
<div class="text-h4 py-4">
{{ $root.lang().database.titles.packs }}
</div>
<!-- tag switcher -->
<div class="my-2 text-h5">{{ $root.lang().database.labels.select_pack_type }}</div>
<v-btn
v-for="t in packTags"
:key="t"
:class="['my-1 mr-2', activeTag(t)]"
:to="packURL(t)"
:exact="t == 'all'"
>{{ formatTags(t) }}</v-btn>
<!-- results -->
<div class="mt-4 mb-2 text-h5">{{ $root.lang().database.subtitles.pack_result }}</div>
<v-list rounded v-if="packs.length" two-line class="main-container">
<v-row class="mb-1 mt-0"><v-col :cols="12/listColumns" xs="1" class="py-0"
v-for="(pack, index) in packs"
:key="pack.id"
>
<v-list-item>
<v-list-item-avatar
:style="{
'height': '64px',
'width': '64px',
'min-width': '64px',
'border-radius': '10px'
}"
>
<v-img :src="pack.logo" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="pack.name"></v-list-item-title>
<v-list-item-subtitle v-text="(pack.tags.map(formatTags) || []).join(', ')"></v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-col></v-row>
</v-list>
<div v-else class="text-center">
<v-progress-circular
indeterminate
:color="pageColor"
></v-progress-circular>
</div>
</v-container>
`,
data() {
return {
pageColor: "amber darken-2",
pageStyles: "",
search: "",
textColorOnPage: "white--text",
tags: [],
packs: [],
};
},
methods: {
activeTag(t) {
const result = {};
result["v-btn--active " + this.pageColor + " " + this.textColorOnPage] =
(t === "all" && !this.tag) || (t && this.tag && t.toLowerCase() === this.tag.toLowerCase());

return result;
},
startSearch() {
// change url to match
const newPath = this.packURL(this.tag);
if (newPath !== this.$route.path) return this.$router.push(newPath);

// "all" tag searches everything
const url = new URL(`${this.$root.apiURL}/packs/search`);
if (this.tags.includes(this.$route.params.type))
url.searchParams.set("tag", this.$route.params.type);

axios
.get(url.toString())
.then((res) => {
this.packs = res.data;
})
.catch((err) => console.error(err));
},
packURL(tag) {
return "/packs/" + tag ?? "all";
},
formatTags(s) {
return s
.split("_")
.map((p) => (p == "progart" ? "Programmer Art" : p[0].toUpperCase() + p.slice(1)))
.join(" ");
},
},
computed: {
packTags() {
return ["all", ...this.tags];
},
tag() {
if (this.$route.params.type) return this.$route.params.type;
return "all";
},
listColumns() {
// big screens use two columns, smaller use one
return this.$vuetify.breakpoint.mdAndUp ? 2 : 1;
},
},
mounted() {
axios.get(`${this.$root.apiURL}/packs/tags`).then((res) => (this.tags = res.data));
this.startSearch();
window.updatePageStyles(this);
},
watch: {
"$route.params": {
handler(params, old) {
// if hash changed but not params
if (JSON.stringify(params) === JSON.stringify(old)) return;

// search whenever the url changes (when tag is switched)
this.startSearch();
},
},
},
};
Loading

0 comments on commit 15e0b6f

Please sign in to comment.