ydeng/props
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implemented groundwork for search configuration.

Browse Source
This commit is contained in:
Harrison Deng
2021-07-22 16:12:27 -05:00
parent 3129e5e564
commit 2719142538
41 changed files with 1037 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
Props/assets/images/logo-simplified.svg Normal file
View File

@@ -0,0 +1,232 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="130.02815mm"
height="183.73235mm"
viewBox="0 0 130.02815 183.73235"
version="1.1"
id="svg5"
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
sodipodi:docname="logo-simplified.svg"
inkscape:export-filename="C:\Users\yunya\Documents\Props\Props\client\src\assets\images\logo.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:snap-global="true"
inkscape:zoom="0.4734482"
inkscape:cx="11.616899"
inkscape:cy="186.92647"
inkscape:window-width="1920"
inkscape:window-height="1027"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-40.717182,-65.583996)">
<rect
style="fill:#51b6bf;fill-opacity:1;stroke:none;stroke-width:0.394384"
id="rect846"
width="130.02815"
height="180.11604"
x="40.717182"
y="69.200294"
ry="7.2278728" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.355205"
id="rect6139"
width="114.73653"
height="165.58026"
x="48.362995"
y="76.468185"
ry="6.6445661" />
<g
id="g20855"
transform="translate(0,-4.5861139)">
<rect
style="fill:none;fill-opacity:1;stroke:#3b3485;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4822-1"
width="8.1061144"
height="8.1061144"
x="56.92775"
y="113.97274"
ry="1.3718038" />
<rect
style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:1.86051;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5136-7"
width="42.169209"
height="3.4690557"
x="69.150803"
y="116.29127"
ry="1.7345278" />
</g>
<g
id="g20859"
transform="translate(0,-7.0555611)">
<rect
style="fill:none;fill-opacity:1;stroke:#3b3485;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4822-14"
width="8.1061144"
height="8.1061144"
x="56.92775"
y="127.76641"
ry="1.3718038" />
<rect
style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:1.43107;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5136-7-2"
width="21.986813"
height="3.9363635"
x="68.953468"
y="129.85129"
ry="1.9681817" />
</g>
<g
id="g20845"
transform="translate(0,-2.1166667)">
<rect
style="fill:none;fill-opacity:1;stroke:#3b3485;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4822"
width="8.1061144"
height="8.1061144"
x="56.92775"
y="100.17907"
ry="1.3718038" />
<rect
style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:1.59414;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5136"
width="28.571259"
height="3.7589138"
x="69.028404"
y="102.35267"
ry="1.8794569" />
<rect
style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:1.50408;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5136-5"
width="24.788029"
height="3.8569105"
x="102.89133"
y="102.30367"
ry="1.9284552" />
</g>
<g
id="g20863"
transform="translate(0,-9.5250005)">
<rect
style="fill:none;fill-opacity:1;stroke:#3b3485;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4822-1-4"
width="8.1061144"
height="8.1061144"
x="56.92775"
y="141.56007"
ry="1.3718038" />
<rect
style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:1.57172;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5728"
width="27.594185"
height="3.7833092"
x="69.018089"
y="143.72148"
ry="1.8916546" />
</g>
<rect
style="fill:#202042;fill-opacity:1;stroke:none;stroke-width:0.23824"
id="rect1392"
width="53.152565"
height="18.233921"
x="-132.30754"
y="-83.817917"
ry="3.4788733"
transform="scale(-1)" />
<rect
style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:2.22336;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6412"
width="73.657707"
height="2.8362327"
x="56.336582"
y="201.33577"
ry="1.4181163" />
<rect
style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:2.23876;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6414"
width="69.712616"
height="3.0383809"
x="56.344284"
y="209.24466"
ry="1.5191904" />
<rect
style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:2.42357;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6416"
width="86.988022"
height="2.8535743"
x="56.436687"
y="217.23825"
ry="1.4267871" />
<rect
style="fill:#8383bc;fill-opacity:1;stroke:none;stroke-width:2.38882;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6418"
width="83.495445"
height="2.8883159"
x="56.419315"
y="225.12207"
ry="1.444158" />
<rect
style="fill:#2f3898;fill-opacity:1;stroke:none;stroke-width:3.0459;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6295-8"
width="57.490276"
height="6.8199105"
x="76.986122"
y="87.608482"
ry="3.4099553" />
<rect
style="fill:#2f3898;fill-opacity:1;stroke:none;stroke-width:2.58155;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6490"
width="41.297459"
height="6.8199105"
x="85.082527"
y="188.09093"
ry="3.4099553" />
<rect
style="fill:#2f3898;fill-opacity:1;stroke:none;stroke-width:1.87563;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6490-3"
width="21.8001"
height="6.8199105"
x="94.831207"
y="151.63762"
ry="3.4099553" />
<rect
style="opacity:1;fill:#2bc8d7;fill-opacity:1;stroke:none;stroke-width:1.63579;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6492"
width="16.931116"
height="13.580167"
x="132.27409"
y="201.23309"
ry="2.6454868" />
<rect
style="opacity:1;fill:#dcf8f6;fill-opacity:1;stroke:none;stroke-width:1.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6932"
width="79.717339"
height="19.929335"
x="65.872589"
y="161.02196"
ry="5.6437054" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

2
Props/assets/js/main.js
View File

@@ -1,2 +1,2 @@
import "../../node_modules/bootstrap/js/dist/collapse";
import "~/node_modules/bootstrap/js/dist/collapse";
import "simplebar";

116
Props/assets/js/specific/search.js
View File

@@ -1 +1,115 @@
console.log("abc");
import { apiHttp } from "~/assets/js/services/http.js";
// All input fields.
let inputs = {
maxPriceEnabled: document.getElementById("max-price-enabled"),
maxShippingEnabled: document.getElementById("max-shipping-enabled"),
minRating: document.getElementById("min-rating"),
maxPrice: document.getElementById("max-price"),
maxShipping: document.getElementById("max-shipping"),
keepUnknownPurchases: document.getElementById("keep-unknown-purchases"),
keepUnknownReviews: document.getElementById("keep-unknown-reviews"),
keepUnknownShipping: document.getElementById("keep-unknown-shipping"),
keepUnrated: document.getElementById("keep-unrated"),
minPrice: document.getElementById("min-price"),
minPurchases: document.getElementById("min-purchases"),
minReviews: document.getElementById("min-reviews"),
shopToggles: {}
};
async function main() {
setupInteractiveBehavior();
await setupInitialValues((await apiHttp.get("/Search/Default/Outline/Filters")).data);
await setupShopToggles((await apiHttp.get("/Search/Shops/Available")).data);
document.getElementById("configuration").querySelector(".invisible").classList.remove("invisible"); // Load completed, show the UI.
}
function setupInteractiveBehavior() {
document.getElementById("config-check-toggle").addEventListener("change", function () {
let configElem = document.getElementById("configuration");
if (this.checked) {
configElem.classList.remove("d-none");
} else {
configElem.classList.add("d-none");
}
});
inputs.maxPriceEnabled.addEventListener("change", function () {
inputs.maxPrice.disabled = !this.checked;
});
inputs.maxShippingEnabled.addEventListener("change", function () {
inputs.maxShipping.disabled = !this.checked;
});
inputs.minRating.addEventListener("input", function () {
document.getElementById("min-rating-display").innerHTML = `Minimum rating: ${this.value}%`;
});
}
async function setupInitialValues(filters) {
inputs.maxShippingEnabled.checked = filters.enableMaxShippingFee;
inputs.maxShippingEnabled.dispatchEvent(new Event("change"));
inputs.maxPriceEnabled.checked = filters.enableUpperPrice;
inputs.maxPriceEnabled.dispatchEvent(new Event("change"));
inputs.keepUnknownPurchases.checked = filters.keepUnknownPurchaseCount;
inputs.keepUnknownPurchases.dispatchEvent(new Event("change"));
inputs.keepUnknownReviews.checked = filters.keepUnknownReviewCount;
inputs.keepUnknownReviews.dispatchEvent(new Event("change"));
inputs.keepUnknownShipping.checked = filters.keepUnknownShipping;
inputs.keepUnknownShipping.dispatchEvent(new Event("change"));
inputs.keepUnrated.checked = filters.keepUnrated;
inputs.keepUnrated.dispatchEvent(new Event("change"));
inputs.minPrice.value = filters.lowerPrice;
inputs.minPrice.dispatchEvent(new Event("change"));
inputs.maxShipping.value = filters.maxShippingFee;
inputs.maxShipping.dispatchEvent(new Event("change"));
inputs.minPurchases.value = filters.minPurchases;
inputs.minPurchases.dispatchEvent(new Event("change"));
inputs.minRating.value = filters.minRating * 100;
inputs.minRating.dispatchEvent(new Event("input"));
inputs.minReviews.value = filters.minReviews;
inputs.minReviews.dispatchEvent(new Event("change"));
inputs.maxPrice.value = filters.upperPrice;
inputs.maxPrice.dispatchEvent(new Event("change"));
}
async function setupShopToggles(availableShops) {
let disabledShops = (await apiHttp.get("/Search/Default/Outline/DisabledShops")).data;
let shopsElem = document.getElementById("shop-checkboxes");
availableShops.forEach(shopName => {
let id = `${shopName}-enabled`;
let shopLabelElem = document.createElement("label");
shopLabelElem.classList.add("form-check-label");
shopLabelElem.htmlFor = id;
shopLabelElem.innerHTML = `Enable ${shopName}`;
let shopCheckboxElem = document.createElement("input");
shopCheckboxElem.classList.add("form-check-input");
shopCheckboxElem.type = "checkbox";
shopCheckboxElem.id = id;
shopCheckboxElem.checked = !disabledShops.includes(shopName);
inputs.shopToggles[shopName] = shopCheckboxElem;
let shopToggleElem = document.createElement("div");
shopToggleElem.classList.add("form-check");
shopToggleElem.appendChild(shopCheckboxElem);
shopToggleElem.appendChild(shopLabelElem);
shopsElem.appendChild(shopToggleElem);
});
}
main();
// TODO: Animate configuration toggle.

11
Props/assets/scss/_variables.scss
View File

@@ -1,3 +1,12 @@
$themes: (
"light": ("background": #f4f4f4, "navbar": #FFF8F8, "main": #BDF2D5, "footer": #F2F2F2,"sub": #F4FCFC, "bold": #647b9b, "text": #1A1A1A, "muted": #797a7e),
"light": (
"background": #f4f4f4,
"navbar": #FFF8F8,
"main": #BDF2D5,
"footer": #F2F2F2,
"sub": #F4FCFC,
"bold": #647b9b,
"text": #1A1A1A,
"muted": #797a7e,
),
);

31
Props/assets/scss/main.scss
View File

@@ -1,7 +1,6 @@
@use "themer";
@use "~/node_modules/bootstrap/scss/bootstrap";
@import "~/node_modules/bootstrap-icons/font/bootstrap-icons.css";
@import "~/node_modules/simplebar/dist/simplebar.min.css";
@use "sass:color";
header > nav {
@extend .navbar-expand-lg;
@@ -33,6 +32,19 @@ main {
flex-grow: 1;
display: flex;
flex-direction: column;
.tear {
@extend .p-3;
border-top: 1px;
border-top-style: solid;
border-bottom: 1px;
border-bottom-style: solid;
@include themer.themed {
$tear: themer.color-of("background");
border-color: adjust-color($color: $tear, $lightness: -20%, $alpha: 1.0);
background-color: adjust-color($color: $tear, $lightness: -5%, $alpha: 1.0);
}
}
}
footer {
@@ -65,6 +77,16 @@ footer {
background-color: themer.color-of("sub");
}
}
&.sole {
@include themer.themed {
background-color: themer.color-of("main");
border-color: themer.color-of("sub");
border-top-style: solid;
border-bottom-style: solid;
border-width: 1em;
}
}
}
.concise {
@@ -112,4 +134,7 @@ body {
background-color: themer.color-of("background");
color: themer.color-of("text");
}
}
}
@import "~/node_modules/bootstrap-icons/font/bootstrap-icons.css";
@import "~/node_modules/simplebar/dist/simplebar.min.css";