10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /jlcparts/jlcpcb.py: -------------------------------------------------------------------------------- 1 | import requests 2 | import os 3 | import csv 4 | import time 5 | from typing import Optional, List, Any, Callable 6 | 7 | JLCPCB_KEY = os.environ.get("JLCPCB_KEY") 8 | JLCPCB_SECRET = os.environ.get("JLCPCB_SECRET") 9 | 10 | class JlcPcbInterface: 11 | def __init__(self, key: str, secret: str) -> None: 12 | self.key = key 13 | self.secret = secret 14 | self.token = None 15 | self.lastPage = None 16 | 17 | def _obtainToken(self) -> None: 18 | body = { 19 | "appKey": self.key, 20 | "appSecret": self.secret 21 | } 22 | headers = { 23 | "Content-Type": "application/json", 24 | } 25 | resp = requests.post("https://jlcpcb.com/external/genToken", 26 | json=body, headers=headers) 27 | if resp.status_code != 200: 28 | raise RuntimeError(f"Cannot obtain token {resp.json()}") 29 | data = resp.json() 30 | if data["code"] != 200: 31 | raise RuntimeError(f"Cannot obtain toke {data}") 32 | self.token = data["data"] 33 | 34 | def getPage(self) -> Optional[List[Any]]: 35 | if self.token is None: 36 | self._obtainToken() 37 | headers = { 38 | "externalApiToken": self.token, 39 | } 40 | if self.lastPage is None: 41 | body = {} 42 | else: 43 | body = { 44 | "lastKey": self.lastPage 45 | } 46 | resp = requests.post("https://jlcpcb.com/external/component/getComponentInfos", 47 | data=body, headers=headers) 48 | try: 49 | data = resp.json()["data"] 50 | except: 51 | raise RuntimeError(f"Cannot fetch page: {resp.text}") 52 | self.lastPage = data["lastKey"] 53 | return data["componentInfos"] 54 | 55 | def dummyReporter(progress) -> None: 56 | return 57 | 58 | def pullComponentTable(filename: str, reporter: Callable[[int], None] = dummyReporter, 59 | retries: int = 10, retryDelay: int = 5) -> None: 60 | interf = JlcPcbInterface(JLCPCB_KEY, JLCPCB_SECRET) 61 | with open(filename, "w", encoding="utf-8") as f: 62 | writer = csv.writer(f) 63 | writer.writerow([ 64 | "LCSC Part", 65 | "First Category", 66 | "Second Category", 67 | "MFR.Part", 68 | "Package", 69 | "Solder Joint", 70 | "Manufacturer", 71 | "Library Type", 72 | "Description", 73 | "Datasheet", 74 | "Stock", 75 | "Price" 76 | ]) 77 | count = 0 78 | while True: 79 | for i in range(retries): 80 | try: 81 | page = interf.getPage() 82 | break 83 | except Exception as e: 84 | if i == retries - 1: 85 | raise e from None 86 | time.sleep(retryDelay) 87 | if page is None: 88 | break 89 | for c in page: 90 | writer.writerow([ 91 | c["lcscPart"], 92 | c["firstCategory"], 93 | c["secondCategory"], 94 | c["mfrPart"], 95 | c["package"], 96 | c["solderJoint"], 97 | c["manufacturer"], 98 | c["libraryType"], 99 | c["description"], 100 | c["datasheet"], 101 | c["stock"], 102 | c["price"] 103 | ]) 104 | count += len(page) 105 | reporter(count) 106 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |  2 | 3 | # JLC PCB SMD Assembly Component Catalogue 4 | 5 | A better tool to browse the components offered by the [JLC PCB SMT Assembly 6 | Service](https://jlcpcb.com/smt-assembly). 7 | 8 | ## How To Use It? 9 | 10 | Just visit: [https://yaqwsx.github.io/jlcparts/](https://yaqwsx.github.io/jlcparts/) 11 | 12 | ## Why? 13 | 14 | Probably all of us love JLC PCB SMT assembly service. It is easy to use, cheap 15 | and fast. However, you can use only components from [their 16 | catalogue](https://jlcpcb.com/parts). This is not as bad, since the library is 17 | quite broad. However, the library UI sucks. You can only browse the categories, 18 | do full-text search. You cannot do parametric search nor sort by property. 19 | That's why I created a simple page which presents the catalogue in much nicer 20 | form. You can: 21 | - do full-text search 22 | - browse categories 23 | - parametric search 24 | - sort by any component attribute 25 | - sort by price based on quantity 26 | - easily access datasheet and LCSC product page. 27 | 28 | ## Do You Enjoy It? Does It Make Your Life Easier? 29 | 30 | [](https://ko-fi.com/E1E2181LU) 31 | 32 | Support on Ko-Fi allows me to develop such tools as this one and perform 33 | hardware-related experiments. 34 | 35 | ## How Does It Look Like? 36 | 37 | Title page 38 | 39 |  40 | 41 | Property filter 42 | 43 |  44 | 45 | Component detail 46 | 47 |  48 | 49 | 50 | ## How Does It Work? 51 | 52 | The page has no backend so it can be easily hosted on GitHub Pages. Therefore, 53 | Travis CI download XLS spreadsheet from the JLC PCB page, a Python script 54 | process it and it generates per-category JSON file with components. 55 | 56 | The frontend uses IndexedDB in the browser to store the component library and 57 | perform queries on it. Therefore, before the first use, you have to download the 58 | component library and it can take a while. Then, all the queries are performed 59 | locally. 60 | 61 | ## Development 62 | 63 | To get started with developing the frontend, you will need NodeJS & Python 3. 64 | 65 | Set up the Python portion of the program by running: 66 | 67 | ``` 68 | $ virtualenv venv 69 | $ source venv/bin/activate 70 | $ pip install -e . 71 | ``` 72 | 73 | Then to download the cached parts list and process it, run: 74 | 75 | ``` 76 | $ wget https://yaqwsx.github.io/jlcparts/data/cache.zip https://yaqwsx.github.io/jlcparts/data/cache.z0{1..8} 77 | $ 7z x cache.zip 78 | $ mkdir -p web/public/data/ 79 | $ jlcparts buildtables --jobs 0 --ignoreoldstock 30 cache.sqlite3 web/public/data 80 | ``` 81 | 82 | To launch the frontend web server, run: 83 | 84 | ``` 85 | $ cd web 86 | $ npm install 87 | $ npm start 88 | ``` 89 | 90 | ## The Page Is Broken! 91 | 92 | Feel free to open an issue on GitHub. 93 | 94 | ## You Might Also Be Interested 95 | 96 | - [KiKit](https://github.com/yaqwsx/KiKit): a tool for automatic panelization of 97 | KiCAD PCBs. It can also perform fully automatic export of manufacturing data 98 | for JLC PCB assembly - read [the 99 | documentation](https://github.com/yaqwsx/KiKit/blob/master/doc/fabrication/jlcpcb.md) 100 | or produce a solder-paste stencil for populating components missing at JLC PCB - read [the 101 | documentation](https://github.com/yaqwsx/KiKit/blob/master/doc/stencil.md). 102 | - [PcbDraw](https://github.com/yaqwsx/PcbDraw): a tool for making nice schematic 103 | drawings of your boards and population manuals. 104 | -------------------------------------------------------------------------------- /.github/workflows/update_components.yaml: -------------------------------------------------------------------------------- 1 | name: "Update component database" 2 | on: 3 | push: 4 | pull_request: 5 | schedule: 6 | # - cron: '0 3 * * *' 7 | jobs: 8 | build_and_update: 9 | name: "Update component database and frontend" 10 | runs-on: ubuntu-22.04 11 | environment: github-pages 12 | steps: 13 | - name: Maximize build space 14 | uses: easimon/maximize-build-space@master 15 | with: 16 | root-reserve-mb: 512 17 | swap-size-mb: 1024 18 | remove-dotnet: 'true' 19 | - name: Checkout 20 | uses: actions/checkout@v3 21 | - name: Install dependencies 22 | run: | 23 | sudo apt-get update 24 | sudo apt-get install -y --no-install-recommends \ 25 | python3 python3-pip nodejs npm wget zip unzip p7zip-full 26 | sudo pip3 install requests click 27 | - name: Build frontend 28 | run: | 29 | cd web 30 | if [ "$GITHUB_REPOSITORY" = 'yaqwsx/jlcparts-dev' ]; then 31 | export BASEURL=https://jlcparts-dev.honzamrazek.cz 32 | else 33 | export BASEURL=https://yaqwsx.github.io/jlcparts 34 | fi 35 | npm install --silent 36 | NODE_ENV=production PUBLIC_URL=${BASEURL} npm run build 37 | if [ $GITHUB_REPOSITORY = 'yaqwsx/jlcparts-dev' ]; then 38 | echo 'jlcparts-dev.honzamrazek.cz' > build/CNAME 39 | fi 40 | touch .nojekyll 41 | - name: Update database 42 | env: # Or as an environment variable 43 | LCSC_KEY: ${{ secrets.LCSC_KEY }} 44 | LCSC_SECRET: ${{ secrets.LCSC_SECRET }} 45 | JLCPCB_KEY: ${{ secrets.JLCPCB_KEY }} 46 | JLCPCB_SECRET: ${{ secrets.JLCPCB_SECRET }} 47 | run: | 48 | set -x 49 | sudo pip3 install -e . 50 | 51 | wget -q https://yaqwsx.github.io/jlcparts/data/cache.zip 52 | for seq in $(seq -w 01 30); do 53 | wget -q https://yaqwsx.github.io/jlcparts/data/cache.z$seq || true 54 | done 55 | 56 | 7z x cache.zip 57 | for seq in $(seq -w 01 30); do 58 | rm cache.z$seq || true 59 | done 60 | 61 | jlcparts fetchtable parts.csv 62 | 63 | jlcparts getlibrary --age 10000 \ 64 | --limit 1000 \ 65 | parts.csv cache.sqlite3 66 | jlcparts updatepreferred cache.sqlite3 67 | jlcparts buildtables --jobs 0 \ 68 | --ignoreoldstock 120 \ 69 | cache.sqlite3 web/build/data 70 | 71 | rm -f web/build/data/cache.z* 72 | zip -s 50m web/build/data/cache.zip cache.sqlite3 73 | - name: Tar artifact # Artifact are case insensitive, this is workaround 74 | run: tar -czf web_build.tar.gz web/build/ 75 | - name: Upload artifact 76 | uses: actions/upload-artifact@v4 77 | with: 78 | name: web_build 79 | path: web_build.tar.gz 80 | retention-days: 14 81 | - name: Upload table 82 | uses: actions/upload-artifact@v4 83 | with: 84 | name: component_table 85 | path: parts.csv 86 | retention-days: 14 87 | deploy: 88 | name: "Deploy" 89 | runs-on: ubuntu-22.04 90 | needs: build_and_update 91 | if: github.ref == 'refs/heads/master' 92 | steps: 93 | - name: Checkout # Required for GH-pages deployment 94 | uses: actions/checkout@v3 95 | - name: "Download web" 96 | uses: actions/download-artifact@v4 97 | with: 98 | name: web_build 99 | - name: Untar artifact 100 | run: tar -xzf web_build.tar.gz 101 | - name: Deploy to GH Pages 102 | uses: JamesIves/github-pages-deploy-action@v4.4.3 103 | with: 104 | branch: gh-pages 105 | folder: web/build 106 | single-commit: true 107 | -------------------------------------------------------------------------------- /web/src/units.js: -------------------------------------------------------------------------------- 1 | import { naturalCompare } from '@discoveryjs/natural-compare'; 2 | 3 | // Return comparator for given quantity 4 | export function quantityComparator(quantityName) { 5 | const numericQuantities = [ 6 | "resistance", "voltage", "current", "power", "count", "capacitance", 7 | "length", "inductance", "temperature", "charge" 8 | ]; 9 | if (numericQuantities.includes(quantityName)) 10 | return numericComparator; 11 | return naturalCompare; 12 | } 13 | 14 | // Return formatter for given quantity 15 | export function quantityFormatter(quantityName) { 16 | const formatters = { 17 | resistance: resistanceFormatter, 18 | voltage: siFormatter("V"), 19 | current: siFormatter("A"), 20 | power: siFormatter("W"), 21 | capacitance: siFormatter("F"), 22 | frequency: siFormatter("Hz"), 23 | length: siFormatter("m"), 24 | inductance: siFormatter("H"), 25 | charge: siFormatter("C"), 26 | count: x => String(x), 27 | temperature: x => `${x} °C` 28 | }; 29 | 30 | let formatter = formatters[quantityName]; 31 | if (formatter) 32 | return formatter 33 | return x => String(x); 34 | } 35 | 36 | function numericComparator(a, b) { 37 | if (a === "NaN") 38 | a = undefined; 39 | if (b === "NaN") 40 | b = undefined; 41 | if (a === undefined && b === undefined) 42 | return 0; 43 | if (a === undefined) 44 | return 1; 45 | if (b === undefined) 46 | return -1; 47 | 48 | return a - b; 49 | } 50 | 51 | function removeTrailingChar(str, charToRemove) { 52 | while(str.endsWith(charToRemove)) { 53 | str = str.slice(0, -1); 54 | } 55 | return str; 56 | } 57 | 58 | 59 | // Format values like 1u6, 1k6, 1M9 60 | function infixMagnitudeFormatter(value, letter, order) { 61 | value = value / order; 62 | let integralPart = Math.floor(value); 63 | let fractionalPart = (value - integralPart) * 1000; // Number of significant digits 64 | let fractionalPartStr = removeTrailingChar(fractionalPart.toFixed(0).padStart(3, '0'), '0') 65 | 66 | return String(integralPart) + letter + fractionalPartStr; 67 | } 68 | 69 | function siFormatterImpl(value, unit) { 70 | if (value === "NaN") 71 | return "-"; 72 | if (value === 0) 73 | return "0 " + unit; 74 | let prefixes = [ 75 | { magnitude: 1e-12, prefix: "p" }, 76 | { magnitude: 1e-9, prefix: "n" }, 77 | { magnitude: 1e-6, prefix: "μ" }, 78 | { magnitude: 1e-3, prefix: "m" }, 79 | { magnitude: 1, prefix: "" }, 80 | { magnitude: 1e3, prefix: "k" }, 81 | { magnitude: 1e6, prefix: "M" }, 82 | { magnitude: 1e9, prefix: "G" } 83 | ]; 84 | // Choose prefix to use 85 | let prefix; 86 | for (var idx = 0; idx < prefixes.length; idx++) { 87 | if (idx === prefixes.length - 1 || Math.abs(value) < prefixes[idx + 1].magnitude) { 88 | prefix = prefixes[idx]; 89 | break; 90 | } 91 | } 92 | 93 | return (value / prefix.magnitude) 94 | .toFixed(6) 95 | .replace(/0*$/,'') 96 | .replace(/[.,]$/,'') + " " + prefix.prefix + unit; 97 | } 98 | 99 | function siFormatter(unit) { 100 | return value => siFormatterImpl(value, unit); 101 | } 102 | 103 | function resistanceFormatter(resistance) { 104 | if (resistance === "NaN") 105 | return "-" 106 | if (resistance === 0) 107 | return "0R"; 108 | if (resistance < 1) { 109 | return (resistance * 1000).toFixed(6).replace(/0*$/,'').replace(/[.,]$/,'') + "mR"; 110 | } 111 | if (resistance < 1e3) { 112 | // Format with R, e.g., 1R 5R6 113 | return infixMagnitudeFormatter(resistance, "R", 1); 114 | } 115 | if (resistance < 1e6) { 116 | // Format with k, e.g, 3k3 56k 117 | return infixMagnitudeFormatter(resistance, "k", 1e3); 118 | } 119 | if (resistance < 1e9) { 120 | // Format with M, e.g., 1M, 5M6 121 | return infixMagnitudeFormatter(resistance, "M", 1e6); 122 | } 123 | // Format with G 124 | return infixMagnitudeFormatter(resistance, "G", 1e9); 125 | } 126 | -------------------------------------------------------------------------------- /web/src/jlc.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { InlineSpinbox } from "./componentTable.js" 3 | import { CORS_KEY } from "./corsBridge.js"; 4 | 5 | export function getQuantityPrice(quantity, pricelist) { 6 | return pricelist.find(pricepoint => 7 | quantity >= pricepoint.qFrom && (quantity <= pricepoint.qTo || !pricepoint.qTo) 8 | )?.price ?? pricelist[0]?.price; 9 | } 10 | 11 | export class AttritionInfo extends React.Component { 12 | constructor(props) { 13 | super(props); 14 | this.props = props; 15 | this.state = {} 16 | } 17 | 18 | componentDidMount() { 19 | fetch("https://cors.bridged.cc/https://jlcpcb.com/shoppingCart/smtGood/selectSmtComponentList", { 20 | method: 'POST', 21 | headers: { 22 | "Accept": 'application/json, text/plain, */*', 23 | "Content-Type": 'application/json;charset=UTF-8', 24 | "x-cors-grida-api-key": CORS_KEY 25 | }, 26 | body: JSON.stringify({ 27 | currentPage: 1, 28 | pageSize: 25, 29 | keyword: this.props.component.lcsc, 30 | firstSortName: "", 31 | secondeSortName: "", 32 | searchSource: "search", 33 | componentAttributes: [] 34 | }) 35 | }) 36 | .then(response => { 37 | if (!response.ok || response.status !== 200) { 38 | throw new Error(`Cannot fetch ${this.props.component.lcsc}: ${response.statusText}`); 39 | } 40 | return response.json(); 41 | }) 42 | .then(({data}) => { 43 | const lcscId = data.componentPageInfo.list.find(({componentCode}) => componentCode === this.props.component.lcsc)?.componentId; 44 | if (lcscId === undefined) { 45 | throw new Error(`No search results for ${this.props.component.lcsc}`); 46 | } 47 | return fetch("https://cors.bridged.cc/https://jlcpcb.com/shoppingCart/smtGood/getComponentDetail?componentLcscId=" + lcscId, { 48 | headers: { 49 | "x-cors-grida-api-key": CORS_KEY 50 | }, 51 | }); 52 | }) 53 | .then(response => { 54 | if (!response.ok || response.status !== 200) { 55 | throw new Error(`Cannot fetch ${this.props.lcsc}: ${response.statusText}`); 56 | } 57 | return response.json(); 58 | }) 59 | .then(({data}) => { 60 | this.setState({data}); 61 | }) 62 | .catch(error => { 63 | this.setState({error: true, errorMessage: error.toString()}); 64 | console.log(error); 65 | }); 66 | } 67 | 68 | price() { 69 | let q = Math.max(parseInt(this.props.quantity) + parseInt(this.state.data.lossNumber), 70 | this.state.data.leastNumber); 71 | return q * getQuantityPrice(q, this.props.component.price); 72 | } 73 | 74 | render() { 75 | let data = this.state.data; 76 | if (this.state.error) { 77 | return
78 | Cannot fetch attrition data from JLC website: {this.state.errorMessage}.
79 |
80 | }
81 | if (data)
82 | return | Attrition: | 87 |{data.lossNumber} pcs | 88 |
| Minimal order quantity: | 94 |{data.leastNumber} pcs | 95 |
| Price for {this.props.quantity} pcs: | 100 |{Math.round((this.price() + Number.EPSILON) * 1000) / 1000} USD | 101 |
105 |
;
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/web/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/web/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl, {
104 | headers: { 'Service-Worker': 'script' },
105 | })
106 | .then(response => {
107 | // Ensure service worker exists, and that we really are getting a JS file.
108 | const contentType = response.headers.get('content-type');
109 | if (
110 | response.status === 404 ||
111 | (contentType != null && contentType.indexOf('javascript') === -1)
112 | ) {
113 | // No service worker found. Probably a different app. Reload the page.
114 | navigator.serviceWorker.ready.then(registration => {
115 | registration.unregister().then(() => {
116 | window.location.reload();
117 | });
118 | });
119 | } else {
120 | // Service worker found. Proceed as normal.
121 | registerValidSW(swUrl, config);
122 | }
123 | })
124 | .catch(() => {
125 | console.log(
126 | 'No internet connection found. App is running in offline mode.'
127 | );
128 | });
129 | }
130 |
131 | export function unregister() {
132 | if ('serviceWorker' in navigator) {
133 | navigator.serviceWorker.ready
134 | .then(registration => {
135 | registration.unregister();
136 | })
137 | .catch(error => {
138 | console.error(error.message);
139 | });
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/test/testParts.csv:
--------------------------------------------------------------------------------
1 | LCSC Part;First Category;Second Category;MFR.Part;Package;Solder Joint;Manufacturer;Library Type;Description;Datasheet;Price;Stock
2 | C25725;Resistors;Resistor Networks & Arrays;4D02WGJ0103TCE;0402_x4;8;Uniroyal Elec;Basic;Resistor Networks & Arrays 10KOhms ±5% 1/16W 0402_x4 RoHS;https://datasheet.lcsc.com/szlcsc/Uniroyal-Elec-4D02WGJ0103TCE_C25725.pdf;1-199:0.005210145,200-:0.001866667;67586
3 | C25726;Resistors;Resistor Networks & Arrays;4D02WGJ0102TCE;0402_x4;8;Uniroyal Elec;Basic;Resistor Networks & Arrays 1KOhms ±5% 1/16W 0402_x4 RoHS;https://datasheet.lcsc.com/szlcsc/Uniroyal-Elec-4D02WGJ0102TCE_C25726.pdf;1-199:0.005210145,200-:0.001866667;78875
4 | C25501;Resistors;Resistor Networks & Arrays;4D02WGJ0330TCE;0402_x4;8;Uniroyal Elec;Basic;Resistor Networks & Arrays 33Ohms ±5% 1/16W 0402_x4 RoHS;https://datasheet.lcsc.com/szlcsc/Uniroyal-Elec-4D02WGJ0330TCE_C25501.pdf;1-199:0.004749275,200-:0.001701449;76307
5 | C32375;Inductors & Chokes & Transformers;Inductors (SMD);SDFL2012T220KTF;0805;2;Sunlord;Basic;Inductors (SMD) 0805 RoHS;https://datasheet.lcsc.com/szlcsc/Sunlord-SDFL2012T220KTF_C32375.pdf;1-199:0.026200000,200-:0.012500000;43999
6 | C51725;Inductors & Chokes & Transformers;Inductors (SMD);SDFL2012Q3R3KTF;0805;2;Sunlord;Basic;Inductors (SMD) 0805 RoHS;https://datasheet.lcsc.com/szlcsc/Sunlord-SDFL2012Q3R3KTF_C51725.pdf;1-199:0.016815942,200-:0.007427536;27602
7 | C14304;Inductors & Chokes & Transformers;Inductors (SMD);SDFL2012T470KTF;0805;2;Sunlord;Basic;Inductors (SMD) 0805 RoHS;https://datasheet.lcsc.com/szlcsc/Sunlord-SDFL2012T470KTF_C14304.pdf;1-99:0.043747826,100-:0.023369565;26497
8 | C1042;Inductors & Chokes & Transformers;Inductors (SMD);SDFL2012Q1R0KTF;0805;2;Sunlord;Basic;Inductors (SMD) 0805 RoHS;https://datasheet.lcsc.com/szlcsc/Sunlord-SDFL2012Q1R0KTF_C1042.pdf;1-199:0.017931884,200-:0.008240580;37413
9 | C1043;Inductors & Chokes & Transformers;Inductors (SMD);CMI201209U2R2KT;0805;2;Guangdong Fenghua Advanced Tech;Basic;Inductors (SMD) 0805 RoHS;https://datasheet.lcsc.com/szlcsc/Guangdong-Fenghua-Advanced-Tech-CMI201209U2R2KT_C1043.pdf;1-199:0.010449275,200-:0.004427536;34565
10 | C1046;Inductors & Chokes & Transformers;Inductors (SMD);SDFL2012S100KTF;0805;2;Sunlord;Basic;Inductors (SMD) 0805 RoHS;https://datasheet.lcsc.com/szlcsc/Sunlord-SDFL2012S100KTF_C1046.pdf;1-199:0.017739130,200-:0.008152174;96901
11 | C17902;Resistors;Chip Resistor - Surface Mount;1206W4F1002T5E;1206;2;Uniroyal Elec;Basic;Chip Resistor - Surface Mount 10KOhms ±1% 1/4W 1206 RoHS;https://datasheet.lcsc.com/szlcsc/Uniroyal-Elec-1206W4F1002T5E_C17902.pdf;1-199:0.005760870,200-:0.002156522;600403
12 | C17903;Resistors;Chip Resistor - Surface Mount;1206W4F100JT5E;1206;2;Uniroyal Elec;Basic;Chip Resistor - Surface Mount 10Ohms ±1% 1/4W 1206 RoHS;https://datasheet.lcsc.com/szlcsc/Uniroyal-Elec-1206W4F100JT5E_C17903.pdf;1-199:0.004056522,200-:0.001453623;180708
13 | C17924;Resistors;Chip Resistor - Surface Mount;1206W4F1800T5E;1206;2;Uniroyal Elec;Basic;Chip Resistor - Surface Mount 180Ohms ±1% 1/4W 1206 RoHS;https://datasheet.lcsc.com/szlcsc/Uniroyal-Elec-1206W4F1800T5E_C17924.pdf;1-199:0.007044928,200-:0.002752174;43294
14 | C17928;Resistors;Chip Resistor - Surface Mount;1206W4F100KT5E;1206;2;Uniroyal Elec;Basic;Chip Resistor - Surface Mount 1Ohms ±1% 1/4W 1206 RoHS;https://datasheet.lcsc.com/szlcsc/Uniroyal-Elec-1206W4F100KT5E_C17928.pdf;1-199:0.007086957,200-:0.002768116;50315
15 | C17936;Resistors;Chip Resistor - Surface Mount;1206W4F4701T5E;1206;2;Uniroyal Elec;Basic;Chip Resistor - Surface Mount 4.7KOhms ±1% 1/4W 1206 RoHS;https://datasheet.lcsc.com/szlcsc/Uniroyal-Elec-1206W4F4701T5E_C17936.pdf;1-199:0.005760870,200-:0.002156522;555574
16 | C17944;Resistors;Chip Resistor - Surface Mount;1206W4F2001T5E;1206;2;Uniroyal Elec;Basic;Chip Resistor - Surface Mount 2KOhms ±1% 1/4W 1206 RoHS;https://datasheet.lcsc.com/szlcsc/Uniroyal-Elec-1206W4F2001T5E_C17944.pdf;1-199:0.004091304,200-:0.001465217;141238
17 | C17955;Resistors;Chip Resistor - Surface Mount;1206W4F200JT5E;1206;2;Uniroyal Elec;Basic;Chip Resistor - Surface Mount 20Ohms ±1% 1/4W 1206 RoHS;https://datasheet.lcsc.com/szlcsc/Uniroyal-Elec-1206W4F200JT5E_C17955.pdf;1-199:0.005837681,200-:0.002185507;277566
18 | C1558;Capacitors;Multilayer Ceramic Capacitors MLCC - SMD/SMT;0402CG2R0C500NT;0402;2;Guangdong Fenghua Advanced Tech;Basic;Multilayer Ceramic Capacitors MLCC - SMD/SMT 2pF 50V 0402 RoHS;https://datasheet.lcsc.com/szlcsc/Guangdong-Fenghua-Advanced-Tech-0402CG2R0C500NT_C1558.pdf;1-999:0.001739130,1000-:0.000543478;63891
19 | C1561;Capacitors;Multilayer Ceramic Capacitors MLCC - SMD/SMT;0402CG2R7C500NT;0402;2;Guangdong Fenghua Advanced Tech;Basic;Multilayer Ceramic Capacitors MLCC - SMD/SMT 2.7pF 50V 0402 RoHS;https://datasheet.lcsc.com/szlcsc/Guangdong-Fenghua-Advanced-Tech-0402CG2R7C500NT_C1561.pdf;1-999:0.001739130,1000-:0.000543478;59863
20 | C1554;Capacitors;Multilayer Ceramic Capacitors MLCC - SMD/SMT;0402CG200J500NT;0402;2;Guangdong Fenghua Advanced Tech;Basic;Multilayer Ceramic Capacitors MLCC - SMD/SMT 20pF 50V 0402 RoHS;https://datasheet.lcsc.com/szlcsc/Guangdong-Fenghua-Advanced-Tech-0402CG200J500NT_C1554.pdf;1-199:0.005649275,200-:0.002114493;91205
21 | C1530;Capacitors;Multilayer Ceramic Capacitors MLCC - SMD/SMT;0402B221K500NT;0402;2;Guangdong Fenghua Advanced Tech;Basic;Multilayer Ceramic Capacitors MLCC - SMD/SMT 220pF 50V 0402 RoHS;https://datasheet.lcsc.com/szlcsc/Guangdong-Fenghua-Advanced-Tech-0402B221K500NT_C1530.pdf;1-199:0.010688406,200-:0.004528986;79360
22 | C1532;Capacitors;Multilayer Ceramic Capacitors MLCC - SMD/SMT;0402B223K500NT;0402;2;Guangdong Fenghua Advanced Tech;Basic;Multilayer Ceramic Capacitors MLCC - SMD/SMT 22nF 50V 0402 RoHS;https://datasheet.lcsc.com/szlcsc/Guangdong-Fenghua-Advanced-Tech-0402B223K500NT_C1532.pdf;1-199:0.010688406,200-:0.004528986;110653
23 | C1557;Capacitors;Multilayer Ceramic Capacitors MLCC - SMD/SMT;0402CG270J500NTN;0402;2;Guangdong Fenghua Advanced Tech;Basic;Multilayer Ceramic Capacitors MLCC - SMD/SMT 27pF 50V 0402 RoHS;https://datasheet.lcsc.com/szlcsc/Guangdong-Fenghua-Advanced-Tech-0402CG270J500NTN_C1557.pdf;1-199:0.012878261,200-:0.005688406;101996
24 |
--------------------------------------------------------------------------------
/jlcparts/ui.py:
--------------------------------------------------------------------------------
1 | from multiprocessing import Pool
2 | import json
3 |
4 | import click
5 |
6 | from jlcparts.datatables import buildtables, normalizeAttribute
7 | from jlcparts.lcsc import pullPreferredComponents
8 | from jlcparts.partLib import (PartLibrary, PartLibraryDb, getLcscExtraNew,
9 | loadJlcTable, loadJlcTableLazy)
10 |
11 |
12 | def fetchLcscData(lcsc):
13 | extra = getLcscExtraNew(lcsc)
14 | return (lcsc, extra)
15 |
16 | @click.command()
17 | @click.argument("source", type=click.Path(dir_okay=False, exists=True))
18 | @click.argument("db", type=click.Path(dir_okay=False, writable=True))
19 | @click.option("--age", type=int, default=0,
20 | help="Automatically discard n oldest components and fetch them again")
21 | @click.option("--limit", type=int, default=10000,
22 | help="Limit number of newly added components")
23 | def getLibrary(source, db, age, limit):
24 | """
25 | Download library inside OUTPUT (JSON format) based on SOURCE (csv table
26 | provided by JLC PCB).
27 |
28 | You can specify previously downloaded library as a cache to save requests to
29 | fetch LCSC extra data.
30 | """
31 | OLD = 0
32 | REFRESHED = 1
33 |
34 | db = PartLibraryDb(db)
35 | missing = set()
36 | total = 0
37 | with db.startTransaction():
38 | db.resetFlag(value=OLD)
39 | with open(source, newline="") as f:
40 | jlcTable = loadJlcTableLazy(f)
41 | for component in jlcTable:
42 | total += 1
43 | if db.exists(component["lcsc"]):
44 | db.updateJlcPart(component, flag=REFRESHED)
45 | else:
46 | component["extra"] = {}
47 | db.addComponent(component, flag=REFRESHED)
48 | missing.add(component["lcsc"])
49 | print(f"New {len(missing)} components out of {total} total")
50 | ageCount = min(age, max(0, limit - len(missing)))
51 | print(f"{ageCount} components will be aged and thus refreshed")
52 | missing = missing.union(db.getNOldest(ageCount))
53 |
54 | # Truncate the missing components to respect the limit:
55 | missing = list(missing)[:limit]
56 |
57 | with Pool(processes=10) as pool:
58 | for i, (lcsc, extra) in enumerate(pool.imap_unordered(fetchLcscData, missing)):
59 | print(f" {lcsc} fetched. {((i+1) / len(missing) * 100):.2f} %")
60 | db.updateExtra(lcsc, extra)
61 | db.removeWithFlag(value=OLD)
62 | # Temporary work-around for space-related issues in CI - simply don't rebuild the DB
63 | # db.vacuum()
64 |
65 |
66 |
67 | @click.command()
68 | @click.argument("db", type=click.Path(dir_okay=False, writable=True))
69 | def updatePreferred(db):
70 | """
71 | Download list of preferred components from JLC PCB and mark them into the DB.
72 | """
73 | preferred = pullPreferredComponents()
74 | lib = PartLibraryDb(db)
75 | lib.setPreferred(preferred)
76 |
77 |
78 | @click.command()
79 | @click.argument("libraryFilename")
80 | def listcategories(libraryfilename):
81 | """
82 | Print all categories from library specified by LIBRARYFILENAMEto standard
83 | output
84 | """
85 | lib = PartLibrary(libraryfilename)
86 | for c, subcats in lib.categories().items():
87 | print(f"{c}:")
88 | for s in subcats:
89 | print(f" {s}")
90 |
91 | @click.command()
92 | @click.argument("libraryFilename")
93 | def listattributes(libraryfilename):
94 | """
95 | Print all keys in the extra["attributes"] arguments from library specified by
96 | LIBRARYFILENAME to standard output
97 | """
98 | keys = set()
99 | lib = PartLibrary(libraryfilename)
100 | for subcats in lib.lib.values():
101 | for parts in subcats.values():
102 | for data in parts.values():
103 | if "extra" not in data:
104 | continue
105 | extra = data["extra"]
106 | attr = extra.get("attributes", {})
107 | if not isinstance(attr, list):
108 | for k in extra.get("attributes", {}).keys():
109 | keys.add(k)
110 | for k in keys:
111 | print(k)
112 |
113 | @click.command()
114 | @click.argument("lcsc_code")
115 | def fetchDetails(lcsc_code):
116 | """
117 | Fetch LCSC extra information for a given LCSC code
118 | """
119 | print(getLcscExtraNew(lcsc_code))
120 |
121 | @click.command()
122 | @click.argument("filename", type=click.Path(writable=True))
123 | @click.option("--verbose", is_flag=True,
124 | help="Be verbose")
125 | def fetchTable(filename, verbose):
126 | """
127 | Fetch JLC PCB component table
128 | """
129 | from .jlcpcb import pullComponentTable
130 |
131 | def report(count: int) -> None:
132 | if (verbose):
133 | print(f"Fetched {count}")
134 |
135 | pullComponentTable(filename, report)
136 |
137 | @click.command()
138 | @click.argument("lcsc")
139 | def testComponent(lcsc):
140 | """
141 | Tests parsing attributes of given component
142 | """
143 | extra = getLcscExtraNew(lcsc)["attributes"]
144 |
145 | extra.pop("url", None)
146 | extra.pop("images", None)
147 | extra.pop("prices", None)
148 | extra.pop("datasheet", None)
149 | extra.pop("id", None)
150 | extra.pop("manufacturer", None)
151 | extra.pop("number", None)
152 | extra.pop("title", None)
153 | extra.pop("quantity", None)
154 | for i in range(10):
155 | extra.pop(f"quantity{i}", None)
156 | normalized = dict(normalizeAttribute(key, val) for key, val in extra.items())
157 | print(json.dumps(normalized, indent=4))
158 |
159 |
160 | @click.group()
161 | def cli():
162 | pass
163 |
164 | cli.add_command(getLibrary)
165 | cli.add_command(listcategories)
166 | cli.add_command(listattributes)
167 | cli.add_command(buildtables)
168 | cli.add_command(updatePreferred)
169 | cli.add_command(fetchDetails)
170 | cli.add_command(fetchTable)
171 | cli.add_command(testComponent)
172 |
173 | if __name__ == "__main__":
174 | cli()
175 |
--------------------------------------------------------------------------------
/web/src/history.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { fetchJson, db } from './db'
3 | import { Spinbox, InlineSpinbox, ZoomableLazyImage,
4 | formatAttribute, findCategoryById, getImageUrl,
5 | restoreLcscUrl } from './componentTable'
6 | import { getQuantityPrice } from './jlc'
7 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
8 |
9 | export function History(props) {
10 | return
11 |
13 | }
14 |
15 | class HistoryItem extends React.Component {
16 | constructor(props) {
17 | super(props);
18 | this.state = {};
19 | }
20 |
21 | componentDidMount() {
22 | db.components.get({lcsc: this.props.lcsc}).then( component => {
23 | this.setState({info: component});
24 | });
25 | }
26 |
27 | renderImage() {
28 | let x = this.state.info;
29 | const imgSrc = getImageUrl(x.img, "small") ?? "./brokenimage.svg";
30 | return | 118 | {label} 119 | | 120 | }) 121 | }
|---|
167 |
175 | });
176 | }
177 | }
--------------------------------------------------------------------------------
/web/src/sortableTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import produce from 'immer';
4 | import { Waypoint } from 'react-waypoint';
5 |
6 |
7 | function SortableHeaderField(props) {
8 | var sortIcons;
9 | var className = "bg-blue-500 mx-1 p-2 border-r-2 rounded"
10 | if (props.sortable) {
11 | className += " cursor-pointer"
12 | let icon = "sort";
13 | if (props.sortDirection === "asc")
14 | icon = "sort-amount-up";
15 | if (props.sortDirection === "desc")
16 | icon = "sort-amount-down";
17 | sortIcons = 168 | Newly added components on {day.getDate()}. {day.getMonth() + 1}. {day.getFullYear()}: 169 |
170 |
25 |
40 |
26 | {props.header}
27 | {sortIcons}
28 |
29 | {
30 | props.onDelete && (
31 | {
32 | e.stopPropagation();
33 | props.onDelete();
34 | }}>
35 |
37 | )
38 | }
39 | | 145 | { cell.displayGetter(row) } 146 | | 147 | }) 148 | } 149 |
Loading more components...
156 | ) 157 | } 158 |
25 | 
26 |
38 |
26 |
27 |
37 | 28 | JLC PCB SMD Assembly Component Catalogue 29 |
30 |31 | Parametric search for components offered by JLC PCB SMD assembly service. 32 |
33 |34 | Read more at project's GitHub page. 35 |
36 |
39 | Do you enjoy this site? Consider supporting me so I can actively maintain projects like this one!
40 | Read more about my story.
41 |
42 |
43 |
63 |
64 |
65 | }
66 |
67 | function Footer(props) {
68 | return | 45 | GitHub Sponsors: 46 | | 47 |48 | 49 | | 50 |
| 53 | Ko-Fi: 54 | | 55 |
56 |
57 | 
58 |
59 | |
60 |
69 |
70 |
71 | }
72 |
73 | class FirstTimeNote extends React.Component {
74 | constructor(props) {
75 | super(props);
76 | this.state = {
77 | componentCount: undefined
78 | };
79 | }
80 |
81 | componentDidMount() {
82 | db.components.count().then(x => {
83 | this.setState({componentCount: x});
84 | })
85 | }
86 |
87 | render() {
88 | if (this.state.componentCount === undefined || this.state.componentCount !== 0)
89 | return null;
90 | return
91 |
101 | }
102 | }
103 |
104 | class NewComponentFormatWarning extends React.Component {
105 | constructor(props) {
106 | super(props);
107 | this.state = {
108 | newComponentFormat: true
109 | };
110 | }
111 |
112 | componentDidMount() {
113 | db.components.toCollection().first().then(x => {
114 | if (x !== undefined && typeof x.attributes[Object.keys(x.attributes)[0]] !== 'object')
115 | this.setState({newComponentFormat: false});
116 | });
117 | }
118 |
119 | render() {
120 | if (this.state.newComponentFormat)
121 | return null;
122 | return 92 | Hey, it seems that you run the application for the first time, hence, 93 | there's no component library in your device. Just press the "Update 94 | the component library button" in the upper right corner to download it 95 | and use the app. 96 |
97 |98 | Note that the initial download of the component library might take a while. 99 |
100 |
123 |
128 | }
129 | }
130 |
131 | class UpdateBar extends React.Component {
132 | constructor(props) {
133 | super(props);
134 | this.state = {
135 | updateAvailable: this.props.updateAvailable
136 | };
137 | }
138 |
139 | componentDidMount() {
140 | let checkStatus = () => {
141 | checkForComponentLibraryUpdate().then( updateAvailable => {
142 | this.setState({updateAvailable});
143 | });
144 | db.settings.get("lastUpdate").then(lastUpdate => {
145 | this.setState({lastUpdate});
146 | })
147 | };
148 |
149 | checkStatus();
150 | this.timerID = setInterval(checkStatus, 60000);
151 | }
152 |
153 | componentWillUnmount() {
154 | clearInterval(this.timerID);
155 | }
156 |
157 | handleUpdateClick = e => {
158 | e.preventDefault();
159 | this.props.onTriggerUpdate();
160 | }
161 |
162 | render() {
163 | if (this.state.updateAvailable) {
164 | return 124 | Hey, there have been some breaking changes to the library format. 125 | Please, update the library before continuing to use the tool. 126 |
127 |
165 |
171 | }
172 | else {
173 | return There is an update of the component library available.
166 | 170 |
174 |
176 | }
177 | }
178 | }
179 |
180 | class Updater extends React.Component {
181 | constructor(props) {
182 | super(props);
183 | this.state = {
184 | progress: {}
185 | };
186 | }
187 |
188 | componentDidMount() {
189 | let t0 = performance.now();
190 | updateComponentLibrary(
191 | progress => { this.setState({progress}); }
192 | ).then(() => {
193 | let t1 = performance.now();
194 | console.log("Library update took ", t1 - t0, "ms");
195 | this.props.onFinish();
196 | });
197 | }
198 |
199 | listItems() {
200 | let items = []
201 | for (const [task, status] of Object.entries(this.state.progress)) {
202 | let color = status[1] ? "bg-green-500" : "bg-yellow-400";
203 | items.push(The component database is up to-date {this.state.lastUpdate ? `(${this.state.lastUpdate})` : ""}.
175 |
213 |
215 |
216 |
225 |
226 | }
227 | }
228 |
229 | function Container(props) {
230 | return Update progress:
214 || Operation/category | 218 |Progress | 219 |
{props.children}
231 | }
232 |
233 | function Navbar() {
234 | return
235 |
238 | Component search
239 |
240 |
243 | Catalog history
244 |
245 |
246 | }
247 |
248 | export function NoMatch() {
249 | return 404 not found
; 250 | } 251 | 252 | class App extends React.Component { 253 | constructor(props) { 254 | super(props); 255 | this.state = { 256 | updating: false 257 | }; 258 | } 259 | 260 | onUpdateFinish = () => { 261 | this.setState({updating: false}); 262 | } 263 | 264 | triggerUpdate = () => { 265 | this.setState({updating: true}); 266 | } 267 | 268 | render() { 269 | if (this.state.updating) { 270 | return
82 |
89 |
90 | }
91 |
92 | export function InlineSpinbox(props) {
93 | return
94 |
100 |
101 | }
102 |
103 |
104 | export class ZoomableLazyImage extends React.Component {
105 | constructor(props) {
106 | super(props);
107 | this.state = {
108 | hover: false
109 | }
110 | }
111 |
112 | assignRef = element => {
113 | this.container = element;
114 | }
115 |
116 | handleMouseEnter = () => {
117 | this.setState({hover: true});
118 | }
119 |
120 | handleMouseLeave= () => {
121 | this.setState({hover: false});
122 | }
123 |
124 | render() {
125 | return (
126 |
129 |
133 | {
134 | this.state.hover && (
135 |
144 | )
145 | }
146 | }
147 |
148 | export class ComponentOverview extends React.Component {
149 | constructor(props) {
150 | super(props);
151 | this.state = {
152 | components: [],
153 | categories: [],
154 | activeProperties: {},
155 | stockRequired: false,
156 | requiredProperties: new Set(),
157 | expectedComponentsVersion: 0,
158 | componentsVersion: 0,
159 | tableIncludedProperties: new Set(),
160 | quantity: 1
161 | };
162 | }
163 |
164 | componentDidMount() {
165 | db.categories.toArray().then( categories => {
166 | this.setState({
167 | categories: this.prepareCategories(categories),
168 | rawCategories: categories
169 | });
170 | })
171 | }
172 |
173 | prepareCategories(sourceCategories) {
174 | let categories = {};
175 | for (const category of sourceCategories) {
176 | categories[category.category] ??= [];
177 | categories[category.category].push({
178 | value: category.subcategory,
179 | key: category.id
180 | });
181 | }
182 |
183 | let sortedCategories = [];
184 | for (const key in categories) {
185 | let subCats = categories[key];
186 | subCats.sort((a, b) => a.value.localeCompare(b.value));
187 | sortedCategories.push({
188 | category: key,
189 | subcategories: subCats
190 | });
191 | }
192 | sortedCategories.sort((a, b) => a.category.localeCompare(b.category));
193 | return sortedCategories;
194 | }
195 |
196 | collectProperties(components) {
197 | let properties = {};
198 | for (const component of components) {
199 | if (!("attributes" in component))
200 | continue;
201 | let attributes = component.attributes;
202 | for (const property in attributes) {
203 | properties[property] ??= {};
204 | let val = attributes[property];
205 | properties[property][valueFootprint(val)] = val;
206 | }
207 | }
208 |
209 | let propertiesList = [];
210 | for (const property in properties) {
211 | if (Object.keys(properties[property]).length <= 1)
212 | continue;
213 | let values = Object.entries(properties[property]).map(x => ({key: x[0], value: x[1]}));
214 | propertiesList.push({property, values});
215 | }
216 | propertiesList.sort((a, b) => a.property.localeCompare(b.property));
217 | return propertiesList;
218 | }
219 |
220 | handleStartComponentsChange = () => {
221 | let newVersion = this.state.componentsVersion + 1;
222 | this.setState(produce(this.state, draft => {
223 | draft.expectedComponentsVersion = newVersion;
224 | }));
225 | return newVersion;
226 | }
227 |
228 | handleComponentsChange = (version, components) => {
229 | if (version !== this.state.expectedComponentsVersion)
230 | return;
231 | if (!components)
232 | return;
233 | this.setState(produce(this.state, draft => {
234 | draft.componentsVersion = version;
235 | draft.components = components;
236 | // Update properties filters
237 | var t0 = performance.now();
238 | let properties = {};
239 | for (const propertyDic of this.collectProperties(components)) {
240 | properties[propertyDic.property] = propertyDic.values.map(x => x.key);
241 | }
242 | for (const property of Object.keys(draft.activeProperties)) {
243 | if (!(property in properties)) {
244 | delete draft.activeProperties[property];
245 | }
246 | }
247 | for (const property in properties) {
248 | draft.activeProperties[property] = properties[property];
249 | }
250 | var t1 = performance.now();
251 | console.log("Active categories took ", t1 - t0, "ms" );
252 | }));
253 | }
254 |
255 | handleActivePropertiesChange = (property, values) => {
256 | this.setState(produce(this.state, draft => {
257 | draft.activeProperties[property] = values;
258 | }));
259 | }
260 |
261 | handleIncludeInTable = (property, value) => {
262 | this.setState(produce(this.state, draft => {
263 | if (value)
264 | draft.tableIncludedProperties.add(property);
265 | else
266 | draft.tableIncludedProperties.delete(property);
267 | }));
268 | }
269 |
270 | handlePropertyRequired = (property, value) => {
271 | this.setState(produce(this.state, draft => {
272 | if (value)
273 | draft.requiredProperties.add(property);
274 | else
275 | draft.requiredProperties.delete(property);
276 | }));
277 | }
278 |
279 | filterComponents(components, activeProperties, requiredProperties) {
280 | return components.filter(component => {
281 | for (const property in activeProperties) {
282 | if (this.state.stockRequired && component.stock < this.state.quantity)
283 | return false;
284 | let attributes = component.attributes;
285 | if (!(property in attributes)) {
286 | if (requiredProperties.has(property))
287 | return false;
288 | else
289 | continue;
290 | }
291 | if (!(activeProperties[property].includes(valueFootprint(attributes[property]))))
292 | return false;
293 | }
294 | return true;
295 | });
296 | }
297 |
298 | handleQuantityChange = q => {
299 | this.setState({quantity: q});
300 | }
301 |
302 | handleStockRequired = stockRequired => {
303 | this.setState({stockRequired: stockRequired});
304 | }
305 |
306 | render() {
307 | let filterComponents = <>
308 |
136 |
140 |
141 | )
142 | }
143 | 446 | {`${sumPrice}$/${this.state.quantity} units`} 447 | 448 | }, 449 | comparator: (a, b) => { 450 | let aPrice = getQuantityPrice(this.state.quantity, a.price); 451 | let bPrice = getQuantityPrice(this.state.quantity, b.price); 452 | if (aPrice === undefined && bPrice === undefined) 453 | return 0; 454 | if (aPrice === undefined) 455 | return 1; 456 | if (bPrice === undefined) 457 | return -1; 458 | return aPrice - bPrice 459 | } 460 | }, 461 | ]; 462 | for (let attribute of this.state.tableIncludedProperties) { 463 | let getter = x => { 464 | if (attribute in x.attributes) 465 | return formatAttribute(x.attributes[attribute]); 466 | return ""; 467 | } 468 | 469 | let comparator = (x, y) => { 470 | let val1 = x.attributes[attribute]; 471 | let val2 = y.attributes[attribute]; 472 | return attributeComparator(val1, val2); 473 | } 474 | 475 | header.push( { 476 | name: attribute, 477 | sortable: true, 478 | displayGetter: getter, 479 | comparator: comparator, 480 | onDelete: () => this.handleIncludeInTable(attribute, false), 481 | className: "text-center" 482 | }); 483 | } 484 | 485 | var t0 = performance.now() 486 | let filteredComponents = this.filterComponents(this.state.components, 487 | this.state.activeProperties, this.state.requiredProperties); 488 | var t1 = performance.now() 489 | console.log("Filtering took ", t1 - t0, " ms"); 490 | 491 | return <> 492 | {filterComponents} 493 |
494 |
497 | ↑ ■ Scroll to properties ■ ↑
498 |
499 |
502 | ↑ ■ Scroll to search bar ■ ↑
503 |
504 |
505 | {filteredComponents.length
506 | ?
507 | item.lcsc}
523 | expandableContent={c =>
524 | }/>
528 |
529 | :
508 | `wget ${c.datasheet}`).join("\n")}>
510 |
513 |
514 |
515 | Components matching query: {filteredComponents.length}
509 |
530 | No components match the selected criteria.
531 |
532 | }
533 |
534 |
535 | }
536 | }
537 |
538 | export function findCategoryById(categories, id) {
539 | return categories.find(category => category.id === id) ?? {
540 | category: "unknown",
541 | subcategory: "unknown"
542 | }
543 | }
544 |
545 | function ExpandedComponent(props) {
546 | let comp = props.component;
547 | const imgSrc = getImageUrl(comp.img, "big") ?? "./brokenimage.svg";
548 | let category = findCategoryById(props.categories, comp.category)
549 | return
550 |
609 | }
610 |
611 | // Takes a dictionary of categories and subcategories and lets the user to
612 | // choose several of them. Returns a list of components fulfilling the
613 | // selection via onChange.
614 | class CategoryFilter extends React.Component {
615 | constructor(props) {
616 | super(props);
617 | this.state = {
618 | categories: {},
619 | allCategories: false,
620 | searchString: "",
621 | abort: () => null
622 | }
623 | }
624 |
625 | collectActiveCategories = () => {
626 | return Object.values(this.state.categories).flat();
627 | }
628 |
629 | notifyParent = () => {
630 | var t0 = performance.now();
631 | console.log("Select start");
632 | let version = this.props.onAnnounceChange();
633 | this.components().then(components => {
634 | var t1 = performance.now();
635 | console.log("Select took", t1 - t0, "ms");
636 | this.props.onChange(version, components);
637 | });
638 | }
639 |
640 | // Return query containing components based on current categories and
641 | // full-text search
642 | async components() {
643 | this.state.abort();
644 | let query;
645 | if (this.state.allCategories) {
646 | if (this.state.searchString.length < 3) { // prevent high ram usage
647 | return [];
648 | }
649 | query = db.components;
650 | }
651 | else
652 | query = db.components.where("category").anyOf(this.collectActiveCategories());
653 |
654 | if (this.state.searchString.length !== 0) {
655 | const words = this.state.searchString.split(/\s+/)
656 | .filter(x => x.length > 0)
657 | .map(x => x.toLocaleLowerCase());
658 | if (words.length > 0) {
659 | query = query.filter(component => {
660 | const text = componentText(component);
661 | return words.every(word => text.includes(word));
662 | });
663 | }
664 | }
665 |
666 | let aborted = false;
667 | this.setState({abort: () => aborted = true});
668 | const components = await query.until(() => aborted).toArray();
669 | return aborted ? null : components;
670 | }
671 |
672 | handleCategoryChange = (category, value) => {
673 | console.log("Category change");
674 | this.setState(produce(this.state, draft => {
675 | draft.categories[category] = value.map(n => parseInt(n));
676 | draft.allCategories = false;
677 | }), this.notifyParent);
678 | }
679 |
680 | selectAll = state => {
681 | for (let category of this.props.categories) {
682 | state.categories[category.category] = category.subcategories.map( x => x.key );
683 | }
684 | state.allCategories = true;
685 | }
686 |
687 | selectNone = state => {
688 | for (let key in state.categories) {
689 | state.categories[key] = [];
690 | }
691 | state.allCategories = false;
692 | }
693 |
694 | handleSelectAll = () => {
695 | this.setState(produce(this.state, this.selectAll), this.notifyParent);
696 | }
697 |
698 | handleSelectNone = () => {
699 | this.setState(produce(this.state, this.selectNone), this.notifyParent);
700 | }
701 |
702 | handleFulltextChange = e => {
703 | this.setState(produce(this.state, draft => {
704 | draft.searchString = e.target.value;
705 | if (!draft.allCategories && this.collectActiveCategories().length === 0)
706 | this.selectAll(draft);
707 | }), () => {
708 | clearTimeout(this.searchTimeout);
709 | this.searchTimeout = setTimeout(this.notifyParent, 350);
710 | });
711 | }
712 |
713 | handleClear = () => {
714 | this.setState(produce(this.state, draft => {
715 | draft.searchString = "";
716 | if (draft.allCategories) {
717 | this.selectNone(draft);
718 | }
719 | }), () => {
720 | this.notifyParent();
721 | });
722 | }
723 |
724 | render() {
725 | return
551 | 
558 |
559 |
560 |
561 |
562 |
584 |
585 | | Property | 564 |Value | 565 |
| Category | 570 |{category.category}: {category.subcategory} | 571 |
| {pName} | 577 |{formatAttribute(comp.attributes[pName])} | 578 |
586 |
587 |
588 |
606 |
608 | | Quantity | 590 |Unit Price | 591 |
| { 597 | pricePoint.qTo 598 | ? `${pricePoint.qFrom}-${pricePoint.qTo}` 599 | : `${pricePoint.qFrom}+` 600 | } | 601 |{pricePoint.price} USD | 602 |
726 |
790 | }
791 | }
792 |
793 | class MultiSelectBox extends React.Component {
794 | handleAllClick = e => {
795 | e.preventDefault();
796 | let values = this.props.options.map(option => option.key);
797 | this.props.onChange(values);
798 | }
799 |
800 | handleNoneClick = e => {
801 | e.preventDefault();
802 | this.props.onChange([]);
803 | }
804 |
805 | handleSelectChange = e => {
806 | e.preventDefault();
807 | let value = Array.from(e.target.selectedOptions, option => option.value);
808 | this.props.onChange(value);
809 | }
810 |
811 | render() {
812 | let selectStyle = {};
813 | if (this.props.minHeight)
814 | selectStyle.minHeight = this.props.minHeight;
815 | return <>
816 |
727 |
738 | 728 | ⛶ Select category 729 |
730 | 733 | 734 | 737 |
739 |
742 |
749 |
752 |
753 |
754 |
757 | ↓ ■ Scroll to results ■ ↓
758 |
759 |
762 | ↓ ■ Scroll to properties ■ ↓
763 |
764 |
765 |
766 | {this.props.categories.map(item => {
767 | return {
774 | this.handleCategoryChange(item.category, value); } }/>;
775 | })}
776 |
777 |
778 |
781 | ↓ ■ Scroll to results ■ ↓
782 |
783 |
786 | ↑ ■ Scroll to search bar ■ ↑
787 |
788 |
789 |
817 |
837 | ;
838 | }
839 | }
840 |
841 | class SingleSelectBox extends React.Component {
842 | render() {
843 | return
850 | }
851 | }
852 |
853 | class PropertySelector extends React.Component {
854 | constructor(props) {
855 | super(props);
856 | this.state = {
857 | sortBy: this.collectValueTypes()[0].value
858 | };
859 | }
860 |
861 | collectValueTypes() {
862 | return [...new Set(this.props.item.values.flatMap(x => Object.keys(x.value.values)))].map(x => ({key: x, value: x}));
863 | }
864 |
865 | valueOptions() {
866 | let options = [...this.props.item.values];
867 | options.sort((a, b) => {
868 | return attributeComparator(a.value, b.value, this.state.sortBy);
869 | })
870 | return options.map(x => ({
871 | key: x.key,
872 | value: formatAttribute(x.value)
873 | }));
874 | }
875 |
876 | handleSortChange = e => {
877 | this.setState({sortBy: e.target.value});
878 | }
879 |
880 | render() {
881 | let options = this.valueOptions();
882 | if (options.length <= 1)
883 | return null;
884 | return
818 |
824 |
833 | {this.props.name}
819 |
820 |
821 |
822 |
823 |
834 | {this.props.children}
835 |
836 |
894 |
905 |
895 | Sort by:
896 |
897 |
898 |
903 |
904 |
906 | {
911 | this.props.onTableInclude(e.target.checked); } } />
912 | Table column
913 |
914 |
915 | {
920 | this.props.onPropertyRequired(e.target.checked); } } />
921 | Required
922 |
923 |
930 |
965 | }
966 | }
967 |
968 | class QuantitySelect extends React.Component {
969 | render() {
970 | return 931 | ⛶ Property filter 932 |
933 |
934 | { this.props.properties.length === 0
935 | ? this.props.onChange(item.property, value)}
945 | tableIncluded={this.props.tableIncluded.includes(item.property)}
946 | onTableInclude={value => this.props.onTableInclude(item.property, value)}
947 | required={this.props.requiredProperties.includes(item.property)}
948 | onPropertyRequired={value => this.props.onPropertyRequired(item.property, value) }
949 | />;
950 | })}
951 |
952 | 936 | There are no properties to select from. Select category or adjust the full-text search to include some components. 937 |
938 | : this.props.properties.map(item => { 939 | return
953 |
956 | ↓ ■ Scroll to results ■ ↓
957 |
958 |
961 | ↑ ■ Scroll to search bar ■ ↑
962 |
963 |
964 |
971 |
1001 | }
1002 | }
1003 |
--------------------------------------------------------------------------------
972 |
1000 |
973 | Specify quantity (for price point selection)
974 |
975 | this.props.onChange(e.target.value)}
982 | value={this.props.value}
983 | />
984 |
985 | {
990 | this.props.onStockRequired(e.target.checked)
991 | }}/>
992 |
993 | Require on stock
994 | 995 | (Stock data can be 24 hours old) 996 | 997 | 998 |
999 | 994 | 995 | (Stock data can be 24 hours old) 996 | 997 | 998 |