bunsenstraat
3 months ago
parent
7e71cbd6a3
commit
24956e430c
@ -0,0 +1,87 @@ |
||||
import { IframePlugin, IframeProfile, ViewPlugin } from '@remixproject/engine-web' |
||||
import * as packageJson from '../../../../../package.json' |
||||
import React from 'react' // eslint-disable-line
|
||||
import { ScriptRunnerUI } from '@remix-scriptrunner' // eslint-disable-line
|
||||
import { Profile } from '@remixproject/plugin-utils' |
||||
import { Engine } from '@remixproject/engine' |
||||
const profile = { |
||||
name: 'scriptRunnerBridge', |
||||
displayName: 'Script Bridge', |
||||
methods: ['execute'], |
||||
events: ['log', 'info', 'warn', 'error'], |
||||
icon: 'assets/img/settings.webp', |
||||
description: 'Set up a script runner', |
||||
kind: '', |
||||
location: 'sidePanel', |
||||
version: packageJson.version, |
||||
maintainedBy: 'Remix' |
||||
} |
||||
|
||||
export class ScriptRunnerUIPlugin extends ViewPlugin { |
||||
engine: Engine |
||||
current: string |
||||
constructor(engine: Engine) { |
||||
super(profile) |
||||
console.log('ScriptRunnerUIPlugin', this) |
||||
this.engine = engine |
||||
} |
||||
|
||||
async onActivation () { |
||||
console.log('onActivation', this) |
||||
} |
||||
|
||||
async loadScriptRunner(name: string) { |
||||
console.log('loadScriptRunner', name, this) |
||||
const profile: IframeProfile = await this.call('manager', 'getProfile', 'scriptRunner') |
||||
const newProfile: IframeProfile = { |
||||
...profile, |
||||
name: profile.name + name, |
||||
url: 'http://localhost:3000?template=' + name |
||||
} |
||||
console.log('loadScriptRunner', newProfile) |
||||
const plugin: IframePlugin = new IframePlugin(newProfile) |
||||
await this.engine.register(plugin) |
||||
|
||||
await this.call('manager', 'activatePlugin', newProfile.name) |
||||
this.current = newProfile.name |
||||
this.on(newProfile.name, 'log', this.log.bind(this)) |
||||
this.on(newProfile.name, 'info', this.log.bind(this)) |
||||
this.on(newProfile.name, 'warn', this.log.bind(this)) |
||||
this.on(newProfile.name, 'error', this.log.bind(this)) |
||||
} |
||||
|
||||
async execute (script: string, filePath: string) { |
||||
if(!this.current) await this.loadScriptRunner('default') |
||||
console.log('execute', script, filePath) |
||||
this.call(this.current, 'execute', script, filePath) |
||||
} |
||||
|
||||
async log(data: any){ |
||||
console.log('log', data) |
||||
this.emit('log', data) |
||||
} |
||||
|
||||
async warn(data: any){ |
||||
console.log('warn', data) |
||||
this.emit('warn', data) |
||||
} |
||||
|
||||
async error(data: any){ |
||||
console.log('error', data) |
||||
this.emit('error', data) |
||||
} |
||||
|
||||
async info(data: any){ |
||||
console.log('info', data) |
||||
this.emit('info', data) |
||||
} |
||||
|
||||
|
||||
render() { |
||||
return ( |
||||
<div id="scriptRunnerTab"> |
||||
<ScriptRunnerUI loadScriptRunner={this.loadScriptRunner.bind(this)} /> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
@ -0,0 +1 @@ |
||||
export { ScriptRunnerUI } from './lib/script-runner-ui'; |
||||
@ -0,0 +1,83 @@ |
||||
import React, { useEffect, useState } from "react"; |
||||
import { Accordion, Card, Button } from "react-bootstrap"; |
||||
import axios from "axios"; |
||||
import { ProjectConfiguration } from "./types"; |
||||
import { FormattedMessage } from "react-intl"; |
||||
import { faCheck, faToggleOn } from "@fortawesome/free-solid-svg-icons"; |
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; |
||||
import { Profile } from "@remixproject/plugin-utils"; |
||||
import { IframeProfile, ViewProfile } from "@remixproject/engine-web"; |
||||
import { Plugin } from "@remixproject/engine"; |
||||
|
||||
export interface ScriptRunnerUIProps { |
||||
// Add your props here
|
||||
loadScriptRunner: (name: string) => void; |
||||
} |
||||
|
||||
export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => { |
||||
const { loadScriptRunner } = props; |
||||
const [configurations, setConfigurations] = useState([]); |
||||
const [activeKey, setActiveKey] = useState('default'); |
||||
const [activeConfig, setActiveConfig] = useState('default'); |
||||
|
||||
useEffect(() => { |
||||
// Fetch the JSON data from the localhost server using Axios
|
||||
const fetchData = async () => { |
||||
try { |
||||
const response = await axios.get('http://localhost:3000/projects.json'); |
||||
setConfigurations(response.data); |
||||
} catch (error) { |
||||
console.error("Error fetching the projects data:", error); |
||||
} |
||||
}; |
||||
|
||||
fetchData(); |
||||
}, []); // Empty array ensures this effect runs once when the component mounts
|
||||
|
||||
const handleSelect = (key) => { |
||||
console.log("Selected key:", key, activeKey); |
||||
setActiveConfig(key); |
||||
console.log(loadScriptRunner) |
||||
loadScriptRunner(key) |
||||
}; |
||||
|
||||
// Filter out unpublished configurations
|
||||
const publishedConfigurations = configurations.filter((config) => config.publish); |
||||
|
||||
return ( |
||||
<div className="px-1"> |
||||
<Accordion defaultActiveKey="default"> |
||||
{publishedConfigurations.map((config: ProjectConfiguration, index) => ( |
||||
<div key={index}> |
||||
<div className="d-flex align-items-baseline justify-content-between"> |
||||
<Accordion.Toggle as={Button} variant="link" eventKey={config.name}> |
||||
<span className="pl-2">{config.name}</span> |
||||
</Accordion.Toggle> |
||||
<div onClick={() => handleSelect(config.name)} className="pointer px-2"> |
||||
{activeConfig !== config.name ? |
||||
<FontAwesomeIcon icon={faToggleOn}></FontAwesomeIcon> : |
||||
<FontAwesomeIcon className="text-success" icon={faCheck}></FontAwesomeIcon> |
||||
} |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<Accordion.Collapse className="px-4" eventKey={config.name}> |
||||
<> |
||||
<p><strong>Description: </strong>{config.description}</p> |
||||
<p><strong>Dependencies:</strong></p> |
||||
<ul> |
||||
{config.dependencies.map((dep, depIndex) => ( |
||||
<li key={depIndex}> |
||||
<strong>{dep.name}</strong> (v{dep.version}) |
||||
</li> |
||||
))} |
||||
</ul></> |
||||
</Accordion.Collapse></div>))} |
||||
</Accordion> |
||||
|
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
|
||||
@ -0,0 +1,20 @@ |
||||
export interface Dependency { |
||||
version: string; |
||||
name: string; |
||||
alias?: string; |
||||
import: boolean; |
||||
require?: boolean; |
||||
windowImport?: boolean; |
||||
} |
||||
|
||||
export interface Replacements { |
||||
[key: string]: string; |
||||
} |
||||
|
||||
export interface ProjectConfiguration { |
||||
name: string; |
||||
publish: boolean; |
||||
description: string; |
||||
dependencies: Dependency[]; |
||||
replacements: Replacements; |
||||
} |
||||
Loading…
Reference in new issue