Skip to content

Commit

Permalink
implemented blob and fixed UI for dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@HarsimarSinghG
HarsimarSinghG committed Oct 22, 2024
1 parent cb9e019 commit ca9b077
Show file tree
Hide file tree
Showing 5 changed files with 359 additions and 225 deletions.
4 changes: 0 additions & 4 deletions client/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,6 @@ const router = createBrowserRouter([
path: "profile/:username",
element: <Profile />,
},
// {
// path: "challenges/filter",
// element: <ChallengeFilterDropdown />
// },
{
path: "solutions",
element: <Solutions />,
Expand Down
189 changes: 113 additions & 76 deletions client/src/pages/Challenges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,85 +228,122 @@ function Challenges() {
</Dropdown.Menu>
</Dropdown>

{/* Dropdown for filtering by challenge type */}
<Dropdown className="mx-2 mb-2">
<Dropdown.Toggle variant="primary" id="dropdown-basic">
Filter by Challenge Type
</Dropdown.Toggle>
<Dropdown.Menu>
{/* Creational Patterns */}
<Dropdown drop="end">
<Dropdown.Toggle variant="light">
Creational Patterns
</Dropdown.Toggle>
<Dropdown.Menu>
{patternCategories.Creational.map((pattern) => (
<Form.Check
key={pattern}
type="checkbox"
label={pattern}
checked={selectedChallengeTypes.includes(pattern)}
onChange={() => handleChallengeTypeSelect(pattern)}
/>
))}
</Dropdown.Menu>
</Dropdown>
<Dropdown className="mx-2 mb-2" style={{ marginBottom: '1rem' }}> {/* Adds 1rem space below the button */}
<Dropdown.Toggle
variant="primary"
id="dropdown-basic"
style={{ borderRadius: '8px' }} // Adds slight curve to the main button
>
Filter by Challenge Type
</Dropdown.Toggle>

<Dropdown.Menu style={{ padding: '0.5rem', borderRadius: '8px' }}> {/* Adds slight curve to edges */}
{/* Creational Patterns */}
<Dropdown drop="end">
<Dropdown.Toggle
variant="light"
className="full-width-toggle"
style={{ marginBottom: '0.5rem', borderRadius: '8px', width: '100%' }} // Adds curved edges to the selection box
>
Creational Patterns
</Dropdown.Toggle>
<Dropdown.Menu
className="dropdown-menu-custom"
style={{ borderRadius: '8px', marginLeft: '0.5rem' }} // Slight curve and offset to the right
>
{patternCategories.Creational.map((pattern) => (
<Form.Check
key={pattern}
type="checkbox"
label={pattern}
checked={selectedChallengeTypes.includes(pattern)}
onChange={() => handleChallengeTypeSelect(pattern)}
style={{ marginLeft: '0.5rem' }} // Left margin for patterns
/>
))}
</Dropdown.Menu>
</Dropdown>

{/* Structural Patterns */}
<Dropdown drop="end">
<Dropdown.Toggle variant="light">
Structural Patterns
</Dropdown.Toggle>
<Dropdown.Menu>
{patternCategories.Structural.map((pattern) => (
<Form.Check
key={pattern}
type="checkbox"
label={pattern}
checked={selectedChallengeTypes.includes(pattern)}
onChange={() => handleChallengeTypeSelect(pattern)}
/>
))}
</Dropdown.Menu>
</Dropdown>
{/* Structural Patterns */}
<Dropdown drop="end">
<Dropdown.Toggle
variant="light"
className="full-width-toggle"
style={{ marginBottom: '0.5rem', borderRadius: '8px', width: '100%' }} // Adds curved edges to the selection box
>
Structural Patterns
</Dropdown.Toggle>
<Dropdown.Menu
className="dropdown-menu-custom"
style={{ borderRadius: '8px', marginLeft: '0.5rem' }} // Slight curve and offset to the right
>
{patternCategories.Structural.map((pattern) => (
<Form.Check
key={pattern}
type="checkbox"
label={pattern}
checked={selectedChallengeTypes.includes(pattern)}
onChange={() => handleChallengeTypeSelect(pattern)}
style={{ marginLeft: '0.5rem' }} // Left margin for patterns
/>
))}
</Dropdown.Menu>
</Dropdown>

{/* Behavioral Patterns */}
<Dropdown drop="end">
<Dropdown.Toggle variant="light">
Behavioral Patterns
</Dropdown.Toggle>
<Dropdown.Menu>
{patternCategories.Behavioral.map((pattern) => (
<Form.Check
key={pattern}
type="checkbox"
label={pattern}
checked={selectedChallengeTypes.includes(pattern)}
onChange={() => handleChallengeTypeSelect(pattern)}
/>
))}
</Dropdown.Menu>
</Dropdown>
{/* Behavioral Patterns */}
<Dropdown drop="end">
<Dropdown.Toggle
variant="light"
className="full-width-toggle"
style={{ marginBottom: '0.5rem', borderRadius: '8px', width: '100%' }} // Adds curved edges to the selection box
>
Behavioral Patterns
</Dropdown.Toggle>
<Dropdown.Menu
className="dropdown-menu-custom"
style={{ borderRadius: '8px', marginLeft: '0.5rem' }} // Slight curve and offset to the right
>
{patternCategories.Behavioral.map((pattern) => (
<Form.Check
key={pattern}
type="checkbox"
label={pattern}
checked={selectedChallengeTypes.includes(pattern)}
onChange={() => handleChallengeTypeSelect(pattern)}
style={{ marginLeft: '0.5rem' }} // Left margin for patterns
/>
))}
</Dropdown.Menu>
</Dropdown>

{/* Extra Patterns */}
<Dropdown drop="end">
<Dropdown.Toggle
variant="light"
className="full-width-toggle"
style={{ borderRadius: '8px', width: '100%' }} // Adds curved edges to the selection box
>
Extra Patterns
</Dropdown.Toggle>
<Dropdown.Menu
className="dropdown-menu-custom"
style={{ borderRadius: '8px', marginLeft: '0.5rem' }} // Slight curve and offset to the right
>
{extraPatterns.map((pattern) => (
<Form.Check
key={pattern}
type="checkbox"
label={pattern}
checked={selectedChallengeTypes.includes(pattern)}
onChange={() => handleChallengeTypeSelect(pattern)}
style={{ marginLeft: '0.5rem' }} // Left margin for patterns
/>
))}
</Dropdown.Menu>
</Dropdown>
</Dropdown.Menu>
</Dropdown>

{/* Extra Patterns */}
<Dropdown drop="end">
<Dropdown.Toggle variant="light">
Extra Patterns
</Dropdown.Toggle>
<Dropdown.Menu>
{extraPatterns.map((pattern) => (
<Form.Check
key={pattern}
type="checkbox"
label={pattern}
checked={selectedChallengeTypes.includes(pattern)}
onChange={() => handleChallengeTypeSelect(pattern)}
/>
))}
</Dropdown.Menu>
</Dropdown>
</Dropdown.Menu>
</Dropdown>

{/* Dropdown for filtering by difficulty */}
<Dropdown className="mx-2 mb-2">
Expand Down
32 changes: 23 additions & 9 deletions client/src/pages/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import { getBezierPath, getEdgeCenter, MarkerType } from "react-flow-renderer";
import { getSmoothStepPath } from "reactflow";
import CustomMarkers from "./CustomMarkers";
import { umlDiagramInstructions } from "../components/instructionsData";
import domtoimage from 'dom-to-image';


// Keys for local storage
const LOCAL_STORAGE_KEY_NODES = "uml-diagram-nodes";
Expand Down Expand Up @@ -220,17 +222,29 @@ const UMLDiagramEditor = ({ problemId }) => {
};

// Function to generate and download image
const generateImage = async () => {
const reactFlowElement = document.getElementsByClassName("react-flow")[0];
const canvas = await html2canvas(reactFlowElement, {
useCORS: true,
allowTaint: true,
backgroundColor: "#ffffff",
scale: 2,
const generateImage = () => {
return new Promise((resolve, reject) => {
const reactFlowElement = document.getElementsByClassName('react-flow')[0];

domtoimage.toBlob(reactFlowElement, { bgcolor: '#ffffff', quality: 1 })
.then((blob) => {
if (!blob) {
reject(new Error('Failed to create blob.'));
return;
}

const reader = new FileReader();
reader.onloadend = () => {
const base64data = reader.result as string;
localStorage.setItem('uml-diagram-image', base64data);
resolve(true);
};
reader.readAsDataURL(blob);
})
.catch((error) => reject(error));
});
const imageData = canvas.toDataURL("image/png");
localStorage.setItem("uml-diagram-image", imageData);
};


// Submit to PostSolution form directly
const postSolution = async () => {
Expand Down
Loading

0 comments on commit ca9b077

Please sign in to comment.